在 GitHub Pages 托管的静态页面上发送电子邮件

Question

我使用GitHub Pages托管了一个单独的静态HTML页面。我需要在我的静态页面中添加“发送反馈”功能，以便用户可以输入姓名、电子邮件、评论并点击“提交”按钮。这将向我的电子邮件地址发送带有内容的电子邮件。这种设置是否适用于GitHub上的静态HTML页面？GitHub Pages是否支持此邮寄功能？

另外，我也想知道基于底层Web服务器，GitHub Pages服务器可以支持哪些功能/插件等？

- A9S6

---

可能唯一的方法是将其发布到另一个托管文件（PHP或其他技术在另一台服务器上）。您可以在Google表单或类似工具中查找。 - Alexandre Lavoie

Answer 1

借助Formspree可以用这种方式完成。

Formspree

http://formspree.io/

HTML表单只需将您的表单发送到我们的URL，我们将其转发到您的电子邮件。无需PHP、JavaScript或注册，非常适合静态网站！您只需要打开文本编辑器，然后粘贴以下代码：

<form action="http://formspree.io/[e-mail]"><input type="email" name="_replyto"><textarea   name="body"></textarea><input type="submit" value="Send"></form>

好的，你的表单现在已经可以工作了！它将把表单发布到外部域名formspree.io，并向您发送带有所有表单内容的电子邮件。没有数据库。您甚至可以在邮箱中点击回复来继续与访问者交流。

这个工具是由Brace的人们构建的，然后由Assembly开源和托管。

设置它很容易并且免费。以下是如何操作：

您甚至无需注册。

1. 设置HTML表单

更改您的表单的操作属性为此，并用您自己的电子邮件替换它。

http://formspree.io/[e-mail]

2. 提交表单并确认您的电子邮件地址

前往您的网站并提交表单一次。这将向您发送一封电子邮件，要求确认您的电子邮件地址，以便没有人可以从随机网站开始向您发送垃圾邮件。

3. 全部完成，接收电子邮件

从此以后，当某人提交该表单时，我们将把数据作为电子邮件转发给您。

- Parvez Hassan

---

问题是：如果您使用AJAX Post请求方法而不仅仅使用表单标记上的操作属性，会发生什么？这样做是否会发送电子邮件而不将用户带到Formspree的感谢页面？ - Gregory Desrosiers

虽然我没有尝试过，但有一种方法可以做到。您可以通过AJAX使用Formspree。这甚至可以跨域工作。诀窍是将Accept标头设置为application/json。如果您正在使用jQuery，则可以像这样完成：$.ajax({     url: "//formspree.io/[e-mail]",      method: "POST",     data: {message: "hello!"},     dataType: "json" }); - Parvez Hassan

提醒一下：看起来 AJAX 方法只能用于付费黄金客户。 - rideron89

AJAX再次免费支持。请参阅我在这里的详细更新：https://dev59.com/wWAf5IYBdhLWcg3wuklk#58721654 - Cole

这不会暴露你的电子邮件地址给垃圾邮件发送者吗？ - kojow7

formspree.io现在（4个月前更新）鼓励您在注册并设置电子邮件后使用唯一的URL。通过这种方式，您可以在“操作”表单中使用由您项目的formspree.io设置提供的唯一令牌替换您的电子邮件。详情请参见：https://help.formspree.io/hc/en-us/articles/360056076314 - dimi_fn

Answer 2

无法在GitHub页面上本地完成此操作。您需要使用某种表单提交工具，例如 some、kind、of 或 free-contact-form-services。

GitHub的pages文档描述了您可以和不可以在托管上做什么，并支持哪些插件。

- Moshe Katz

Answer 3

Github pages不支持php以及其他你在这方面需要的后端技术。 一个简单的方法是创建与你的html表单对应的Google表格，然后将提交操作用于它。虽然不带重定向有些麻烦，但仍可实现。

以下是我是如何做到的： https://github.com/toperkin/staticFormEmails/blob/master/README.md

- Tony

---

朋友，那就叫做跳出固有思维……不过安全方面怎么办呢？这些只是普通的HTML请求。 - Sam

很棒的解决方案！易于实现，并且可以直接分析答案。 - SupaMario

太棒了！它展示了如何在没有服务器的情况下完成此操作的示例。 - Daniel Aron Goldenberg

很棒的解决方案！对于那些在2022年4月之后查看帖子的人仍然有效。 - Yaakov Bressler

Answer 4

由于GitHub Pages仅提供静态网站托管，因此不支持运行服务器端脚本，也不提供此类功能。它可以提供HTML文件和资源，但无法处理服务器端脚本。

几个月前，我遇到了同样的问题并进行了一些研究。正如其他人所提到的那样，需要使用外部表单处理程序。幸运的是，有很多这样的服务：

• 99inbound
• Basin
• elFormo
• enformed.io
• formspree.io
• mailthis.to
• Pageclip
• SimpleForm
• Un-Static

我根据它们的网站比较了它们的特点和限制，然后选择了试用Basin，最终我坚持使用它。它提供垃圾邮件过滤器、验证码验证、Zapier集成；在表单中隐藏您的电子邮件地址，并且可以向提交表单的人发送电子邮件收据--所有这些都是免费的。它在我的网站（托管在GitHub Pages上）上的联系表单后面非常完美地工作。

