跳转到内容
FFormhook
← 全部指南

指南

HTML 联系表单（无需后端）

在纯 HTML 页面上一个可用的联系表单只需要正确的 form action 属性。将这段代码粘贴到任何 .html 文件，换上您的 Formhook API 密钥，您就拥有一个带垃圾防护、仪表盘和每次提交都推送通知的可工作端点。

代码片段

contact.HTML
<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <label>
    Email
    <input type="email" name="email" required />
  </label>

  <label>
    Message
    <textarea name="message" required></textarea>
  </label>

  <!-- honeypot: bots fill this; humans don't see it -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />

  <!-- optional: send users to a thank-you page after a native POST -->
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />

  <button type="submit">Send</button>
</form>

工作原理

action 属性就是接收提交的端点。Formhook 为每个表单提供一个 URL - 在 创建账户 后从您的 仪表盘 复制它。_gotcha 字段是一个 honeypot：机器人通常填写每个输入框，真实用户看不到它，因此该字段含有内容的任何提交都会被静默丢弃（且不消耗您的配额）。_redirect 字段是可选的 - 如果存在，Formhook 会在原生表单 POST 成功后向该 URL 发送 302。该 URL 必须在您表单的允许来源列表中，因此不会有 open redirect 的意外。

之后会发生什么

  • 提交会在一秒内出现在您的 Formhook 仪表盘中。
  • 您的手机、笔记本和台式机都会收到推送通知（如果您已启用）。
  • 您可以从提交详情面板直接回复发送者 - Pro 及以上。

今天就上线您的 HTML 联系表单。

免费注册、创建表单、粘贴 API 密钥。五分钟搞定。

免费开始

免费层：5 个表单 · 每月 250 次提交 · 无需信用卡。

HTML 联系表单 - 常见问题

Formhook 如何在没有 reCAPTCHA 的情况下阻挡垃圾？
两层。隐藏的 _gotcha honeypot 静默丢弃懒惰的机器人 - 它们会填写每个字段，真实用户看不到这个字段。其余的就打开表单设置里的 Cloudflare Turnstile；这是每个表单的开关。每个表单上还有滑动窗口速率限制。
同一个站点上可以有多个联系表单吗？
可以。一个 Formhook 表单，一个 API 密钥，一个端点。免费层涵盖五个表单 - 付费层更多。每个表单都有自己的仪表盘、允许来源列表和推送开关。
提交后如何将用户重定向到感谢页面？
在表单中包含 <input type="hidden" name="_redirect" value="https://example.com/thanks" />。该 URL 必须在您表单的允许来源列表中 - Formhook 会严格校验，因此不会有 open redirect 漏洞。

其他框架的指南

Migrating from Formspree? See how Formhook compares.