网站的设计、目的和复杂程度各不相同，但一般分为静态和动态两种。静态网站预先渲染，向所有访问者提供相同的内容。它们结构简单，通常易于管理，加载速度快。另一方面，动态网站使用服务器端编程语言即时生成内容。
静态网站通常不支持直接在网站上处理表单等互动元素，因为这类操作需要服务器来存储和处理数据。但这里有个问题：表单是用户与我们交流的重要桥梁。通过表单，我们可以获取用户的宝贵建议或询问，从而根据这些反馈来优化我们的网站内容，为用户带来更好的体验。不过，静态网站无法直接完成这一任务，所以我们可以通过定制内容来改善用户体验。
![图片[1]-如何在静态网站中实现表单-光子波动网 | 专业WordPress修复服务，全球范围，快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024050906544759.jpg)
选择表单处理服务
表单处理服务是为静态网站收集和处理表单数据的第三方。它们提供处理表单提交所需的服务器端基础设施，在保持静态网站优势的同时增强网站的功能和互动性。
当用户提交表单时，数据会被发送到表单处理服务的端点。然后，服务会对数据进行处理、安全存储，并向适当的接收者发送通知。表单处理服务有很多。让我们来了解一下最流行的表单处理服务。
1. Formspree
Formspree 是一种用户友好的表单处理服务，可简化静态站点中添加表单和管理表单提交的过程。它提供具有基本功能（例如每月 50 份表单提交）的免费版，以及具有更高级功能（包括安全列表和垃圾邮件防护）的付费版。
2. Formbucket
FormBucket 提通过将表单保存到 “桶 “中，为收集和管理表单提交提供了一种便捷的方式，每个 “桶 “都有一个唯一的 URL。你可以通过 Formbucket 用户友好的仪表板页面为表单定义字段和设置验证规则，使其与你的网站品牌相一致。
3. Getform
Getform 是一个表单后端平台，为处理表单提交提供了一种简单而安全的方式。Getform 提供直观的用户界面，用于管理表单提交、电子邮件通知以及与 Slack 和 Google Sheets 等流行服务的集成。
![图片[2]-如何在静态网站中实现表单-光子波动网 | 专业WordPress修复服务，全球范围，快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024050906561269.jpg)
使用 Getform 设置表单处理服务
使用 Getform 等表单处理服务可以大大简化网站上的表单提交管理。当用户提交表单时，Getform 会接管整个过程，无需后台 API 来处理和存储这些提交。
通过这种无缝集成，你可以在专用的消息收件箱中有效地管理所有回复。要开始使用，要对HTML,CSSrespond in singingJavaScript有基本的了解，并按照以下步骤操作：
- enrollment Getform 帐户。
- 到你的 Getform 帐户仪表盘并单击+ 创建 Button.
- 在出现的对话框中，确保 选择“表单” 。提供描述性端点名称并选择适当的时区。然后，单击"Create"The
![图片[3]-如何在静态网站中实现表单-光子波动网 | 专业WordPress修复服务，全球范围，快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024050906365895.png)
Getform 将生成表单提交端点 URL，必须将其添加到表单元素的 action 属性中。
使用 HTML 和 CSS 创建表单
设置好表单处理服务后，就可以使用 HTML、CSS 和 JavaScript 创建表格了。
1.在终端中，创建一个名为forms的项目文件夹 ，并将当前目录更改为项目目录：mkdir forms
mkdir forms
cd forms2.添加以下项目文件：
#unix-based systems
touch index.html styles.css script.js
#windows
echo. > index.html & echo. > styles.css & echo. > script.js3.接下来，创建一个 HTML 表单。在本指南中，下面提供的代码将帮助你创建一个表单，其中包括姓名和电子邮件地址输入框、信息文本区和提交按钮。可以将此代码添加到你的 index.html Documentation:
<!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="/en/Getform%20URL/" method="POST" data-trp-original-action="<Getform URL>">
<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>
<input type="hidden" name="trp-form-language" value="en"/></form>
</div>
<script src="script.js"></script>
</body>
</html>4.导航至 Getform 面板并复制端点 URL。然后，将此 URL 粘贴到 HTML 代码中表单开头标签内的 action 属性中。
5.最后，在 styles.css 文件中添加 CSS 样式，自定义表单的设计和外观。
![图片[4]-如何在静态网站中实现表单-光子波动网 | 专业WordPress修复服务，全球范围，快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024050906571032.jpg)
使用 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，表单提交。
![图片[5]-如何在静态网站中实现表单-光子波动网 | 专业WordPress修复服务，全球范围，快速响应](https://www.361sale.com/wp-content/uploads/2024/05/2024050906583597.jpg)
还可以添加其他验证规则，以确保提交数据的准确性和完整性。例如，可以验证用户输入的长度，或限制用户在信息中提交某些字符，从而帮助防止潜在的安全漏洞（如注入攻击）。
2.接下来，调用上面的函数，使用点击事件监听器回调启用验证。每次用户点击submit (a report etc)按钮时，该回调都会触发函数。要调用该函数，请在 script.js Add the following code to the file:
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() 函数，在半秒延迟后重置表单，以便允许更多提交。
summarize
现在，已经成功实施了表单，有无数机会可以对其进行自定义。例如，可以使用 CSS 或你喜欢的预处理器语言进一步设计表单样式，并实施高级验证技术，从而增强表单的设计和功能。
Link to this article:https://www.361sale.com/en/9538The article is copyrighted and must be reproduced with attribution.
![表情[xiaojiujie]-光子波动网 | 专业WordPress修复服务，全球范围，快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/xiaojiujie.gif)
No comments