免后端表单收集站

免后端表单的核心是「提交给谁」。三种常用通道：

1. 第三方表单服务（Formspree / Getform / 金数据 / 腾讯问卷）：复制一个 action 地址即可，自带存储、邮件通知、防 spam。起步最快，免费额度够个人用
2. 云函数 + 表格（腾讯云 SCF / 阿里云 FC → 写进飞书多维表 / 腾讯文档）：数据在自己手里，可自定义，但需要写几十行代码
3. 邮件转发（mailto 或表单服务转发邮件）：最简单但数据不好统计，只适合联系表单

怎么选：

• 只是「联系我们」→ 表单服务转发邮件
• 报名 / 留资要统计 → 表单服务自带后台，或云函数写表格
• 数据敏感（含身份证、支付信息）→ 别用免费第三方，走云函数 + 自己的库，并且加密存储

合规底线：表单页写明「收集哪些信息、用于什么、保留多久」，并提供删除联系方式。留资类表单必须有隐私说明。

字段数量与转化率成反比。每多一个必填项，就掉一批人。

必填项控制在 3 个以内：通常是「姓名/称呼 + 联系方式 + 需求」。其他一律选填或事后补。

HTML 结构要点：

<form action="https://你的表单服务/f/xxxx" method="POST">
  <label for="name">怎么称呼你</label>
  <input id="name" name="name" required maxlength="20">
  <label for="contact">联系方式（邮箱或微信）</label>
  <input id="contact" name="contact" required>
  <button type="submit">提交</button>
</form>

体验细节：

• 每个 <input> 都配 <label>（可访问性 + 手机点击体验）
• 前端先校验格式（邮箱 / 手机号），错误提示写在字段下方，别用 alert
• 提交按钮点后禁用 + 显示「提交中」，防重复提交
• 提交成功跳到独立的成功页 / 显示「已收到，X 小时内回复你」，写清时效

别做的：验证码除非被刷，否则别加——它掉转化比挡 spam 的作用还大；被刷了再加 honeypot（隐藏字段）或服务端限流。

表单收不到通知，等于没做——用户填完你三天后才发现，人早走了。

通知（至少一条）：

• 邮件通知（表单服务自带，最稳）
• 钉钉 / 飞书机器人 webhook（云函数里 POST 一条，手机秒收）
• 两者都配：邮件存档 + 机器人提醒

落表（便于统计）：
云函数写进飞书多维表 / 腾讯文档表格，字段带上 提交时间 / 来源页 / 来源参数（src）。来源参数一定要记，否则你不知道哪条渠道来的留资有效。

防刷三件套（成本都很低）：

1. honeypot：加一个 CSS 隐藏的输入框，机器人填了就丢弃
2. 速率限制：同一 IP 每分钟最多 3 次
3. 必填格式校验：服务端再校验一遍（前端校验只是体验，不是安全）

备份：表单数据也是资产，每月导出一份存对象存储；第三方服务有免费额度上限，别等到超限才发现丢数据。

上线：HTTPS 必开（表单不加密用户不敢填）、canonical、提交成功页加 noindex（避免被收录成空页）。

转化观测（表单站唯一重要的指标）：

| 事件 | 触发 | props |
|---|---|---|
| form_view | 表单进入视口 | src |
| form_start | 第一次聚焦任意字段 | src |
| form_error | 校验失败 | field |
| form_submit | 提交成功 | src |

这么看：

• form_start / form_view 低 → 表单不够显眼或页面没说服力
• form_error 集中在某个字段 → 那个字段的提示写得不清楚
• form_submit / form_start 低 → 字段太多或有让人犹豫的必填项

按 src 拆分是必须的：同一个表单从微信来和从搜索来，转化率完全不同，不拆开看就会误判。

迭代：每月看一次漏斗，只改掉幅最大的那一环。表单站优化的原则是减法——删字段、删说明、删步骤，而不是加。