跳转到内容
FFormhook
← 返回博客

博客

如何为 Cloudflare Pages 添加联系表单

· 1 分钟阅读

Cloudflare Pages 是一个快速且慷慨的静态托管服务--推送一个仓库，就能获得全球部署，仅此而已。但它没有类似 Netlify Forms 的东西：没有内置服务会扫描你的 HTML 寻找 <form> 标签并开始收集提交内容。把一个原样的纯 HTML 联系表单部署到 Cloudflare Pages 上，POST 请求会无处可去。以下是原因，以及两种解决方法。

为什么 Cloudflare Pages 没有原生的表单产品

Cloudflare Pages 是一个静态文件托管服务，额外挂载了一层可选的 Functions 用于动态路由--它并不是一个表单处理平台。Netlify 的表单功能是在部署时解析你的构建产物，并为发现的每个表单配置一个隐藏后端；Cloudflare Pages 不做这种解析。你的构建产物只是 CDN 上的文件而已。如果表单需要一个可以发送数据的地方，你就得自己搭建或者借用这样一个地方。这大概率不是 Cloudflare 会去填补的空白--Pages 被刻意限定为静态资源加一层轻量的 serverless，而不是一条表单解析流水线。

方案一：自己编写一个 Pages Function

Cloudflare Pages 支持 Functions--存放在 /functions 目录中、运行在 Cloudflare 边缘节点上的小型 Workers 式处理程序。你可以添加一个 functions/api/contact.ts，读取 POST 请求体、校验数据、过滤垃圾内容、发送邮件（通过某个邮件服务商的 API，因为 Workers 无法建立原始 SMTP 连接），也许还会写入 KV 或 D1 做存储。这确实可行，而且一切都留在一个 Cloudflare 项目内。但现在校验、垃圾内容过滤、存储和邮件投递都要由你自己维护--这正是静态托管本该帮你省掉的那个后端。

方案二：把表单指向一个托管后端（推荐）

更快的做法是把 POST 请求发送给一个专为此而生的服务。保留你的标记结构，只需添加一个属性：

<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

这就是全部的集成工作。不需要 Function，不需要 Worker，也不需要管理邮件 API 密钥。提交内容会出现在仪表盘中，还能触发网页推送通知--只要网站已添加到主屏幕，iOS 上也一样有效。垃圾内容防护默认开启：honeypot 字段和速率限制会在大部分垃圾内容到达你之前将其拦截，如果遇到更针对性的攻击，你还可以叠加 Cloudflare Turnstile--Cloudflare 自家的隐私友好型 CAPTCHA，对一个部署在 Cloudflare Pages 上的表单来说，这个搭配再合适不过。提交内容和上传的文件都存储在欧盟境内的基础设施上。这一切都不依赖网站其余部分是如何构建的：无论是 Astro、纯 HTML、Next.js 静态导出，还是 Hugo，不管是什么生成了这段标记，表单标签都一样，部署方式也完全不变。

获取你的端点

  1. 注册并在仪表盘中创建一个表单--无需绑卡。
  2. 复制该表单的专属 URL（形如 https://formhook.app/f/fh_xxxxxxxx）。
  3. 把它粘贴到你现有 <form> 的 action 属性中。
  4. 照常提交并部署。

免费层每月提供 250 次提交额度，对大多数联系表单来说绰绰有余。如果以后需要文件上传或已验证的发信域名，请查看定价页面，了解 Pro 版提供的内容。

一行代码上线可用的表单

欧盟托管，提交记录永久保存，所有套餐均支持推送通知。

免费开始

无需信用卡 · 阅读文档

继续阅读