给静态 HTML 页面用的网站联系表单

这里的网站联系表单是一个普通 HTML 表单,提交到你不必自己托管的接口。访客填写姓名、邮箱和留言。我们接收 POST,丢掉明显的机器人,再把字段发到你账户上的邮箱。同一页也是一份可以直接贴进现有页面的联系我们表单。

在线演示

  1. 创建访问密钥

    注册后打开仪表盘,复制访问密钥。它应该出现在页面源码里。它不能登录账户。把它当成邮箱地址,而不是密码。

  2. 贴上表单

    把 form 的 action 指到 https://getformpost.com/api/submit,用名为 access_key 的隐藏字段带上密钥。标签、布局和 CSS 保持你自己的。接口读取你已经写好的字段。

  3. 查收邮件

    成功的提交会记在仪表盘里,并寄到通知邮箱。如果访客填了合法的 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 文件。

FormpostPOWrJotformMailchimp
标记仍由你写你的 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 表单发到邮箱。价格页是免费联系表单方案,包括到达上限后会发生什么。如果只要那个输入框,下面的代码片段就是全部集成。

常见问题