静态表单提交到php数据库
该帖子最初发布在 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 >
您可以在Kwes官方文档中看到所有规则选项。
发布表单之前,应先测试表单。 使用Kwes,您可以通过两种不同的方式来做到这一点:
- 通过在网站设置中提供测试域,或
- 通过向表单元素添加HTML属性
mode="test"
。
在测试模式下 ,您提交的所有内容都不会影响您计划中的数据。 您可以通过切换切换开关在仪表板上查看测试数据。 就这么简单。
最后一步是将代码设置为生产模式。 现在,我们应该坐下来等待提交,知道Kwes会为我们处理所有事情-从表单验证到垃圾邮件过滤,再到发送确认电子邮件。
您可以自定义通知消息的样式以匹配您的品牌。 请参阅我的网站上定制的联系表单示例。
Kwes功能
Kwes具有用于显示或隐藏条件中任何内容的内置逻辑 。 例如,您可以根据所选计划显示不同的计划详细信息。
对我来说,最重要的优势是表单验证。 验证将在前端和后端站点上执行。 不必重新发明轮子并一遍又一遍地编写验证规则既节省时间,又是我非常高兴地希望在每个项目中都避免的任务。 拥有50多个验证规则,Kwes应该涵盖大多数情况,甚至是最复杂的情况,例如处理日期,时间,密码和文件上传。
当您的表单公开时,很有可能会收到垃圾邮件。 使用Kwes,您可以获得垃圾邮件防护,甚至可以帮助Kwes了解要过滤掉哪些邮件。
如果您想对表单进行更多控制并将其与Zapier等其他服务集成,则可以这样做。 您甚至可以利用Kwes API并自己管理提交。
结论
Kwes附带了成本,但是您应该考虑节省自己和团队的开发时间。 我认为值得将验证留给专门研究该领域并专注于项目或业务其他部分的开发人员。
翻译自: https://hackernoon.com/how-to-add-a-contact-form-to-a-static-website-0e3dy3jq6
静态表单提交到php数据库