给静态 HTML 页面用的网站联系表单
这里的网站联系表单是一个普通 HTML 表单,提交到你不必自己托管的接口。访客填写姓名、邮箱和留言。我们接收 POST,丢掉明显的机器人,再把字段发到你账户上的邮箱。同一页也是一份可以直接贴进现有页面的联系我们表单。
创建访问密钥
注册后打开仪表盘,复制访问密钥。它应该出现在页面源码里。它不能登录账户。把它当成邮箱地址,而不是密码。
贴上表单
把 form 的 action 指到 https://getformpost.com/api/submit,用名为 access_key 的隐藏字段带上密钥。标签、布局和 CSS 保持你自己的。接口读取你已经写好的字段。
查收邮件
成功的提交会记在仪表盘里,并寄到通知邮箱。如果访客填了合法的 email 字段,该地址会作为 Reply-To,你可以直接在邮件客户端回复。
复制这段 HTML
把表单贴进任意静态页面。把访问密钥填进上面的框再复制。HTML 已经填好。
下面的 HTML 会跟着变。不用改代码。
HTML
<form action="https://getformpost.com/api/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
<label>
姓名
<input type="text" name="name" required>
</label>
<label>
邮箱
<input type="email" name="email" required>
</label>
<label>
留言
<textarea name="message" required></textarea>
</label>
<input type="text" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" aria-hidden="true">
<button type="submit">发送</button>
</form>其他工具各自在做什么
托管式搭建器覆盖了这项工作的大部分。POWr 卖可嵌入的小组件,Jotform 卖自带编辑器的表单工作室,Mailchimp 把联系表单收进受众名单再群发。那些产品给想要可视化设计器的团队。这一页给一份 HTML 文件。
| Formpost | POWr | Jotform | Mailchimp | |
|---|---|---|---|---|
| 标记仍由你写 | 你的 HTML | 托管挂件 | 表单搭建器 | 受众工具 |
| 能用在静态站 | 可以 | 脚本嵌入 | 嵌入代码 | 嵌入代码 |
| 邮件发往 | 你的邮箱 | 看挂件设置 | 可以 | 营销名单 |
| 免费方案 | 每月 100 条 | 有限额 | 有限额 | 有限额 |
它替换掉什么
静态主机只提供文件。它不会跑 PHP,不会打开 SMTP,也不该在仓库里放邮箱密码。常见的替代是注入 iframe、样式和另一套账户的第三方小组件。这里的做法是把标记留在你的仓库里。我们这边只处理 POST:读正文、核对密钥、做垃圾过滤、写一行记录,再交给你在仪表盘上指定的收件箱。

用你自己的标记做联系我们表单
很多人搜的是联系我们表单,页面已经叫 Contact,只差把字段送到某个地方。用同一个接口。字段名沿用页面上已有的名字。name、email、message 就够一个基本表单,多出来的文本框会各自成为邮件里的一行。文件上传会被忽略,避免免费额度变成一个开放的文件箱。
访问密钥故意是公开的
密钥写在 HTML 里,能读到页面的人就能提交。这就是产品本身。他们改不了通知邮箱,读不了别人的消息,也提不了每月额度。那些操作需要登录。如果一个你不再控制的页面还在提交,在仪表盘里轮换密钥,旧密钥立刻失效。被复制到垃圾页面上的表单靠轮换解决,而不是假装公开页面里的密钥是秘密。

垃圾过滤:蜜罐,然后短暂限速
代码片段里有一个名为 botcheck 的文本框,用 CSS 隐藏,并且移出 Tab 顺序。人看不到它。给每个输入乱填的机器人会填上它。接口仍返回和真留言一样的成功信息,然后丢掉这次提交。不入库,不发信,这样机器人不知道是哪个字段露了馅。之后,同一个 IP 和同一把密钥每隔几秒只能成功一次。人发一封联系表单不会察觉。循环密钥的脚本会。
脚本用 JSON,普通 HTML 用跳转
浏览器以 text/html 提交时,如果你在收件箱上保存了感谢页地址,就会跟着跳转。该地址必须是 https,或者本机的 http,而且必须是登录后保存的那一个。POST 里的 redirect 字段不能把浏览器带到别的主机,避免公开密钥变成这个域名上的开放跳转。带 Accept: application/json 的 fetch,或正文里 _reply=json,会拿到 JSON:success、一句说明和一个 id。本页的实时演示走 JSON,这样你不用离开文章就能看到结果。

免费额度,然后是付费月份
免费方案每个 UTC 月在你的全部收件箱上一共存 100 条,并允许一个收件箱。计数超过上限后,后来的提交仍会保存但会被锁定:字段不会发邮件,仪表盘在你升级之前把它们藏起来。每天最多一封短信说明有几条在等。Pro 方案在免费联系表单页面出售,把上限提到每月 5000 条和 20 个收件箱,记录不限期,并且没有标识。结账收取服务端价目表里的价格。浏览器里填的数字会被忽略。超过免费额度仍会收下,Pro 只在超过 5000 条时拒绝。
和托管搭建器有什么不同
POWr 是小组件库。你在他们的编辑器里设计,再贴一段脚本。页面已经有设计系统时,这是错误的交换。Jotform 是完整的表单产品:条件逻辑、表单内付款,以及变成唯一事实来源的搭建器。表单本身就是产品时再用它。Mailchimp 希望提交变成订阅者。那适合新闻信,不适合你只回复一次的支持留言。这里只做一件事:把字段交到你的邮箱,并在仪表盘留一份副本。它不给线索打分,也不启动培育邮件。
页面本身仍要自己写好
接口不负责你的标签、隐私说明或 required 属性。希望浏览器在请求发出前检查格式时,把邮箱输入写成 type=email。告诉对方你多久会读邮件。如果收集的不止回复地址和留言,就写在按钮旁边。我们保存你发来的字段,以便邮件延迟时你仍能读到。不要在联系表单里要密码、卡号或证件号。邮件正文是纯文本加一张简单的 HTML 表,秘密写进去就会躺在邮箱里。
从静态文件到一封真消息
典型页面是 GitHub Pages、Cloudflare Pages 或对象存储上的 index.html。加上表单,部署文件,再从部署后的网址提交一次,确认主机没有吞掉 POST。有的静态主机只拦截自己域名上的表单提交。action 指向我们的主机就可以绕开这一点。以后如果加了构建步骤,可以把访问密钥留在 HTML 里,或在构建时注入一个允许公开的环境变量。不要把邮箱密码放进那个变量。邮箱密码不要留在静态主机上。
一个收件箱不够的时候
免费方案有一个收件箱。已经建好的收件箱会留下,即使更早的方案允许第二个,回到免费上限以内之前也不能再新建。每月计数按账户而不是按收件箱,多出来的收件箱不会把免费额度乘两倍。仪表盘列出最近 30 天里每条已保存的提交、时间和邮件状态:投递被接受是 sent,还没接通投递时是 logged,投递报错是 failed,免费额度用完后锁定是 locked。发送失败的记录仍然留在列表里,这比访客屏幕上一个绿色提示更重要。轮换某一收件箱的密钥不会动到另一个。
接着读
表单发到邮箱讲请求本身:请求头、蜜罐,以及跳转和 JSON 的差别。博客上有三篇教程:HTML 联系表单发到邮箱、提交表单到邮箱,以及用 PHP 把 HTML 表单发到邮箱。价格页是免费联系表单方案,包括到达上限后会发生什么。如果只要那个输入框,下面的代码片段就是全部集成。