网站的设计、目的和复杂程度各不相同，但一般分为静态和动态两种。静态网站预先渲染，向所有访问者提供相同的内容。它们结构简单，通常易于管理，加载速度快。另一方面，动态网站使用服务器端编程语言即时生成内容。
静态网站不支持表单等互动元素，因为它们需要服务器端处理功能，如数据存储。但这并不理想：表单是与用户沟通的渠道。它们可以帮助你通过建议或询问收集有价值的反馈，这样你就可以通过定制内容来改善用户体验。
本指南将引导您完成以下步骤：为静态网站创建表单、添加表单处理服务，以及在静态网站托管服务的帮助下部署网站。
选择表单处理服务
表单处理服务是为静态网站收集和处理表单数据的第三方。它们提供处理表单提交所需的服务器端基础设施，在保持静态网站优势的同时增强网站的功能和互动性。
当用户提交表单时，数据会被发送到表单处理服务的端点。然后，服务会对数据进行处理、安全存储，并向相应的接收者发送通知。
表单处理服务有很多。让我们来了解一下最流行的表单处理服务。
1. Formspree
Formspree 是一款用户友好型表单处理服务，可简化静态网站中添加表单和管理表单提交的工作。它提供具有基本功能（如每月 50 次表单提交）的免费计划，以及具有更高级功能（包括安全列表和垃圾邮件保护）的付费计划。
2. Formbucket
FormBucket 通过将表单保存到 “bucket” 中，为收集和管理表单提交提供了一种便捷的方式，每个 “bucket” 都有一个唯一的 URL。你可以通过 Formbucket 用户友好的仪表板页面为表单定义字段和设置验证规则，使其与你的网站品牌相一致。
3. Getform
Getform 是一个表单后端平台，为处理表单提交提供了一种简单而安全的方式。Getform 提供直观的用户界面，用于管理表单提交、电子邮件通知以及与 Slack 和 Google Sheets 等流行服务的集成。
比较 Formspree、Formbucket 和 Getform 服务
为了便于比较，下面的表格对上述三种服务及其主要功能进行了比较：
| 特征 | Formspree | Formbucket | Getform |
| 价格 | 免费计划和根据使用量和存储量定价的付费计划 | 14 天免费试用，付费计划根据使用量和存储量定价 | 免费计划和根据使用量和存储量定价的付费计划 |
| 包括提交的表格数量 | 视所选定价计划而定 | 视所选定价计划而定 | 视所选定价计划而定 |
| 自定义品牌 | Yes | Yes | Yes |
| 垃圾邮件防护 | Yes | Yes | Yes |
| 文件上传 | Yes, 需通过付费计划 | No | Yes |
| 第三方集成 | Zapier、webhooks、Google Sheets、MailChimp 等 | Webhooks | Zapier、Slack、Google Sheets、Airtable、Mailchimp、Twilio 等等 |
在选择表单处理服务时，您必须考虑整合的难易程度、所需的特性和功能、价格以及与托管平台的兼容性。评估表单的具体要求，比较每种表单处理服务，找到最适合您需求的服务。
使用 Getform 设置表单处理服务
使用 Getform 等表单处理服务可以大大简化网站上的表单提交管理。当用户提交表单时，Getform 会接管整个过程，无需使用后台 API 来处理和存储这些提交。
通过这种无缝集成，您可以在专用的消息收件箱中有效地管理所有回复。要开始使用，请确保您对 HTML、CSS 和 JavaScript 有基本的了解，并按照以下步骤操作：
1. 注册 Getform 账户。
2. 导航至 Getform 帐户仪表板，点击 + Create 按钮。
3. 在出现的对话框中，确保选择了 Form。提供一个描述性的端点名称，并选择适当的时区。然后点击 Create。
Getform 的表单提交端点 URL 创建对话框
Getform 将生成表单提交端点 URL，您必须将其添加到表单元素的 action 属性中。
使用 HTML 和 CSS 创建表格
设置好表单处理服务后，就可以使用 HTML、CSS 和 JavaScript 创建表格了。
1. 在终端中创建名为 forms 的项目文件夹，并将当前目录更改为项目目录：
mkdir forms cd forms
2. 添加以下项目文件：
#unix-based systems touch index.html styles.css script.js #windows echo. > index.html & echo. > styles.css & echo. > script.js
3. 接下来，创建一个 HTML 表单。在本指南中，下面提供的代码将帮助你创建一个表单，其中包括姓名和电子邮件地址输入框、信息文本区和提交按钮。您可以将此代码添加到您的 index.html 文件中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contact Form</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1 class="form-title">Contact Us</h1> <form class="contact-form" name="contactForm" action="<Getform URL>" method="POST"> <div class="input-group"> <label for="name" class="form-label">Name:</label> <input type="text" id="name" name="name" class="form-input" required> <label for="email" class="form-label">Email:</label> <input type="email" id="email" name="email" class="form-input" required> <label for="message" class="form-label">Message:</label> <textarea id="message" name="message" class="form-textarea" rows="4" required> </textarea> </div> <div class="form-control"> <button type="submit" id="submitBtn" class="form-submit">Submit</button> </div> </form> </div> <script src="script.js"></script> </body> </html>
3. 导航至 Getform 面板并复制端点 URL。然后，将此 URL 粘贴到 HTML 代码中表单开头标记内的 action 属性中。
4. 最后，在 styles.css 文件中添加 CSS 样式，自定义表单的设计和外观。
使用 JavaScript 实施数据验证
在处理或存储用户输入之前，数据验证会检查用户输入是否符合特定条件和验证规则。
执行数据验证有助于避免提交错误或恶意数据，为用户提供输入错误的即时反馈，并确保只有有效数据才能得到进一步处理。它在维护数据完整性和准确性方面起着至关重要的作用。
实现数据验证有几种方法，包括使用 JavaScript 执行客户端验证、服务器端验证或两种方法的结合。在本指南中，让我们为联系表单实施客户端验证，以确保用户不会提交空字段，并确保所提供的电子邮件格式正确。
1. 首先，在 script.js 文件中添加以下代码，定义验证函数：
function validateForm() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
if (name.trim() === '' || message.trim() === '') {
alert('Please fill out all fields.');
return false;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert('Please enter a valid email address.');
return false;
}
return true;
}
validateForm() 函数有两个作用：首先，它检查姓名和信息字段是否为空，然后使用正则表达式验证电子邮件字段，并检查电子邮件地址是否为有效格式。
如果字段为空或电子邮件格式无效，函数将触发并显示一条警报信息。反之，如果所有表单字段都通过了这些验证检查，则函数返回 true，表单提交。
您还可以添加其他验证规则，以确保提交数据的准确性和完整性。例如，您可以验证用户输入的长度，或限制用户在信息中提交某些字符，从而帮助防止潜在的安全漏洞（如注入攻击）。
2. 接下来，调用上面的函数，使用click 事件监听器回调启用验证。每次用户点击 submit 按钮时，该回调都会触发函数。要调用该函数，请在 script.js 文件中添加以下代码：
document.addEventListener('DOMContentLoaded', function () {
const submitButton = document.getElementById('submitBtn');
if (submitButton) {
submitButton.addEventListener('click', function (event) {
event.preventDefault();
if (validateForm()) {
document.forms['contactForm'].submit();
resetFormAfterSubmission();
}
return false;
});
}
});
function resetFormAfterSubmission() {
setTimeout(function () {
const contactForm = document.forms['contactForm'];
contactForm.reset();
}, 500);
}
请注意，代码中包含 preventDefault() 函数，用于阻止默认表单提交操作。这样，您就可以在向 Getform 提交信息之前验证表单。
此外，在成功验证和提交后，会触发 resetFormAfterSubmission() 函数，在半秒延迟后重置表单，以便允许更多提交。
部署您的静态网站至服务器
以Kinsta为例，Kinsta 提供托管解决方案，允许您托管不同的网站项目和数据库。使用其免费计划，你可以直接从 GitHub、GitLab 或 Bitbucket 托管多达 100 个静态网站。
要在 Kinsta 上部署静态网站，首先要将代码推送到首选的 Git 提供商。然后，按照以下步骤操作：
- 登录 MyKinsta 面板。
- 在仪表板上单击 “Add Service” 下拉菜单并选择 “Static Site“。
- 如果您是第一次使用 Kinsta 托管项目，请选择并启用您偏好的 Git 服务提供商。
- 选择项目仓库。
- 选择要部署的分支，并提供唯一的站点名称。
- 通过添加 period 指定包含 HTML 文件和资产的发布目录的根路径，以便部署。
- 最后，单击 Create site。
几秒钟内，MyKinsta 就会部署您的网站。
注：不同服务器提供商所提供的静态网站部署方式不尽相同，这里仅供参考。
要将表单无缝集成到现有网站中，请将表单的 HTML 直接复制并粘贴到网站的所需部分。确保包含相关的 CSS 属性和 JavaScript 代码，以确保样式和功能的一致性。
或者，由于你已经单独部署了表单，你可以向用户提供 URL（超链接或按钮），让他们点击访问表单。
要测试实时网站的功能，请单击提供的网站 URL。键入所需的表单输入，确保表单按预期运行。确认表单验证了用户输入，在适当的时候显示错误提示，并成功提交有效数据供进一步处理。
提交表单后，Getform 会将您重定向到确认或感谢页面，说明提交成功。
Getform 的表单提交确认页面
要查看表单回复，请导航到您的 Getform 面板，然后在提供的消息收件箱中查看提交情况。
小结
现在，您已经成功实施了表单，有无数机会可以对其进行自定义。例如，您可以使用 CSS 或您喜欢的预处理器语言进一步设计表单样式，并实施高级验证技术，从而增强表单的设计和功能。
评论留言