网站的设计、目的和复杂程度各不相同,但一般分为静态和动态两种。静态网站预先渲染,向所有访问者提供相同的内容。它们结构简单,通常易于管理,加载速度快。另一方面,动态网站使用服务器端编程语言即时生成内容。
静态网站通常不支持直接在网站上处理表单等互动元素,因为这类操作需要服务器来存储和处理数据。但这里有个问题:表单是用户与我们交流的重要桥梁。通过表单,我们可以获取用户的宝贵建议或询问,从而根据这些反馈来优化我们的网站内容,为用户带来更好的体验。不过,静态网站无法直接完成这一任务,所以我们可以通过定制内容来改善用户体验。
选择表单处理服务
表单处理服务是为静态网站收集和处理表单数据的第三方。它们提供处理表单提交所需的服务器端基础设施,在保持静态网站优势的同时增强网站的功能和互动性。
当用户提交表单时,数据会被发送到表单处理服务的端点。然后,服务会对数据进行处理、安全存储,并向适当的接收者发送通知。表单处理服务有很多。让我们来了解一下最流行的表单处理服务。
1. Formspree
Formspree 是一种用户友好的表单处理服务,可简化静态站点中添加表单和管理表单提交的过程。它提供具有基本功能(例如每月 50 份表单提交)的免费版,以及具有更高级功能(包括安全列表和垃圾邮件防护)的付费版。
2. Formbucket
FormBucket 提通过将表单保存到 “桶 “中,为收集和管理表单提交提供了一种便捷的方式,每个 “桶 “都有一个唯一的 URL。你可以通过 Formbucket 用户友好的仪表板页面为表单定义字段和设置验证规则,使其与你的网站品牌相一致。
3. Getform
Getform 是一个表单后端平台,为处理表单提交提供了一种简单而安全的方式。Getform 提供直观的用户界面,用于管理表单提交、电子邮件通知以及与 Slack 和 Google Sheets 等流行服务的集成。
使用 Getform 设置表单处理服务
使用 Getform 等表单处理服务可以大大简化网站上的表单提交管理。当用户提交表单时,Getform 会接管整个过程,无需后台 API 来处理和存储这些提交。
通过这种无缝集成,你可以在专用的消息收件箱中有效地管理所有回复。要开始使用,要对HTML、CSS和JavaScript有基本的了解,并按照以下步骤操作:
- 注册 Getform 帐户。
- 到你的 Getform 帐户仪表盘并单击+ 创建 按钮。
- 在出现的对话框中,确保 选择“表单” 。提供描述性端点名称并选择适当的时区。然后,单击“创建”。
Getform 将生成表单提交端点 URL,必须将其添加到表单元素的 action 属性中。
使用 HTML 和 CSS 创建表单
设置好表单处理服务后,就可以使用 HTML、CSS 和 JavaScript 创建表格了。
1.在终端中,创建一个名为forms的项目文件夹 ,并将当前目录更改为项目目录:mkdir 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>
4.导航至 Getform 面板并复制端点 URL。然后,将此 URL 粘贴到 HTML 代码中表单开头标签内的 action 属性中。
5.最后,在 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.接下来,调用上面的函数,使用点击事件监听器回调启用验证。每次用户点击提交按钮时,该回调都会触发函数。要调用该函数,请在 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() 函数,在半秒延迟后重置表单,以便允许更多提交。
总结
现在,已经成功实施了表单,有无数机会可以对其进行自定义。例如,可以使用 CSS 或你喜欢的预处理器语言进一步设计表单样式,并实施高级验证技术,从而增强表单的设计和功能。
联系我们 |
---|
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
① 电话:020-2206-9892 |
② QQ咨询:1025174874 |
③ 邮件:info@361sale.com |
④ 工作时间:周一至周五,9:30-18:30,节假日休息 |