上周，我向大家展示了如何使用 Local by Flywheel、Simply Static、GitHub 和 Cloudflare Pages 启动一个闪电般快速的静态 WordPress 网站。在该教程的开头，我提到了这种方法的一些局限性。其中之一就是添加联系表单的能力。
这是静态网站的一个显著缺点，也是首次转向静态网站的用户希望能够实现的功能之一。好吧，你可以叫我 WordPress 功能精灵，因为我将在本分步指南中实现你的愿望。
请坚持看完，我保证你的静态 WordPress 网站将拥有完全可用的联系表单，你可以随意放置。如果这对你来说听起来不错，那就让我们开始吧。
目录
如何为静态 WordPress 网站添加联系表单 🧾
在普通的 WordPress 网站上，当有人提交表单时，PHP 会拦截提交请求，处理数据，将数据存储到数据库中和/或通过你的服务器发送邮件。你的静态网站没有这些能力——它只是向浏览器提供文件。
这意味着我们需要绕过表单工作的"传统"方式。
我将向你展示如何使用 Formspree 来实现这一点，它可以使用任何电子邮件地址（例如 Yahoo、Gmail），除了复制一些 HTML 代码并进行轻微修改外，几乎不需要任何技术设置。Formspree 还有一个慷慨的免费计划，每月可提供 50 次提交，非常适合小型博客或中小流量企业。
为了让你了解涉及的内容，主要步骤如下：
- 注册 Formspree 账户。
- 创建你的第一个表单。
- 将表单添加到静态网站的页面或文章中。
- 使用一些 CSS 自定义表单。
- 将静态网站文件重新导出到你的硬盘。
- 部署包含表单的网站。
注册 Formspree 账户并创建表单
首先，前往 Formspree 网站 并注册一个新的（免费）账户。
确认邮箱并完成注册流程后，进入 Formspree 仪表板，点击 Add New → New Form：
在弹窗中，为你的表单命名。在这个示例中，我将其命名为 Static Site Contact Form。然后填写你希望网站访客提交表单后收到邮件的电子邮件地址：
点击 Create Form 按钮后，你将看到一个显示 Form Endpoint 的屏幕：
那里会有代码示例和其他选项。现在忽略所有内容，但保持这个标签页在浏览器中打开。我们稍后会回到这里。
将 Formspree 表单添加到你的静态网站
下一步是将表单添加到你的静态网站。为此，你需要返回到本地 WordPress 安装。如果你按照我的教程启动静态网站，这意味着回到 Local by Flywheel 并点击 WP Admin 按钮：
转到您想要添加联系表单的页面或文章，然后执行以下操作：
- 找到您希望表单在页面上的位置。
- 在区块编辑器中点击 +，然后在区块搜索窗口中输入 HTML。
- 当出现自定义 HTML 区块时，点击它以插入到页面中。
<form
action="https://formspree.io/f/REPLACE_WITH_YOUR_ENDPOINT"
method="POST"
>
<label>
Name:
<input type="text" name="name">
</label>
<label>
Email:
<input type="email" name="email">
</label>
<label>
Message:
<textarea name="message"></textarea>
</label>
<!-- your other form fields go here -->
<button type="submit">Submit</button>
</form>Code language: HTML, XML (xml)
<style>
#contact-form {
max-width: 600px;
margin: 0 auto;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background-color: #0066cc;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0052a3;
}
</style>Code language: HTML, XML (xml)
CSS 将为您的表单提供美观的外观。如果您的网站有特定的配色方案，您也可以调整代码以使其匹配。
即使您没有编程背景，CSS 也相当直观，所以这并不难做到。例如，如果您想调整按钮的颜色，您可以修改代码的以下部分：
button {
background-color: #0066cc;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}Code language: CSS (css)
如果您不确定网站使用的具体颜色，可以执行以下操作：
- 对网站的某个包含您希望为表单复制的颜色的部分进行截图。
- 将该截图上传到免费工具（如 image color picker），它会为您识别颜色的六位十六进制代码（例如，当前版本背景颜色字段中的
#0066cc）。 - 复制它们并将其替换到代码中进行修改。您也可以用十六进制代码替换写有颜色名称的字段中的颜色（例如，将
white改为#faf0e6）。
完成后，预览表单在您网站前端的外观：
如果满意，请保存您的工作！
⚠️ 建议：虽然不是必需的，但我建议为您的联系表单启用 reCAPTCHA。它有助于防止垃圾邮件提交，Formspree 使启用它变得非常容易，不利用它就太可惜了。
回到复制表单端点的屏幕。端点在菜单的 Integration（集成） 部分。点击 Settings（设置），然后向下滚动直到看到 CAPTCHA。将其打开就可以使用了。
下一步是将包含表单的更新页面/文章推送到您的实时站点。
部署添加了联系表单的页面或文章
假设您按照我的教程设置了静态站点，这意味着您需要使用 Simply Static 插件重新生成静态文件：
然后执行以下操作：
在 Mac 上： 在 Windows 上：
打开 Terminal（终端） 并导航到包含 Python 代码片段的目录（文件夹）。例如：
cd ~/Desktop/website-toolsCode language: JavaScript (javascript)
进入文件夹后，运行脚本：
./update-website.sh
使用 文件资源管理器 导航到包含 Python 代码片段的文件夹。如果您不确定，可以搜索它 – update-website.bat。这是假设您按照我的教程中的建议以该名称保存了文件。如果没有，那么您需要仔细查找，甚至可以尝试搜索 .bat，这将显示硬盘上的所有 .bat 文件。找到文件后，双击即可执行。
✋🤔 如果您感到困惑或需要更多背景信息，请转到静态 WordPress 站点教程，然后再回到这里。
执行脚本后，等待几分钟，然后检查您的实时站点以确保表单已正确添加。然后测试您的表单以确保它能正常工作。如果一切顺利，您将收到确认消息：
还要检查您的收件箱，以确保发送端正常工作：
如果一切看起来都很好，那么您就完成了！
有志者事竟成 💪🏻
一开始无法在静态 WordPress 站点上默认添加联系表单可能会令人沮丧，但幸运的是有一些解决方法可以完成这项工作。对于简单的博客或中小型企业，使用免费的 Formspree 方案可以说是解决这个常见静态站点问题的最佳选择。
对于更复杂的需求，另一种方法是结合使用 Cloudflare Workers 和 Zoho Mail 等邮件托管提供商。我没有在这里介绍这种方法，因为它的难度要大得多，但如果您感兴趣，请在下面留言告诉我。也许我会更新本教程或写另一篇专门介绍这种方法的文章。
💡 您可能还有兴趣阅读我的后续指南，了解如何为静态 WordPress 站点添加搜索功能（也是免费的）。
您在静态站点上实现联系表单了吗？在下面分享您的经验。
…
别忘了参加我们关于加速 WordPress 站点的速成课程。了解更多详情：
如何加速您的 WordPress 站点
通过一些简单的修复，您可以减少 50-80% 的加载时间 🚀
Newsletter Form – Sidebar
名字 *
您的邮箱 *
立即订阅！
在上方输入您的电子邮件，即表示您订阅了我们的每周通讯。您可以随时更改您的决定。我们尊重您的收件箱和隐私。
