form-strategy

表单策略

表单是将意图转化为行动的地方。设计得好不好，决定了你是提升转化、降低用户挫败感，还是被垃圾信息淹没。与技术栈无关。

---

适用场景

• 设计或重新设计表单
• 关键表单的转化率正在下降
• 垃圾信息数量过多，导致收件箱或数据库不堪重负
• 审查网站上的表单
• 规划验证逻辑
• 选择表单工具（表单服务、自定义开发、无代码方案）
• 将表单与 CRM、电子邮件或其他下游系统集成
• 决定是否采用多步骤表单

不适用场景

• 通用转化率优化（使用 cro-optimization）
• 表单文案（使用 landing-page-copy）
• 超出表单特定需求的后端处理（使用 frontend-component-build、code-review-web）
• 通用无障碍审查（使用 accessibility-audit）

---

必需输入

• 表单的用途（要执行什么操作、要达成什么结果）
• 当前表单（URL、截图或字段）
• 当前表现（完成率、垃圾信息率、转化到下一步的比例）
• 下游系统（提交内容的去向：CRM、电子邮件、数据库、支持工具）
• 业务背景（提交量、潜在客户的紧急程度、误拦截与漏接的成本）

---

框架：5 个维度

每项表单决策都属于以下某个维度。

维度 1：字段策略

这是影响最大的杠杆。每增加一个字段，转化率都会降低。

每个字段都要问：

• 是否必须收集此信息才能为用户提供价值？
• 是否必须收集此信息才能为业务带来价值？
• 能否从其他来源推断出来（电子邮件域名、行为、上下文）？
• 能否稍后再询问（首次联系后、第二次访问时、设置页面上）？

**默认规则：**只询问促成下一步所需的最少信息，其他信息留到之后再收集。

对于 B2B 联系表单：姓名和电子邮件就足以开始。电话、公司规模、职位都属于可选信息，往往对转化的负面影响大于其对筛选潜在客户的帮助。

对于结账：国家、邮政编码、地址、姓名、付款信息。其他信息（推荐来源、营销订阅选项、创建账户）应设为可选，或移至购买完成后收集。

维度 2：字段设计

每个字段的外观和行为。

• 将标签置于输入框上方优于使用占位符。开始输入后，占位符标签就会消失。
• 行内标签（浮动标签）适用于非常紧凑的表单。
• 几乎所有表单都使用单列布局。用户的视线会自上而下移动。
• 合理分组并留出明显间距。不要把无关字段放在一起。
• **选择正确的输入类型：**电子邮件用 email，电话用 tel，数字用 number，日期用 date。移动设备的键盘会相应调整。
• 使用自动填充属性：autocomplete="email"、autocomplete="given-name" 等。浏览器和密码管理器会自动填入内容。
• 对适用的字段设置合理的默认值（例如，根据 IP 预选国家）。如果默认值错误会造成误导，就不要设置。

维度 3：验证

告诉用户哪里有问题、何时出现问题，以及如何修正。

• **在字段失去焦点时验证，而不是每次按键时都验证。**用户输入时突然出现的行内错误会造成干扰。
• 提交时重新验证（捕获用户跳过的字段）。
• 错误信息要具体：“电子邮件必须包含 @”比“电子邮件无效”更好。
• 将错误信息放在对应字段旁边。
• **有错误时不要提交表单。**突出显示第一个出错的字段，并滚动至该字段。
• **也要在服务器端验证。**客户端验证关乎用户体验，服务器端验证关乎正确性。

对于格式较灵活的字段（电话号码、邮政编码），验证应宽松。只拒绝明显错误的内容，而不要拒绝“非标准”格式。电话号码有很多种格式。

维度 4：垃圾信息防护

公开表单容易招来垃圾信息。从一开始就做好准备。

分层防护：

1. 蜜罐字段。 设置一个人类不会填写、但机器人会填写的隐藏字段。如果该字段被填写，就静默拒绝提交。免费、操作简单，而且对低成本垃圾信息出奇有效。
2. 基于时间的检测。 拒绝在 2-3 秒内完成的提交（机器人），或耗时过长的提交（可疑会话）。
3. 速率限制。 如果同一 IP 提交次数过多，就拒绝提交。
4. 将 CAPTCHA 作为最后手段。 现代的隐形 CAPTCHA（hCaptcha、reCAPTCHA v3、Turnstile）操作简单。老式图片 CAPTCHA 会严重影响转化率。
5. 行为信号。 光标是否移动？页面是否滚动？现代服务会跟踪这些信号。
6. 内容过滤。 拒绝明显的垃圾信息内容（链接、受众所在地区以外的语言内容、常见垃圾信息词汇）。
7. 服务端审核。 对于容易成为垃圾信息攻击目标的表单，先将提交内容放入队列，而不是直接发送到收件箱。

对于大多数联系表单：蜜罐 + 时间检查 + Turnstile（或类似服务）就足够了。

维度 5：提交流程

提交后会发生什么。

• 对于简短表单，显示内联成功消息。不要只为确认提交而跳转页面。
• 对于高价值提交，显示确认页面（提供后续步骤并说明预期）。
• 对于注册、购买、RSVP，发送确认邮件。这一步必不可少。
• 出错时保留已填写的数据，避免用户重新填写所有内容。
• 对于低风险表单，可以使用乐观 UI（在服务端确认前先显示成功）；对于高风险表单则有一定风险。

对于多步骤表单：

• 显示进度（3 of 5）
• 在步骤之间保存状态（以防刷新或跳转）
• 允许返回上一步而不丢失数据
• 每一步都进行验证，而不只是在最后验证

