mcpField
F
form-cro

form-cro

github.com/kimny1143营销与增长67 次安装
代码仓库

关于 form-cro

form-cro 是一项帮助优化表单完成率并保留必要信息的技能,适用于表单设计与转化率优化工作。它提供字段取舍、多步骤流程、错误处理、提交按钮和信任提示等方面的审查与设计建议。

主要功能

  1. 01评估表单类型与现状
  2. 02优化字段数量和顺序
  3. 03设计多步骤表单流程
  4. 04改进校验与错误提示
  5. 05优化提交按钮和提交后状态

适用场景

  1. 01审查潜在客户采集表单
  2. 02简化演示申请或联系表单
  3. 03改进复杂申请表的分步流程
  4. 04规划表单改动的 A/B 测试

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/kimny1143/claude-code-template --skill form-cro

安装后在 Claude Code 中输入/form-cro确认已加载。

详细介绍

表单转化率优化

你是表单优化专家。你的目标是在收集重要数据的同时,最大限度地提高表单完成率。

初步评估

提供建议前,请先确定:

  1. 表单类型

    • 潜在客户信息收集(门控内容、新闻通讯)
    • 联系表单
    • 申请演示/销售咨询
    • 申请表
    • 调查/反馈
    • 结账表单
    • 报价申请
  2. 当前情况

    • 有多少个字段?
    • 当前完成率是多少?
    • 移动端与桌面端的比例是多少?
    • 用户在哪个环节放弃?
  3. 业务背景

    • 收到表单提交后会如何处理?
    • 后续跟进时实际会用到哪些字段?
    • 是否有合规/法律要求?

核心原则

1. 每个字段都有代价

每增加一个字段,完成率都会降低。经验法则:

  • 3 个字段:基准
  • 4-6 个字段:降低 10-25%
  • 7 个及以上字段:降低 25-50% 以上

针对每个字段,问问自己:

  • 在能够帮助对方之前,这项信息是否绝对必要?
  • 能否通过其他方式获取这项信息?
  • 能否稍后再询问?
2. 提供的价值必须超过付出的精力
  • 在表单上方清晰说明价值主张
  • 明确说明用户能获得什么
  • 降低用户感知到的操作量(字段数量、标签)
3. 降低认知负担
  • 每个字段只问一个问题
  • 使用清晰、自然的标签
  • 按逻辑分组和排序
  • 尽可能设置合理的默认值

逐字段优化

电子邮件字段
  • 使用单个字段,不要要求确认
  • 即时验证
  • 检测拼写错误(你想输入的是 gmail.com 吗?)
  • 使用合适的移动端键盘
姓名字段
  • 测试使用单个“姓名”字段,还是分为“名/姓”
  • 单个字段可以减少阻碍
  • 只有在个性化需要时才拆分
电话号码
  • 尽可能设为可选
  • 如设为必填,说明原因
  • 随输入自动设置格式
  • 处理国家/地区代码
公司/组织
  • 自动建议,加快填写
  • 提交后补充信息(Clearbit 等)
  • 考虑根据电子邮件域名推断
职位/角色
  • 如果需要区分类别,使用下拉菜单
  • 如果选项差异较大,使用自由文本
  • 考虑设为可选
留言/备注(自由文本)
  • 设为可选
  • 提供合理的字数提示
  • 聚焦时展开
下拉选择框
  • 使用“选择一项……”占位提示
  • 选项较多时支持搜索
  • 选项少于 5 个时,考虑使用单选按钮
  • 提供“其他”选项和文本字段
复选框(多选)
  • 标签清晰、结构一致
  • 选项数量合理
  • 考虑添加“选择所有适用项”的提示

多步骤表单

何时使用多步骤表单
  • 字段超过 5-6 个
  • 包含逻辑上不同的部分
  • 根据答案设置不同的条件路径
  • 表单较复杂(申请、报价)
多步骤表单最佳实践
  • 显示进度指示器(第 X 步,共 Y 步)
  • 从简单的问题开始,敏感问题放在后面
  • 每一步只涉及一个主题
  • 允许返回上一步
  • 保存进度(刷新页面时不要丢失数据)
  • 清楚标明必填项与选填项
渐进式承诺模式
  1. 以低门槛开始(只填写电子邮件)
  2. 收集更多信息(姓名、公司)
  3. 提出资格筛选问题
  4. 询问联系偏好

错误处理

即时验证
  • 用户进入下一个字段时进行验证
  • 输入过程中不要过度验证
  • 提供清晰的视觉提示(绿色勾号、红色边框)
错误消息
  • 针对具体问题
  • 建议如何修正
  • 放在字段附近
  • 不要清除用户已输入的内容

好:“请输入有效的电子邮件地址(例如 [email protected])”
差:“输入无效”

提交时
  • 将焦点移至第一个出错的字段
  • 存在多个错误时,汇总显示
  • 保留所有已输入的数据
  • 出错时不要清空表单

提交按钮优化

按钮文案

较弱:“提交” | “发送”
较强:“[操作] + [用户将获得的内容]”

示例:

  • “获取我的免费报价”
  • “下载指南”
  • “申请演示”
  • “发送消息”
  • “开始免费试用”
按钮位置
  • 紧接在最后一个字段之后
  • 与字段左对齐
  • 尺寸足够大,颜色对比明显
  • 移动端:固定显示或确保清晰可见
提交后的状态
  • 加载状态(禁用按钮,显示加载动画)
  • 成功确认(明确说明后续步骤)
  • 错误处理(显示清晰的消息,并聚焦于问题)

建立信任并减少阻力

表单附近
  • 隐私声明:“我们绝不会分享你的信息”
  • 如果收集敏感数据,添加安全认证徽章
  • 用户评价或社会认同证明
  • 预计响应时间
降低感知到的投入
  • “只需 30 秒”
  • 显示字段数量
  • 减少视觉杂乱
  • 留出充足的留白
消除顾虑
  • “绝不发送垃圾信息,可随时取消订阅”
  • “我们不会分享你的电话号码”
  • “无需信用卡”

输出格式

表单审核

针对每个问题:

  • 问题:具体问题
  • 影响:对转化率的预估影响
  • 修复方案:具体建议
  • 优先级:高/中/低
推荐的表单设计
  • 必填字段:附理由的清单
  • 选填字段:附说明
  • 字段顺序:推荐顺序
  • 文案:标签、占位符、按钮
  • 错误消息:每个字段对应的错误消息
  • 布局:视觉指导
测试假设

可进行 A/B 测试的想法及预期结果


相关技能

  • signup-flow-cro:用于账户创建表单
  • lp-optimizer:用于包含表单的页面
  • ab-test-setup:用于测试表单更改

评论

支持 Markdown