Advertisement
  1. Web Design
  2. Bootstrap
Webdesign

使用PHP和AJAX构建Bootstrap联系表单

by
Difficulty:BeginnerLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Fuhuan (you can also view the original English article)

Final product image
What You'll Be Creating

在本教程中,我将回顾创建工作联系表单的步骤,利用日益流行的前端框架Bootstrap,结合AJAX和PHP。 从那里我们可以探索一些额外的功能,例如一些花哨的CSS动画和animate.css,进一步的JavaScript验证以及用异步内容改进用户体验。 

在编写本文时,  Bootstrap 3.3.5是最新版本,值得一提的是我们在本教程中使用了Bootstrap的缺省构建(带有12列布局)。 在跟随时,确保使用Bootstrap文档中概述的最新代码片段和代码结构。 

文件和文件夹结构 

首先,我们要创建一个根目录并包含以下文件和文件夹:

我们需要包括一些前端库来帮助我们,因此请继续下载(或从外部引用)以下内容:

放在这些库中,文件结构变成:

建立表格的基础知识

打开index.html文件,复制下面的HTML基础结构:

这是我们的基本html模板,我们将在其中构建表单的内容。 您可以看到我们链接了所有必需的CSS和JavaScript文件(注意,我们实际上并不需要这个特定示例的bootstrap.js)。 我们已经包含了一个视口meta标签 来帮助我们在Bootstrap中进行媒体查询。 JavaScript已放置在文件的底部,以帮助首先提供核心内容。

在我们的身体标记中,我们包含了一个div类 col-sm-6 col-sm-offset-3。 这基本上意味着在我们的sm (小)视口内和上面我们希望显示一个50%宽度的列(最多有12列)。 所述col-sm-offset-3类表示左的25%,由此产生的布局是可用的屏幕视区一半和水平居中的余量。 从这里我们已经包括了一个  h3并开始了我们的形式的基础知识。 确保将ID应用于此表单,以便稍后将jQuery事件附加到此表单中。

the offset will push our DIV 25 from the right

大胆尝试吧

构建表单的内容我们可以在标签中复制/粘贴或写入以下代码:

这是用户将与之交互的所有输入字段和按钮。 div指定的类的初始值row 是经典的Bootstrap语法,表示col元素的水平分组。 Bootstrap中的列创建填充或排列 - 在这些列周围添加一行将删除左侧和右侧的填充,帮助它们完全适合。 

我们创建了两个栏目col-sm-6(50%),我们将用它来分割我们的表格。在第一个中,col-sm-6 我们为名称创建了一个标签和字段,第二个用于电子邮件。 其中每个标签都包含一个具有适当for属性的标签,因此可以定位相关字段。 这些列中的每一列都包含一个form-group将标签和字段语义分组在一起并在底部应用一个小的页边空白。

Displaying two fields inline

活版印刷

Bootstrap允许您使用H1-H6的印刷术课程。 这些类为我们提供了样式化的内联元素,而无需添加额外的边距或创建块元素。 我们利用H4快速设计这些标签,使它们变得大而清晰。

form-control应用于每个输入的类使其跨越容器的整个长度(宽度为100%)。 它还应用各种样式来帮助构建易于阅读的表单元素(更高的高度,平坦的边框等)。

在这些列之后,我们包含消息体。 再次,我们将其包装在一个中,form-group并将类似的样式应用到我们以前的标签和文本区域。

行动呼吁

最后我们包含提交按钮。 Bootstrap有许多类别,用于各种按钮和排版颜色/状态。 我们选择使用“成功”按钮(btn-success),默认为绿色。 此外,我们需要应用基btn类来重置基本按钮功能(边框,填充,文本对齐,字体重量)。 我们应用了一个btn-lg类,它使它成为一个大按钮,最后是一个pull-right将此按钮右移的类。

在我们的按钮之后,我们已经包含了一个具有ID #msgSubmit并应用以下类的div :“ h3 text-center hidden”。 h3有助于创建更大的标题,text-center (您猜对了)将文本对齐设置为中心,最后我们设置了hidden将显示设置为无和隐藏的可见性的类。

Completed Form

添加提交功能

正如你在首选浏览器中看到的那样,我们已经创建了一个基本的Bootstrap表单。 然而,它实际上并没有做任何事情。 我们下一步将创建一个函数,该函数接受用户的输入并将其异步发送给我们的PHP邮件程序。  

打开scripts.js复制下面的代码:

这段代码是一个jQuery代码片段,它侦听我们#contactFormid 上的提交函数(如前所述)。 在这个函数中,我们解析一个event变量,将提交表单动作存储到函数中。 该 event.preventDeafult();站的形式提交,因为它通常会,因为没有任何形式的操作设置这将刷新页面。 最后,它请求 submitForm();函数。

