指南
Astro 联系表单(无需后端)
Astro 默认渲染为静态 HTML,这意味着 Astro 联系表单就是一个带有正确 action 属性的普通 HTML 表单。您不需要服务器端点或 Astro 集成 - 把代码片段粘贴到一个 .astro 页面即可。
代码片段
---
// src/pages/contact.astro
---
<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>
<input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
<input type="hidden" name="_redirect" value="https://example.com/thanks" />
<button type="submit">Send</button>
</form>工作原理
因为 Astro 默认输出静态 HTML,客户端不需要任何连线。表单的 action 直接 POST 到 formhook.app/f/YOUR_API_KEY,其中 YOUR_API_KEY 来自您 Formhook 仪表盘 中表单的设置。_gotcha 字段是 honeypot - 机器人会填它,人类看不到它,任何含内容的提交都会被静默丢弃。_redirect 字段在 POST 成功后将用户发送到感谢页面,URL 会针对您的允许来源列表进行校验。
提交后显示感谢页面
静态 Astro 表单提交时会离开当前页面,所以请创建一个类似 src/pages/thanks.astro 的页面,并用隐藏的 _redirect 输入指向它。请使用完整 URL,例如 https://example.com/thanks。该值必须是绝对 URL,且其 origin 在表单的允许 origin 中;否则 Formhook 会忽略它,访问者会看到 JSON 响应。如果您在 astro.config.mjs 中设置了 site,可以用 new URL("/thanks", Astro.site) 生成该值。
不离开页面就显示结果
想让访问者留在页面上,可以给组件加一小段 <script>:拦截 submit 事件,用 fetch 以 JSON 发送字段,再把提示写入状态元素。Astro 会原样把这段脚本交给浏览器,因此不需要框架,也不需要 island。该模式见 Next.js 指南,带无障碍状态提示的讲解见 AJAX 表单提交。JSON 提交不会使用 _redirect。
开发、预览和生产环境的允许 origin
把表单所在的每个 origin 都添加到允许的 origin,协议、主机和端口都要精确:astro dev 用 http://localhost:4321,生产域名带上 https://,如果在托管平台的预览域名上测试,也要加上它。若提交因 origin_not_allowed 失败,首先检查这份列表。
同样的配置适用于 Cloudflare Pages、GitHub Pages、Netlify 和 Vercel,因为浏览器直接向 Formhook 提交,您的托管平台根本看不到这次提交。
从 Astro 端点使用
静态页面不需要其他东西。如果您的站点运行在服务器或混合模式,并且更想从端点或 Astro action 发送提交,请在服务端代码中带上 X-Auth-Token 头调用 Formhook,该令牌在表单设置中生成,并保存在仅服务端可见的环境变量里。服务器请求不带 Origin 头,没有该令牌就会被拒绝。详情见文档。
垃圾信息与隐私
保留隐藏的 _gotcha 字段:机器人会填写它,这类提交会被静默丢弃。速率限制按 IP 和按表单生效,Cloudflare Turnstile 是仪表板里按表单开关的选项;这篇指南比较了各种方案。面向欧盟访问者,请在表单下方加一段简短说明。符合 GDPR 的联系表单指南里有可改写的措辞。
之后会发生什么
- 提交一秒内出现在您的 Formhook 仪表盘中。
- 推送通知会在每个您启用了它的设备上触发。
- 从仪表盘直接回复(Pro 及以上),无需暴露您真实的电子邮件地址。
今天就上线您的 Astro 联系表单。
免费注册、创建表单、粘贴 API 密钥。五分钟搞定。
免费开始免费层:5 个表单 · 每月 250 次提交 · 无需信用卡。
Astro 联系表单 - 常见问题
我需要 Astro 集成或服务器适配器吗?
我能在不同的 Astro 页面上有多个联系表单吗?
提交后如何显示感谢页面?
其他框架的指南
Migrating from Formspree? See how Formhook compares.