如何向静态网站添加联系表单

本文最初发表于Codementor。

随着静态网站的兴起，开发者需要一种能够处理表单的服务。静态网站联系表单是最常见的应用场景，本文将介绍如何使用Kwes 表单生成器添加联系表单。

在静态网站上添加联系表单可能比较棘手，因为静态网站通常没有后端来处理表单提交。在这种情况下，我们可以使用一些服务来帮我们完成这项工作。市面上有很多这样的服务，例如 Netlify Forms 或 Typeform，但在这里，我们将使用 Kwes 服务。

我们将创建一个包含以下字段的联系表单：

所有输入字段都应为必填项，并且电子邮件表单字段应进行验证。

一体化

由于我们要在网站上添加 Kwes 表单，所以我们应该先免费注册。

注册后，从 Kwes 控制面板添加新网站和新表单。

body要完成集成，您应该在联系页面的标签底部添加 JavaScript 文件。

<script src="https://kwes.io/js/kwes.js"></script>

我的网站使用的是 Hexo 静态页面生成器，但它也适用于其他静态网站生成器，例如 Hugo 或 Jekyll。由于大多数静态网站生成器都支持 Markdown，您可以直接将联系代码粘贴到 Markdown 中，它也能正常工作。或者，您也可以创建一个单独的页面或布局，并将代码粘贴到那里。

专业提示：对于没有联系表单的页面，无需添加 JavaScript 文件。

接下来，我们需要在联系页面添加一个 HTML 表单。为此，请添加常用的表单标签和属性。

专业提示：不要忘记为具有匹配输入 ID 的属性添加标签，以使您的表单更易于访问。

现在我们需要添加 Kwes 属性。请务必将表单包裹在一个div带有相应kwes-from类名的 <div> 元素中。之后，将action属性添加到form元素，然后再将rules属性添加到输入字段。代码应该类似于这样：

<div class="kwes-form">
  <form method="POST" action="https://kwes.io/api/foreign/forms/youruniqueid">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" rules="required">
    <label for="email">E-mail</label>
    <input type="email" name="email" id="email" rules="required|email|max:255">
    <label for="message">Message</label>
    <textarea name="message" id="message" rules="required"></textarea>
    <button type="submit">Submit</button>
  </form>
</div>

您可以在Kwes 官方文档中查看所有规则选项。

发布表单之前，应该先测试表单。使用 Kwes，您可以通过两种不同的方式进行测试：

• 通过在网站设置中提供测试域名，或者
• mode="test"通过向表单元素添加HTML属性。

在测试模式下，您提交的所有数据都不会影响您计划中的数据。您可以通过切换开关在控制面板中查看测试数据。就是这么简单。

最后一步是将代码设置为生产模式。现在我们可以坐等提交，因为 Kwes 会为我们处理一切——从表单验证、垃圾邮件过滤到发送确认邮件。

您可以自定义通知消息的样式，使其与您的品牌相匹配。

Kwes 特色

Kwes 内置了根据条件显示或隐藏内容的逻辑。例如，您可以根据所选套餐显示不同的套餐详情。

对我而言，最大的优势在于表单验证。验证功能同时作用于前端和后端网站。无需重复造轮子，也无需一遍又一遍地编写验证规则，这不仅节省了时间，也是我非常希望在每个项目中都能避免的工作。Kwes 拥有超过 50 条验证规则，应该能够涵盖大多数场景，即使是处理日期、时间、密码和文件上传等最复杂的情​​况也不例外。

如果您的表单是公开的，那么您很可能会收到垃圾邮件。使用 Kwes，您可以获得垃圾邮件防护，甚至可以帮助 Kwes 了解哪些邮件需要过滤掉。

如果您想更好地控制表单并将其与其他服务（例如 Zapier）集成，您可以这样做。您甚至可以利用 Kwes API 自行管理提交内容。

结论

Kwes虽然需要付费，但您应该考虑它能为您和您的团队节省大量的开发时间。我认为将验证工作交给专门从事该领域的开发人员是值得的，这样您就可以专注于项目或业务的其他部分。

联系页面