提交表格();

接下来我们构建submitForm();如下函数:

设置的三个变量是获取表单中每个输入的值,并将它们分配给稍后使用的JavaScript变量。 

我们在jQuery中启动一个AJAX对象,并将类型参数设置为post,PHP文件位置的URL,我们希望发送的数据以及成功回调函数。 数据包含所有三个连接的变量以及关联的标识/标签。 当AJAX对象成功接收到PHP脚本返回的信息时,调用成功回调函数。 该函数捕获返回的文本并检查它是否等于字符串“success”。 如果是这样,它激活最终的功能formSuccess。

该formSuccess函数从#msgSubmit我们之前应用的div中移除隐藏的类,从而显示文本。

挂载到PHP邮件功能

最后,我们需要编写一个PHP脚本来接收数据并通过内置的php邮件功能发送我们的内容。 打开process.php并包含以下代码:

与之前的jQuery类似,我们需要收集并存储我们希望使用的变量。 从post函数中,我们可以收集三个输入变量,并将它们分配给PHP中的类似变量名称。 该$EmailTo 变量是一个预先定义的电子邮件地址,您可以在脚本中设置该电子邮件地址以在表单提交时发送到您的电子邮件。$Subject是您希望用作电子邮件主题的字符串。

电子邮件正文围绕建立的三个变量松散地构建。 首先设置一些描述性文字,例如“Name:”,然后是变量,然后是由/n(新行/换行符)确定的新行。 这是重复并连接到$body变量。

为了最终发送邮件,我们在邮件功能中附加它。 分配变量,$success我们包括它发送的电子邮件地址,主题,正文和电子邮件。

要启动发送电子邮件的过程,我们可以在if声明中调用它。 这也有助于检查是否成功。 如果邮件函数返回“true”,脚本将返回“success”,如果失败则返回“invalid”。

这个结果将被返回到AJAX对象并在客户端处理。 AJAX的优点在于,所有这些都是在客户端异步完成的,使用户可以在发送时继续使用该站点。 

后半部分

在本教程的前半部分介绍了表单的基本结构和功能之后,我们现在将介绍通过我们可以包含的各种附加功能提供用户反馈的基本内容。 具体而言,我们将通过客户端和服务器端的错误处理来涵盖表单反馈。 

再一次,为了帮助建立表单验证的过程,我们将利用一些工具。 这些包括:

像我们之前使用Bootstrap和jQuery一样将这些添加到项目中。 这些工具将有助于在用户提交表单时向用户提供反馈。 这里有很多表单验证工具和框架(包括原生HTML5验证),但是我使用了“Bootstrap Validator”,因为它很好地与我们当前的表单集成在一起。 

现在项目结构应该如下所示: 

验证我们的表格

让我们首先启动验证器,在我们提交后检查表单。 回到我们的  scripts.js文件中,我们需要编辑submitForm() 提交表单时调用函数的第一部分代码。 

 我们需要将其更新为以下代码:

这段新的代码检查引导程序验证程序是否发现问题并阻止其进行处理。 如果没有,我们会按照正常情况继续。 我们仍然需要阻止成功提交表单时的默认操作(重新加载页面),因此请继续。

点击提交表单时,如果未填充,现在会导致空白字段以红色突出显示需要输入的内容,这很简单!

在添加此验证的过程中,我们删除或阻止了本机HTML5验证的发生。 我们可以通过添加错误消息来为验证添加更多的上下文。 引导验证器有一个漂亮的功能,可以让每个输入的错误消息非常无缝地显示。 为了添加这些,我们需要添加一些HTML来提供一个地方供他们展示。

在输入框中的每个表单组中,我们应该放置下面的html:

例如,以下是添加到名称和电子邮件字段的额外div:

现在重新提交表格现在应该在字段留空时显示默认错误消息“ 请填写此字段。”。 通过向调用的输入添加数据属性,“data-error”可以包含自定义错误消息。 例如:

还有一大堆其他功能,比如Bootstrap验证器可以接受的正则表达式模式。 您可以在Github上查看更多信息。

添加反馈动画

我们的客户端验证看起来不错; 我们有一些漂亮的效果发生在空白的地方。 但是,向表单添加更多动画并添加更多消息让用户知道发生了什么会很好。 但是,向表单添加更多动画并添加更多消息让用户知道发生了什么会很好。 消息成功,但出现错误,怎么样?

为了利用现有的代码并使我们的脚本更加可重用,我们将修改现有的成功消息以接受错误。

