当前位置：首页 > 编程语言 > 正文内容

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

a811625532年前 (2024-01-24)编程语言18

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

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

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

选择表单处理服务

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

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

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

1. Formspree

是一款用户友好型表单处理服务，可简化静态网站中添加表单和管理表单提交的工作。它提供具有基本功能（如每月 50 次表单提交）的免费计划，以及具有更高级功能（包括安全列表和垃圾邮件保护）的付费计划。

2. Formbucket

通过将表单保存到 “bucket” 中，为收集和管理表单提交提供了一种便捷的方式，每个 “bucket” 都有一个唯一的 URL。你可以通过 Formbucket 用户友好的仪表板页面为表单定义字段和设置验证规则，使其与你的网站品牌相一致。

3. 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 来处理和存储这些提交。

通过这种无缝集成，您可以在专用的消息收件箱中有效地管理所有回复。要开始使用，请确保您对 、 和 有基本的了解，并按照以下步骤操作：

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="2345HAOfa84f98ba2433c87 container">
<h1 class="2345HAOcf2fb16b22435cf6 form-title">Contact Us</h1>
<form class="2345HAOb16b22435cf6ad98 contact-form" name="contactForm" action="<Getform URL>" method="POST">
<div class="2345HAO22435cf6ad9861e3 input-group">
<label for="name" class="2345HAO5cf6ad9861e37651 form-label">Name:</label>
<input type="text" id="name" name="name" class="2345HAOad9861e3765132f2 form-input" required>
<label for="email" class="2345HAO61e3765132f2f0e0 form-label">Email:</label>
<input type="email" id="email" name="email" class="2345HAO765132f2f0e0d474 form-input" required>
<label for="message" class="2345HAO32f2f0e0d474032a form-label">Message:</label>
<textarea id="message" name="message" class="2345HAOf0e0d474032a9554 form-textarea" rows="4" required>
</textarea>
</div>
<div class="2345HAOd474032a9554a4e6 form-control">
<button type="submit" id="submitBtn" class="2345HAO032a9554a4e680a1 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 提供商。然后，按照以下步骤操作：

  1. MyKinsta 面板。
  2. 在仪表板上单击 “Add Service” 下拉菜单并选择 “Static Site“。
  3. 如果您是之一次使用 Kinsta 托管项目，请选择并启用您偏好的 Git 服务提供商。
  4. 选择项目仓库。
  5. 选择要部署的分支，并提供唯一的站点名称。
  6. 通过添加 period 指定包含 HTML 文件和资产的发布目录的根路径，以便部署。
  7. 最后，单击 Create site。

几秒钟内，MyKinsta 就会部署您的网站。

注：不同服务器提供商所提供的静态网站部署方式不尽相同，这里仅供参考。

要将表单无缝集成到现有网站中，请将表单的 HTML 直接复制并粘贴到网站的所需部分。确保包含相关的 CSS 属性和 JavaScript 代码，以确保样式和功能的一致性。

或者，由于你已经单独部署了表单，你可以向用户提供 URL（超链接或按钮），让他们点击访问表单。

要测试实时网站的功能，请单击提供的网站 。键入所需的表单输入，确保表单按预期运行。确认表单验证了用户输入，在适当的时候显示错误提示，并成功提交有效数据供进一步处理。

提交表单后，Getform 会将您重定向到确认或感谢页面，说明提交成功。

Getform 的表单提交确认页面

要查看表单回复，请导航到您的 Getform 面板，然后在提供的消息收件箱中查看提交情况。

小结

现在，您已经成功实施了表单，有无数机会可以对其进行自定义。例如，您可以使用 CSS 或您喜欢的预处理器语言进一步设计表单样式，并实施高级验证技术，从而增强表单的设计和功能。

扫描二维码推送至手机访问。

版权声明：本文由2345好导航站长资讯发布，如需转载请注明出处。

本文链接：http://2345hao.cn/blog/index.php/post/8180.html

分享给朋友：
返回列表

上一篇：掌握高级CSS技术：深入了解过渡、动画和变换

下一篇：如何使用MailHog在本地测试电子邮件

“如何为静态网站创建一个表单” 的相关文章

什么是JavaScript？网络上最流行的脚本语言一瞥

什么是JavaScript？网络上最流行的脚本语言一瞥

谁在尝试访问某些网站时没有遇到过更新Java的请求？ 虽然许多人通过交互式网站功能熟悉Java，但用户可能不太熟悉JavaScript——或者，实际上，他们可能错误地认为两者是相同的。 在本文中，我们将讨论JavaScript 是什么以及Java和JavaScript之间的区别。然后我们将概...

宝塔面板教程之主界面管理篇

宝塔面板教程之主界面管理篇

本章节主要是对宝塔面板的主界面的各个版本进行一个简单的说明。 宝塔面板主界面主要包括：服务器操作系统、服务器状态、站点信息、软件管理及网络流量几个部分。 Windows面板有部分功能未实现，其余部分与Linux面板同步。 系统操作...

宝塔面板教程之数据库管理篇

宝塔面板教程之数据库管理篇

宝塔的数据库管理，是基于phpmyadmin管理和新建数据库。其最大的便利性就是类似，通过面板可以快速访问进行管理操作，无需单独访问phpmyadmin的主页。 此外，在宝塔面板进行数据库管理，你也对数据库名、用户名及密码等信息一目了然，及可以对数据库执行快速备份或者导入。 添加数据...

宝塔面板教程之面板设置篇

宝塔面板教程之面板设置篇

宝塔面板设置主要涉及的是宝塔控制后台自身的参数，包括诸如面板的开关、自动更新及SSL、面板端口设置等。虽然这部分不涉及服务器自身的管理，但对宝塔面板的设置也有其重要。 特别是面板端口、安全入口及面板密码等涉及安全的参数设置。 启动和关闭面板 如果你长时间无需使用到宝塔面板，可以考虑...

宝塔面板教程之软件管理篇

宝塔面板教程之软件管理篇

宝塔面板提供丰富的软件以一键安装，这让服务器环境搭建提供不少的便利性，站长可以根据实际需求快速编译安装以实现不同的功能需求。 软件管理，主要是宝塔提供的一些面板扩展插件。 Nginx Nginx是一个高性能的HTTP和反向代理服务器，具有轻量级、占用内存小，并发能力强等优势。 w...

揭开Laravel面纱：用于构建Web应用程序的跨平台PHP框架

揭开Laravel面纱：用于构建Web应用程序的跨平台PHP框架

近年来，Web应用程序和网站的开发变得越来越简单。即使是我们当中最受技术挑战的人也已经相当熟练地使用WordPress和Wix等产品。 对于更高级的开发人员，有许多工具可以帮助简化开发过程。这些工具中最有用的工具之一是Laravel。 本文回答了“什么是Laravel？”这个问题。通过将其分...

Copyright 2345hao.cn Rights Reserved.琼ICP备2025061540号-1

Powered By Z-BlogPHP. Theme by TOYEAN.

您是本站第465419名访客 今日有8篇新文章/评论