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

最新推荐文章于 2021-12-30 18:41:46 发布

dfsgwe1231

最新推荐文章于 2021-12-30 18:41:46 发布

阅读量399

点赞数 1

文章标签： javascript 后端 markdown ViewUI

这篇文章最初发表在 Codementor上 。

随着静态网站的兴起，开发人员需要一种可以处理表单的服务。静态网站联系表单是最常见的情况，在本文中，您将学习如何使用Kwes form builder添加表单。

将联系表单添加到静态站点可能是一个挑战，因为静态站点通常没有可以处理表单提交的后端。在这种情况下，我们可以使用可以为我们做到这一点的服务。有很多服务，例如Netlify表单或Typeform，但是在这种情况下，我们将使用Kwes服务。

我们将使用以下字段构建联系表单：

| Form element     | Form field         |
| --------------   | ----------------   |
| Name             | Text input         |
| Email            | Email input        |
| Message          | Textarea input     |
| Button           | Submit button      |

所有输入字段均应为必填字段，并且电子邮件表单字段应经过验证。

积分

由于我们打算将Kwes表单添加到我们的网站，因此我们应该首先免费注册。

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

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

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

我正在为我的站点使用Hexo静态页面生成器，但是它可以与其他静态站点生成器（如Hugo或Jekyll）一起使用。由于大多数静态网站生成器都支持Markdown，因此您可以将联系代码直接粘贴到Markdown中，它也可以工作。否则，您可以创建一个单独的页面或布局并将代码粘贴到此处。

专家提示：无需将JavaScript文件添加到没有联系表单的页面上。

接下来，我们将HTML表单添加到我们的联系页面。为此，请添加常用的表单标签和属性。

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

现在，我们应该添加Kwes属性。使用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 >