编辑：当我最初撰写此答案时，它提供了无限次提交，但现在需要付费订阅才能获得无限次提交和重定向URL。 免费层现在包括每月100次提交。

它非常容易设置，管理员界面显示HTML代码片段可供复制粘贴。 您的表单将类似于以下内容：

<form accept-charset="UTF-8" action="https://usebasin.com/f/123456xabcdef" enctype="multipart/form-data" method="POST">
  <input type="email" id="email" name="email" required>
  <textarea rows="4" cols="50" name="comment" required></textarea>
  <button type="submit">Submit</button>
</form>

前一段时间我写了一篇有关使用Basin进行测试的博客文章，其中提供了更详细的信息。

- juzraai

Answer 5

我是Formspree创始人。

在过去的几年里，Formspree有了一些变化。现在它免费支持AJAX、垃圾邮件过滤、可选验证码验证以及多个内置插件，包括Zapier。

开始使用的最佳方式是在主页上创建一个表单 (https://formspree.io)，或者转到 https://formspree.io/create。旧的方式是直接将您的电子邮件放在URL中，但这会将您的电子邮件暴露在HTML中，并且需要激活步骤。在Formspree中创建表单可以避免表单激活步骤，并隐藏您的电子邮件地址。

https://help.formspree.io/ 上有关于Formspree功能和常见问题的最新信息。该产品每周都在改进，欢迎来看看！

- Cole

---

使用Formspree设置的表单是否比从电子邮件客户端发送的常规电子邮件更容易被过滤为垃圾邮件？ Formspree是否设置了所有可用的安全标头，如SPF和DKIM等内容？（您可以看出我对电子邮件安全协议一无所知） - V. Rubinetti

@V.Rubinetti 哎呀，错过了这个。希望你在过去的两年里一切都好。是的，Formspree设置了DKIM和SPF头，并且我们努力确保我们的电子邮件通知具有出色的交付统计数据。 :D - Cole

Formspree不再支持电子邮件URL，这在很大程度上是由于浏览器对“referer”字段的更改。 - Cole

Answer 6

可以的，网上有许多应用程序可以让你只需几行javascript代码就能从静态HTML发送电子邮件。其中一些应用程序包括mandrillapp、sendgrid等，更好的是它们全部免费使用！

- jandresrodriguez

---

真的会用Mandrill做这个吗？有JavaScript API或类似的东西吗？ - Costa Michailidis

Answer 7

这个解决方案涉及在虚拟服务器上自托管后端部分，不要害怕一点后端。这里是我的静态GitLab页面，没有任何第三方表单提供者。

我创建了一个开源项目，使您能够将联系表单包含到您的GitHub、GitLab或任何其他静态托管的网站中。我发现答案是，您不能自己做，而是使用formspree并不是一个好答案。虽然目前不能在GitHub和GitLab页面上托管后端服务，但可以使用跨域资源共享将请求转发到自己的后端服务器。

我的解决方案的前端部分在GitLab 这里可用。它使用jQuery Ajax通过CORS发送HTTP post请求来传输数据到后端。PHP后端代码在这里。由于大多数人不想费心安装服务器，我包括了一个ansible playbook自动完成所有工作。

功能包括：

• 谷歌验证码
• 使用jQuery Validation进行表单验证
• 多文件上传

如果你愿意花30分钟了解如何配置和部署ansible playbooks，那么你可以使用我的解决方案。云服务提供商的价格非常有竞争力。(OVH vps starters从3.50欧元/月起，netcup低于3欧元/月)。你可以通过最小的VPS处理数百个同时提交的表单，以及任意数量的GitHub/GitLab页面。在formspree上会产生多少费用呢？

这个解决方案的代码是开源的，并托管在GitLab上，任何人都可以改进或修复任何安全问题。因为我认为对于基本需求软件（例如联系表单）收费很糟糕，所以它将保持开源。永远。

- Adam

Answer 8

很遗憾，你无法通过Github页面进行操作。你可以通过一个提交工具来实现。

我在Medium.com上找到了一篇文章。在文章中，作者提到了http://formspree.io/作为一个提交工具。作者清楚地列出了步骤。我认为这个链接对你有帮助。

- Sabesan

Answer 9

不，任何您要建立的静态网站都不支持此功能。但是有很多服务可以帮助您完成这项任务。现在您只需要在您的网站中有一个“静态表单”，随着时间的推移，您会想做更多的其他事情，例如：

• 了解用户在您的网站上正在做什么
• 给他们发电子邮件优惠
• 增加互动等等。

我正在尝试一个名为 Formester.com的工具，它以实惠的价格帮助您完成所有这些操作。

- aks

Answer 10

我为这样的事情建立了https://www.formbackend.com。你需要做的唯一的事情就是在网站上创建一个表单后端，并将唯一的URL用作<form action="[FORMBACKEND_UNIQUE_URL]">中的action。

您添加到表单中的字段将被提交到我们的后端，您可以在那里在线查看它们 - 或者您可以设置它，以便每当有人提交您的表单时，您会收到一封电子邮件！ :)

- Jesper