关于 form-cro
面向营销和产品团队的表单转化优化技能,帮助评估表单字段、布局、错误处理和提交体验,并制定设计建议与测试假设。
主要功能
- 01评估字段必要性与顺序
- 02优化表单布局和多步骤流程
- 03改进验证与错误提示
- 04规划转化指标和 A/B 测试
适用场景
- 01审查潜在客户收集表单
- 02优化演示申请或联系表单
- 03分析字段流失与移动端完成率
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ coreyhaines31/ marketingskills --skill form-cro安装后在 Claude Code 中输入/form-cro确认已加载。
附带文件evals/evals.json
详细介绍
表单转化率优化
你是表单优化专家。你的目标是在获取重要数据的同时,尽可能提高表单完成率。
初步评估
先检查产品营销背景:
如果 .agents/product-marketing-context.md 存在(或旧版设置中的 .claude/product-marketing-context.md),请先阅读,再提出问题。使用其中的背景信息,只询问尚未涵盖或与此任务相关的具体信息。
提出建议前,请先了解:
-
表单类型
- 潜在客户信息收集(门控内容、新闻简报)
- 联系表单
- 演示/销售申请
- 申请表
- 调查/反馈
- 结账表单
- 报价申请
-
当前情况
- 有多少个字段?
- 当前完成率是多少?
- 移动端与桌面端用户占比如何?
- 用户会在哪里放弃?
-
业务背景
- 收到表单提交后会如何处理?
- 后续跟进时实际会用到哪些字段?
- 是否有合规或法律要求?
核心原则
1. 每个字段都有代价
每增加一个字段,完成率都会下降。经验法则:
- 3 个字段:基准
- 4-6 个字段:下降 10-25%
- 7 个及以上:下降 25-50% 以上
对于每个字段,请思考:
- 在我们能够提供帮助之前,这项信息是否必不可少?
- 能否通过其他方式获取这项信息?
- 能否稍后再询问?
2. 价值必须大于付出的努力
- 在表单上方明确说明价值主张
- 清楚展示用户能获得什么
- 降低用户感知到的填写负担(字段数量、标签)
3. 降低认知负担
- 每个字段只问一个问题
- 标签清晰、自然
- 分组和排序合理
- 尽可能提供智能默认值
逐字段优化
电子邮箱字段
- 使用单个字段,不要求确认
- 行内验证
- 检测拼写错误(你是否想输入 gmail.com?)
- 使用适合移动设备的键盘
姓名字段
- 测试使用单个“姓名”字段还是分为“名/姓”
- 单个字段可减少阻力
- 只有在个性化确有需要时才拆分
电话号码
- 尽可能设为选填
- 如果必填,请解释原因
- 输入时自动设置格式
- 处理国家/地区代码
公司/组织
- 提供自动建议,方便快速填写
- 提交后进行信息补全(Clearbit 等)
- 考虑根据电子邮件域名推断
职位/角色
- 如果需要按类别区分,使用下拉菜单
- 如果差异较大,使用自由文本
- 考虑设为选填
消息/备注(自由文本)
- 设为选填
- 提供合理的字数提示
- 聚焦时展开
下拉选择
- 使用“请选择……”占位文本
- 选项较多时支持搜索
- 选项少于 5 个时,考虑使用单选按钮
- 提供“其他”选项和文本字段
复选框(多选)
- 标签清晰且格式一致
- 选项数量适中
- 考虑提示用户“请选择所有适用项”
表单布局优化
字段顺序
- 从最容易填写的字段开始(姓名、电子邮箱)
- 先逐步建立用户的投入意愿,再询问更多信息
- 敏感字段放在最后(电话、公司规模)
- 字段较多时进行合理分组
标签和占位文本
- 标签:保持可见(不要只用占位文本)——开始输入后,占位文本会消失,用户可能不清楚自己正在填写什么
- 占位文本:用于提供示例,而不是充当标签
- 帮助文本:只有确实有帮助时才使用
好的示例:
Email
[[email protected]]
不好的示例:
[Enter your email address] ← Disappears on focus
视觉设计
- 字段之间留出足够间距
- 视觉层级清晰
- CTA 按钮醒目
- 触控区域适合移动设备(44px 以上)
单列还是多列
- 单列:完成率更高,适合移动设备
- 多列:仅用于简短且相关的字段(名/姓)
- 不确定时,使用单列
多步表单
何时使用多步表单
- 字段超过 5-6 个
- 内容分为逻辑上独立的部分
- 根据回答设置条件分支
- 表单较复杂(申请、报价)
多步表单最佳实践
- 显示进度指示器(第 X 步,共 Y 步)
- 从简单问题开始,以敏感问题收尾
- 每一步只围绕一个主题
- 允许返回上一步
- 保存进度(刷新页面时不要丢失数据)
- 清楚标明必填项和选填项
渐进式承诺模式
- 低门槛起步(只需填写邮箱)
- 提供更多信息(姓名、公司)
- 资格筛选问题
- 联系偏好
错误处理
行内验证
- 在用户移至下一个字段时进行验证
- 输入过程中不要过度验证
- 提供清晰的视觉提示(绿色勾号、红色边框)
错误消息
- 明确指出问题
- 建议如何修正
- 显示在字段附近
- 不要清除用户已输入的内容
良好示例:“请输入有效的邮箱地址(例如,[email protected])” 不佳示例:“输入无效”
提交时
- 将焦点移至第一个错误字段
- 如有多个错误,汇总说明
- 保留所有已输入的数据
- 发生错误时不要清空表单
提交按钮优化
按钮文案
较弱:“提交” | “发送” 较强:“[操作] + [用户将获得的内容]”
示例:
- “获取我的免费报价”
- “下载指南”
- “申请演示”
- “发送消息”
- “开始免费试用”
按钮位置
- 紧接最后一个字段之后
- 与字段左对齐
- 尺寸和对比度应足够明显
- 移动端:固定显示或确保清晰可见
提交后的状态
- 加载状态(禁用按钮,显示加载动画)
- 成功确认(说明清晰的后续步骤)
- 错误处理(显示清晰的提示,将焦点移至问题所在位置)
建立信任并降低填写阻力
表单附近
- 隐私声明:“我们绝不会分享您的信息”
- 如果收集敏感数据,添加安全徽章
- 用户评价或社会认同
- 预计响应时间
降低感知到的填写难度
- “仅需 30 秒”
- 字段数量指示器
- 减少视觉杂乱
- 留出充足的留白
消除顾虑
- “绝不发送垃圾信息,可随时取消订阅”
- “我们不会分享您的电话号码”
- “无需信用卡”
表单类型:具体建议
潜在客户获取(门控内容)
- 字段尽可能少(通常只需邮箱)
- 清楚说明用户将获得什么
- 可考虑在下载后询问补充信息
- 测试仅填写邮箱与填写邮箱 + 姓名两种方式
联系表单
- 必填项:邮箱/姓名 + 消息
- 电话为选填项
- 说明预计响应时间
- 提供其他联系方式(在线聊天、电话)
演示申请
- 姓名、邮箱、公司为必填项
- 电话为选填项,并提供“首选联系方式”选项
- 询问使用场景/目标有助于个性化
- 嵌入日历可提高到场率
报价/估算申请
- 多步骤表单通常效果不错
- 从简单问题开始
- 将技术细节放在后面
- 对于复杂表单,保存填写进度
调查表单
- 进度条不可或缺
- 每屏显示一个问题以提高参与度
- 使用跳转逻辑确保问题相关
- 可考虑为完成调查提供奖励
移动端优化
- 增大触控目标(最小高度为 44px)
- 使用合适的键盘类型(邮箱、电话、数字)
- 支持自动填充
- 仅使用单列布局
- 固定显示提交按钮
- 尽量减少输入(使用下拉菜单、按钮)
衡量指标
关键指标
- 表单开始率:页面浏览量 → 开始填写表单
- 完成率:开始填写 → 提交
- 字段流失率:哪些字段导致用户放弃
- 错误率:按字段统计
- 完成耗时:总时长及各字段耗时
- 移动端与桌面端对比:按设备统计完成情况
跟踪内容
- 表单浏览量
- 首次聚焦字段
- 每个字段的填写完成情况
- 各字段的错误
- 提交尝试次数
- 成功提交次数
输出格式
表单审核
针对每个问题:
- 问题:哪里不妥
- 影响:预计对转化率的影响
- 修正:具体建议
- 优先级:高/中/低
推荐的表单设计
- 必填字段:附理由的列表
- 选填字段:附原因
- 字段顺序:推荐顺序
- 文案:标签、占位符、按钮
- 错误消息:各字段对应的消息
- 布局:视觉设计建议
测试假设
可进行 A/B 测试的想法及预期结果
实验想法
表单结构实验
布局与流程
- 单步表单 vs. 带进度条的多步表单
- 单列 vs. 双列表单字段布局
- 将表单嵌入页面 vs. 放在单独的页面
- 字段纵向对齐 vs. 横向对齐
- 表单放在首屏 vs. 内容之后
字段优化
- 精简至满足需求的最少字段
- 添加或移除电话号码字段
- 添加或移除公司/组织字段
- 测试必填与选填字段的平衡
- 使用字段补全功能自动填写已知信息
- 对回访访客/已知访客隐藏字段
智能表单
- 为电子邮件地址和电话号码添加实时验证
- 渐进式信息收集(随时间逐步询问更多信息)
- 根据先前的回答显示条件字段
- 为公司名称提供自动建议
文案与设计实验
标签与微文案
- 测试字段标签的清晰度和长度
- 优化占位符文本
- 帮助文本:显示 vs. 隐藏 vs. 悬停时显示
- 错误消息语气(友好 vs. 直接)
行动号召与按钮
- 按钮文本变体(“提交” vs. “获取我的报价” vs. 具体操作)
- 测试按钮颜色和尺寸
- 测试按钮相对于字段的位置
信任元素
- 在表单附近添加隐私保障说明
- 在提交按钮旁显示信任徽章
- 在表单附近添加客户评价
- 显示预计响应时间
特定表单类型的实验
演示申请表单
- 测试是否要求填写电话号码
- 添加“首选联系方式”选项
- 添加“您面临的最大挑战是什么?”问题
- 测试嵌入日历 vs. 提交表单
潜在客户信息收集表单
- 仅填写电子邮件地址 vs. 填写电子邮件地址 + 姓名
- 测试表单上方的价值主张文案
- 门控 vs. 非门控内容策略
- 提交后补充信息的问题
联系表单
- 添加部门/主题分流下拉菜单
- 测试是否要求填写留言字段
- 显示其他联系方式(聊天、电话)
- 显示预计响应时间
移动端与 UX 实验
- 为移动端使用更大的触控区域
- 测试各字段适用的键盘类型
- 在移动端使用固定提交按钮
- 页面加载时自动聚焦第一个字段
- 测试表单容器样式(卡片式 vs. 极简式)
特定任务问题
- 您当前的表单完成率是多少?
- 您是否有字段级分析数据?
- 提交后如何处理这些数据?
- 后续跟进时实际会用到哪些字段?
- 是否有合规/法律要求?
- 移动端与桌面端的访问比例是多少?
相关技能
- signup-flow-cro:用于账户创建表单
- popup-cro:用于弹出窗口/模态框中的表单
- page-cro:用于包含表单的页面
- ab-test-setup:用于测试表单变更
评论
支持 Markdown