首先,让我们删除“ 提交的消息! “来自HTML的文本,并留下一个空的div:

现在我们需要创建一个新的函数来处理消息状态。 将此功能添加到底部scripts.js

将此功能添加到底部scripts.js valid 将是一个布尔变量:如果它是真的,它将是一个成功消息,false将是一个错误消息。 msg 将成为我们将div在屏幕上显示的信息。

首先,函数通过检查有效值来检查它是处理成功还是错误消息。 在任何一种情况下,它都会使用适当的CSS类设置类变量(我们需要重新包含h3和,text-center因为我们将在后面的函数中删除它们。) 

注意:我们 为消息成功类使用了一些animate.css类。 该tada 动画将在成功播放。

最后,该函数从所有类中删除 #msgSubmit(避免冲突类),然后添加之前设置的类,然后在其中添加消息文本div。

最后,该函数从所有类中删除 #msgSubmit(避免冲突类),然后添加之前设置的类,然后在其中添加消息文本div。

提交带空字段的表单现在应该显示错误消息“ 您是否正确填写表单?“

这个新的submitMSG函数的最后一步是在表单成功时调用它。 将formSuccess()函数更新为以下内容:

首先,我们希望重置表单并清除成功的值,然后submitMSG像以前一样调用我们的函数,并获得成功。 成功提交表单现在应该显示具有奇特animate.css tada 动画效果的反馈消息。

摇动它

什么是更多的动画,对吧? 让我们在错误中添加另一个动画到整个表单,一个通用的“摇动”动画应该是好的!

创建一个新的函数,formSuccess()然后调用它formError()

该函数使用animate.css演示页面上的一种方法,它使我们能够向元素添加动画,然后再次调用/添加动画。 CSS动画有一个令人讨厌的问题,即一旦玩家不再玩游戏,即使该课程被移除并重新添加时,他们一旦玩过它们。 CSS动画有一个令人讨厌的问题,即一旦玩家不再玩游戏,即使该课程被移除并重新添加时,他们一旦玩过它们。 当用户点击不完整的表单提交时,我们想要 shake 播放动画。 如果他们再次提交时,它还是错了,它需要再次演示。

我们可以formError() 在submitMSG()我们为错误消息创建的函数上面调用此函数。 例如:

现在,当我们提交一个空表单时,它会动摇,让用户知道出了什么问题。

莫亚尔验证

所有这些客户端验证都很好,但是任何用户都可以通过在浏览器中编辑代码来禁用这些措施并通过空字段提交表单 做一些服务器端验证总是一个很好的措施,以捕获任何滑过的东西。

打开我们的process.php文件,我们需要对此进行一些更改以检查字段是否为空; 如果不是这样,请将消息发送回前端。 我们将创建一个变量$errorMSG来捕获我们的错误消息,然后包含进一步的$_POST验证。 

我们将创建一个变量$errorMSG来捕获我们的错误消息,然后包含进一步的$_POST验证。  如果它们是空的,我们会设置一条基本信息发送回客户端。 在PHP和JavaScript中,我们可以做的不仅仅是验证字段是否为空(如果太短/太长,请根据正则表达式进行检查)。 但是,为了简单起见,我们现在将其限制为空。

我们需要将错误消息发送回初始的AJAX调用,以便在浏览器中显示。 我们将编辑if我们之前在PHP文件底部创建的语句。

在我们的if声明中,我们还检查是否$errorMSG与我们在$success变量上使用的内置邮件函数的状态一样是空白(“”) 。 在我们的else情况下,我们已经包括进一步检查。 这只是检查错误是否是$success失败的结果,如果发回“ 出错了:( ”。 否则我们显示当我们检查空值时编译的消息。

最后一步是在我们的AJAX中接受这条新消息并将其显示在表单上。 我们需要更新scripts.js文件中的AJAX对象,如下所示:

我们刚刚更新了else检查的条件,看看是否text == success。 在我们else我们已经调用了formError()将应用摇动动画的函数,并且我们已经要求submitMSG()函数显示PHP返回的文本。 返回的文本要么是“ 出错了:(”   或者收到的字段为空。

结论

去Github看看完整的代码 - 我们做了很多!

我们的表格现在应该通过固体验证向用户提供关于哪些字段不正确的反馈。 我们根据PHP的状态和返回的消息提供了上下文消息,并在服务器端实现了一个额外的验证来捕捉那些绕过前端验证的人。 

总体而言,您现在应该有一个非常完善的联系功能,可以将其样式化并集成到您的网站中。 我希望你喜欢这个教程,欢迎在下面的评论中留下任何问题或想法!

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.