如何为静态网站创建一个表单

WBOLT_COM 1 月 24, 2024 227 0

如何为静态网站创建一个表单

网站的设计、目的和复杂程度各不相同，但一般分为静态和动态两种。静态网站预先渲染，向所有访问者提供相同的内容。它们结构简单，通常易于管理，加载速度快。另一方面，动态网站使用服务器端编程语言即时生成内容。

静态网站不支持表单等互动元素，因为它们需要服务器端处理功能，如数据存储。但这并不理想：表单是与用户沟通的渠道。它们可以帮助你通过建议或询问收集有价值的反馈，这样你就可以通过定制内容来改善用户体验。

本指南将引导您完成以下步骤：为静态网站创建表单、添加表单处理服务，以及在静态网站托管服务的帮助下部署网站。

选择表单处理服务

表单处理服务是为静态网站收集和处理表单数据的第三方。它们提供处理表单提交所需的服务器端基础设施，在保持静态网站优势的同时增强网站的功能和互动性。

当用户提交表单时，数据会被发送到表单处理服务的端点。然后，服务会对数据进行处理、安全存储，并向相应的接收者发送通知。

表单处理服务有很多。让我们来了解一下最流行的表单处理服务。

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() 函数，在半秒延迟后重置表单，以便允许更多提交。