HTML 联系表单发到邮箱

静态页面可以收集留言，但浏览器不会替你打开邮箱。这篇说明一条仍是普通标记的路径：表单提交到一个小接口，接口把字段写到你保存的地址。

页面负责什么

页面负责标签、字段和样式，不负责投递。宣传站、文档站或一页作品集通常只要三个输入：姓名、邮箱、留言。这些名字会成为你收到的邮件里的键。保持短、可读。第一版用 name、email、message 就够了。

不需要框架来渲染表单。任何能托管文件的主机上，一个 contact.html 就是完整的前端。网站联系表单 用一把公开的演示 key 放了同一段标记，你可以在创建账户之前先看一次提交。

标记

<form action="https://getformpost.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input
    type="text"
    name="botcheck"
    style="display:none"
    tabindex="-1"
    autocomplete="off"
  />
  <label>姓名 <input type="text" name="name" required /></label>
  <label>邮箱 <input type="email" name="email" required /></label>
  <label>留言 <textarea name="message" required></textarea></label>
  <button type="submit">发送</button>
</form>

method 必须是 POST。GET 会把留言放进查询字符串，随后进入日志和浏览器历史。action 是表单服务上的提交地址，不是 mailto:。mailto: 会打开访客自己的邮件程序，没有配置邮件程序的人就发不出去。

隐藏的 access_key 告诉接口使用哪个收件箱。注册后在仪表盘创建这把 key。它是公开的：写在 HTML 里，和地图嵌入 key 一样。它不是账户密码。如果 key 被滥用，就轮换它。旧页面会停止投递，直到你贴上新值。

按下发送之后

接口把正文读成 URL 编码字段、multipart 字段，或值是字符串、数字、布尔的 JSON 对象。文件输入会被忽略。空字段会被丢掉。保留名（access_key、redirect、_subject、蜜罐字段名）不会抄进邮件。其余字段会保存，并写进一封纯文本邮件。访客的邮箱如果是单个地址，就会成为回复地址。

请求 HTML、且收件箱保存了感谢页地址的浏览器，会被重定向到那个确切地址。表单不能另选主机。发送 Accept: application/json 或把 _reply 设为 json 的脚本，会得到带 success 的 JSON，并且不会跳转。两者都没有时，访客看到一页简短确认。

垃圾提交和每月上限

机器人会填写它看得到的每个字段，也包括它不该看见的字段。botcheck 用 CSS 隐藏，人会留空。里面只要有内容，接口就回答成功，并且什么都不存。这种假成功是故意的：听到错误的机器人会换一份载荷再试。人不会填这个字段，所以真正的留言仍然会到。

第二个限制是时间。同一地址、同一把 key，每隔几秒才能再提交一次。这能挡住循环，又不会挡住改完错字马上再发的人。免费方案每个 UTC 月保存 100 条。达到上限后接口会把后来的提交锁定保存，仪表盘会显示升级入口。数字写在 免费联系表单 页。

表单里不要收集什么

不要索取密码、卡号或身份证件号。载荷会被寄出并保存，方便你以后阅读。这适合问项目问题，不适合保存秘密。在按钮旁边用一句话告诉访客：留言会发到你的邮箱。隐私页对整个服务说了同一件事。

如果以后你需要自己控制的服务器，HTML 表单用 PHP 发邮件 写了 mail() 版本，以及多数静态主机为什么跑不了它。如果只想看请求形状，提交表单到邮箱 覆盖了 JSON 客户端和重定向字段。

发布前的核对

1. 创建账户，把 access key 抄进隐藏输入。
2. 把通知地址设成你真的会看的邮箱。
3. 从发布后的网址自己提交一次，不要从磁盘上用 file:// 打开。有的浏览器会把本地文件当成另一个来源并拦截提交。
4. 先确认邮件，再确认仪表盘里的同一行。投递和存储是分开的：邮件失败时行仍会留下，你可以读到内容。
5. 加上蜜罐。不加也能用，但也会邀请第一个爬到这个页面的脚本。

队友如果只要想法、不要标记，看 表单发到邮箱。你要发布的页面，把表单留在自己的 CSS 里。接口不会注入挂件、样式表或跟踪脚本。

陌生人能在手机上填完、你能收到字段、并且能在同一条线程里回复，这条路径就完成了。表单周围的页面是标题、你何时回复的一句话，以及回到你希望对方看到的作品的链接。