跳转到内容
FFormhook
← 返回博客

博客

如何为 GitHub Pages 添加联系表单

· 1 分钟阅读

GitHub Pages 只提供静态文件--没有 PHP，没有服务器代码，也没有办法接收表单的 POST 请求。因此联系表单需要一个外部端点来发送数据。以下是三种真正可行的方案，以及那个只需一分钟的版本。

方案一：使用表单后端（推荐）

把表单的 action 指向一个托管的表单端点：

<form action="https://formhook.app/f/fh_your-key" method="POST">
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Send</button>
</form>

提交、推送，完成。提交内容会出现在仪表盘中，并通过推送通知提醒您的手机。垃圾内容会被 honeypot 和速率限制过滤掉，根本不会到达您这里。这对纯 HTML 仓库和 Jekyll 站点（GitHub Pages 的原生生成器）都同样适用 -- 如果需要带主题的 include，请参阅Jekyll 指南，或参阅纯 HTML 指南。

优点：只需一个属性，无需 JavaScript，垃圾内容有人处理，提交会被存储。
缺点：这是一个第三方服务 -- 所以要查看你选择的服务的免费层限制和数据保留政策。Formhook 的免费层会永久保留提交内容。

方案二：mailto: 链接

<a href="mailto:you@example.com">Email me</a>

诚实但效果不佳：它依赖访问者配备了已配置好的邮件客户端（在桌面端这一点已越来越靠不住），会把你的邮箱地址暴露给爬虫，没有任何防垃圾保护，也无法告诉你任何关于流失率的信息。对个人爱好项目的 README 页面来说没问题；但对那些咨询就意味着钱的场景来说代价不小。（关于这个取舍的更多讨论见 mailto 与联系表单对比。）

方案三：在别处使用无服务器函数

你可以让站点继续留在 GitHub Pages 上，用 Cloudflare Worker 之类的东西来接收 POST 请求。这确实可行--但现在你得自己编写并维护接收端：校验、垃圾内容过滤、存储、邮件投递，以及 CORS。你相当于把 GitHub Pages 本来让你免掉的那个后端又重新造了一遍。如果你乐在其中，这是合理的选择；如果不喜欢，就没必要。

AJAX 升级方案（可选）

纯 HTML 表单在提交时会跳转离开当前页面。要想留在页面上：

<script>
document.querySelector("form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch(e.target.action, {
    method: "POST",
    body: new FormData(e.target),
    headers: { Accept: "application/json" },
  });
  e.target.outerHTML = res.ok
    ? "<p>Thanks - message sent.</p>"
    : "<p>Something went wrong. Please email us directly.</p>";
});
</script>

不需要构建步骤，也不需要任何依赖--在一个原始的 GitHub Pages 仓库中就能直接工作。

自定义域名说明

如果你的 Pages 站点跑在自定义域名上，请确保表单服务的按表单设置（比如 CORS 允许列表）里包含了这个域名，而不只是 username.github.io。在 Formhook 里，这只是表单设置里的一个字段。

整件事就是这样：GitHub Pages 负责你的站点，表单端点负责它唯一做不到的那件事。免费开始，你的下一次 git push 还没跑完，表单就已经上线了。

一行代码上线可用的表单

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

免费开始

无需信用卡 · 阅读文档

继续阅读