指南
Hugo 联系表单（无需后端）
Hugo 是没有运行时的静态站点生成器，因此 Hugo 联系表单只是嵌入 Hugo 模板中的普通 HTML 表单。把代码片段放入 layout 或 partial，换上您的 Formhook API 密钥即可。
代码片段
contact.Hugo
{{/* layouts/contact.html - plain HTML inside Hugo's template syntax */}}
<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required></textarea>
<input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
<input type="hidden" name="_redirect" value="{{ "/thanks" | absURL }}" />
<button type="submit">Send</button>
</form>工作原理
代码片段可在任何 Hugo 模板中工作 - layout、partial 或 single-page 模板。Hugo 在构建时直接传递原始 HTML，因此发布的 HTML 中的 action 属性指向 formhook.app/f/YOUR_API_KEY。{{ "/thanks" | absURL }} 部分是 Hugo 的模板语法：在构建时它会展开为您站点内的绝对 URL - 这正是 Formhook 进行 _redirect 校验所需要的。
之后会发生什么
- 提交一秒内出现在您的 Formhook 仪表盘中。
- 推送通知会在每个启用它的设备上触发。
- 从仪表盘直接回复（Pro 及以上）- 在多个 Hugo 站点指向同一个 Formhook 账户的客户工作中尤其实用。
今天就上线您的 Hugo 联系表单。
免费注册、创建表单、粘贴 API 密钥。五分钟搞定。
免费开始免费层：5 个表单 · 每月 250 次提交 · 无需信用卡。
Hugo 联系表单 - 常见问题
- 它能与静态 `hugo` 构建和 `hugo deploy` 一起工作吗？
- 可以。表单在构建输出中是普通 HTML。Hugo 不运行服务器端，所以表单是从浏览器直接 POST 到 Formhook 的。
- 我可以将 Hugo 的 i18n 功能与联系表单一起使用吗？
- 可以 - 表单本身是 markup，因此本地化的标签像任何其他 Hugo 模板一样工作。对占位符文本和字段标签使用 Hugo 的 i18n 函数即可。
- 如何避免在每个模板里硬编码 API 密钥？
- 把密钥放在站点的 params（config.toml 或 hugo.yaml）中，并在模板中以 {{ .Site.Params.formhookKey }} 引用它。把它当作公共端点标识符 - Formhook 的每表单速率限制和 Turnstile 开关来做真正的防护。
其他框架的指南
Migrating from Formspree? See how Formhook compares.