---

工作流

步骤 1：审查当前状态

针对网站上的每个表单：

• 用途是什么？
• 字段数量，以及必填项和选填项
• 当前完成率
• 当前垃圾信息率
• 验证规则
• 提交后会发生什么
• 数据后续会流向哪里

步骤 2：为每个表单定义成功指标

不同表单的成功指标不同：

• 潜在客户表单：合格潜在客户（由销售团队定义）
• 新闻邮件：确认订阅数（双重选择加入后）
• 联系表单：实质性回复（而不只是提交）
• 结账：成功付款

跟踪真正重要的指标，而不只是提交次数。

步骤 3：果断删减字段

应用字段策略筛选。对于每个字段，回答：

• 交付价值是否必需？保留。
• 是否只是有用但非必需？改为选填或稍后收集。
• 是否用于路由或资格判定？通常可以推断得出。

一个有 7 个字段的表单可以精简为 3 个字段。转化率会提高。

步骤 4：设置垃圾信息防护

公开表单上线前：

• 添加蜜罐字段
• 添加基于时间的检测
• 添加速率限制
• 如果表单流量大或垃圾信息多，添加现代 CAPTCHA

上线后持续监控。根据实际拦截情况调整各层防护。

步骤 5：改进验证

逐一检查每个字段：

• 验证是否具体？
• 验证时机是否合适（失焦或提交时，而不是每次按键时）？
• 错误消息是否便于采取行动？
• 服务端验证是否与客户端验证一致？

步骤 6：验证无障碍功能

关键基准：

• 每个输入框都有对应的标签（视觉上可见或使用 aria-label）
• 错误与输入框相关联（aria-describedby、aria-invalid）
• 焦点顺序与视觉顺序一致
• 不只依靠颜色来表示错误
• 表单完全支持键盘导航

完整的 WCAG 审查请参见 accessibility-audit。

步骤 7：测试下游流程

提交表单。验证：

• 数据到达正确的位置
• 必填字段已正确填写
• 垃圾信息防护正常工作（使用脚本进行测试）
• 用户收到预期的确认信息
• 内部通知及时送达

下游系统变更时，表单可能会在没有任何提示的情况下失效。每次集成更新后都要进行测试。

第 8 步：监控

• 随时间变化的完成率
• 随时间变化的垃圾信息率
• 每次提交的错误数（错误多 = 用户体验差）
• 流失字段（用户在哪个字段放弃？）

---

常见问题模式

字段太多。 大多数 B2B 联系表单的字段数是实际所需的 3 倍。删减。

输入时就触发验证。 令人恼火。用户还没输入完就会触发错误。

错误消息笼统。 “输入无效。”哪里无效？为什么无效？请说明具体情况。

必填字段未标记。 用户提交失败后才发现字段必填。请标记必填字段（或者，对于简短表单，标记选填字段）。

禁用了自动填充。 “为了安全。”这几乎从来不会提升安全性，却总会损害用户体验。请保持自动填充开启。

Tab 键顺序混乱。 Tab 键跳过字段或向后跳转。只有必要时才设置 tabindex；请使用自然的 DOM 顺序。

提交按钮位于首屏以下。 移动设备上尤其如此。用户看不到它。

出错后不保留已填内容。 用户提交后遇到一个错误，返回表单时所有字段都空了。简直是噩梦。请保存表单状态。

只用验证码防垃圾信息。 验证码会增加操作阻力。分层防护胜过一味增加操作阻力。

默认显示验证码。 现代验证码（Turnstile、reCAPTCHA v3）大多数时候都是隐形的，只会在必要时升级验证。请使用这些方案。

名义上订阅简讯，实际上加入营销名单。 请遵守用户选择的订阅范围。如果用户订阅的是产品更新，就不要把他们加入营销简讯名单。

确认页面没有后续操作。 只有“感谢提交”，却没有下一步。接下来呢？提供一个操作（阅读相关内容、返回首页或关注社交媒体账号）。

营销邮件未启用双重确认。 机器人和拼写错误会污染名单。有关其重要性，请参阅 email-deliverability。

邮箱字段接受 name@ 作为有效地址。 浏览器规范的验证比较宽松。请按实际格式验证。

自定义日期选择器不如原生控件。 现在大多数平台上的原生 <input type="date"> 都很好用。除非有具体理由，否则不要重复造轮子。

刷新后表单内容丢失。 对于较长的表单，请保存到 localStorage，并在加载时恢复。

---

输出格式

表单审计文档包括：

• 表单清单： 网站上的每个表单
• 逐表单审查： 用途、字段、性能
• 建议： 精简字段、改进验证、防范垃圾信息、调整设计
• 垃圾信息防护计划： 每个表单的防护层
• 无障碍状态： 每个表单的 WCAG 合规情况
• 下游集成图： 每个表单的数据流向
• 监控计划： 跟踪哪些内容

---

如果所需数据不可用

此技能的输出依赖其无法独立生成的数据、测量结果或工具结果。如果所需输入、工具或数据源不可用或无法验证，则应提供交付内容并明确说明缺口：需要什么、实际获取或验证了什么，以及输出中哪些部分会受到影响。绝不允许为了完成交付内容而捏造、估算或插值所需数值。明确说明缺口本身就是完整的答复。

---

参考文件

• references/form-anatomy-checklist.md：按字段和行为逐项列出的清单，用于审计或设计表单，涵盖结构、无障碍、验证和垃圾信息防护。