编者注：本文最初由 Web Marketing Today 发表。Practical Ecommerce 于 2012 年收购了 Web Marketing Today。2016 年，我们将两个网站合并，以 Practical Ecommerce 作为继承者。
网页表单通常是网站设计中被最后考虑的因素之一，但它却是人们与网站互动最频繁的途径之一。
无论是结账表单、注册 signup 还是简单的联系表单，以下七个常见的网页表单错误都可能会降低潜在客户与您公司达成交易的可能性。
1. 索取过多信息
每个人的时间都很宝贵，不要通过索取不必要的信息来浪费它。如果您只需要最少量的信息就能与人取得联系，就不要添加次要电话号码或备用电子邮件地址等字段。相反，可以使用渐进式分析（progressive profiling），在用户多次访问表单后询问更多问题。
首先询问最重要的信息，这样人们会感觉他们不仅仅是为您提供用于营销目的的联系方式。如果您正在填写报价请求，请在询问姓名或电子邮件地址之前，先询问与面临的挑战、预算和时间表相关的问题。
2. 标签位置混乱
确保您的表单字段标签放置正确，以免用户不清楚正在请求什么信息。对于用户来说，在开始填写表单后，左对齐的字段标签很难跟随和识别。
左对齐的字段标签难以跟随。
大多数移动设备会在用户开始填写某个字段时自动放大该字段，从而隐藏所有左对齐的标签。这迫使用户每次切换到另一个输入框时都要缩小视图并检查字段。
更好的解决方案是使用响应式查询（responsive queries），使标签在移动端顶部对齐，而在桌面端右对齐。尝试将所有标签加粗，使其比其他表单文本更突出。
3. 仅使用占位符而非标签
HTML5 为输入字段新增了一个“placeholder”（占位符）文本属性，它为字段的预期值提供简短提示。占位符文本在用户输入值之前显示在输入字段中，当用户开始键入时便会消失。
许多设计师已经摒弃了表单标签，仅使用占位符文本来描述输入字段。这虽然可能带来更简洁的设计，但却以牺牲用户体验为代价。
当用户可能在某个字段开始输入但对自己的答案或所需格式不确定时，这就成了一个问题。一旦用户开始输入，所有占位符文本都会消失，如果不刷新页面就无法恢复。
一种折衷方案是利用 CSS 隐藏标签，仅在输入字段变为活动状态时才显示它们。例如，Shopify 提供了一种解决方案，在用户开始键入时隐藏标签，然后将它们定位在输入字段上方。
4. 间距与布局不佳
通过在字段和区块周围提供充足的间距，为用户创造良好的浏览流程。
将相似的字段分组，例如将“姓名”（名和姓）与电话号码和电子邮件归入“联系信息”标题下。这能为所请求的字段提供更多上下文。尝试使用细小的虚线或实线来分隔各组内容和标题，以实现更好的组织效果。
您还可以考虑采用两列式表单布局。将所有必填字段放在左列，以确保不会遗漏任何项目；然后将提交按钮放在右列，以防止用户忽略位于第二列中本应填写的信息。
5. 令人困惑的验证与错误提示
在填写表单时遇到错误会降低转化率并让用户感到沮丧。当用户遗漏必填字段或电子邮件地址、电话号码格式不正确时，就会出现此类错误。
为避免此问题，请在表单的顶部和底部显示错误提示，确保用户不会忽视提交内容中的问题。通过边框和文字颜色高亮所有存在错误的字段。同时，通过描述正确输入的样子来解释为何提交内容不正确。
6. 验证码难以输入
表单垃圾邮件可能令人极度沮丧，并导致潜在客户生成报告出现错误。大多数人通过使用验证码（captcha）或一种用于判断表单是由计算机还是人类填写的设备来解决这一问题。
使用验证码来判断完成表单的是计算机还是人类。
验证码可能令人困惑且难以辨认。仅在您收到大量表单垃圾邮件时才使用它们。此外，为用户提供刷新验证码或播放单词音频的功能，以提供更好的无障碍体验。
另一种应对表单垃圾邮件的解决方案是使用“蜜罐”（honeypot）或隐藏字段，只有垃圾邮件机器人会填写该字段。这种技术实际上可以阻止机器人完成表单提交。
7. 未向用户提供确认或成功消息
一旦用户花费时间完成了表单，请立即提供反馈，告知其努力已成功。我还建议您向用户发送一封包含其提交信息的电子邮件确认函。此外，请明确说明回复所需的时间，以免用户因不确定是否会有人联系或何时联系而感到困惑。