指南
Eleventy 联系表单（无需后端）
Eleventy 在构建时渲染为静态 HTML，因此 Eleventy 联系表单只是 Nunjucks（或 Liquid 或纯 HTML）模板中的普通 HTML 表单。form action 指向 Formhook，再没有其他事情可做。
代码片段
contact.Eleventy
{# src/contact.njk - Nunjucks template, plain HTML form #}
<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' | url }}" />
<button type="submit">Send</button>
</form>工作原理
代码片段可在任何 Eleventy 模板语言中工作 - Nunjucks（示例）、Liquid、Handlebars、纯 HTML、JSX。{{ '/thanks' | url }} 过滤器应用 Eleventy 的 URL 转换，使 _redirect 在使用 pathPrefix 时也能正确工作。把表单放进页面模板或 include 中 - 哪个都行。
之后会发生什么
- 提交一秒内出现在您的 Formhook 仪表盘中。
- 推送通知会在每个启用它的设备上触发。
- 从仪表盘直接回复（Pro 及以上）- 让您真实的收件箱不出现在表单的 HTML 里。
今天就上线您的 Eleventy 联系表单。
免费注册、创建表单、粘贴 API 密钥。五分钟搞定。
免费开始免费层：5 个表单 · 每月 250 次提交 · 无需信用卡。
Eleventy 联系表单 - 常见问题
- 它能与默认的 Eleventy 构建管线一起工作吗？
- 可以。表单是普通 markup，能够经受 Eleventy 的模板转换。无需任何数据文件、插件或 shortcode。
- 我能从 JSX 或 Liquid 模板使用它吗？
- 可以。HTML 在不同模板语言间不会改变 - 只有嵌入像重定向 URL 这样的动态部分的方式会随模板语法而变化。
- 如何在不添加构建时集成的情况下处理垃圾？
- 垃圾防护在 Formhook 一侧：honeypot 字段静默丢弃机器人，Cloudflare Turnstile 是每个表单的开关。您不需要在 Eleventy 构建中连线任何东西。
其他框架的指南
Migrating from Formspree? See how Formhook compares.