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

最新推荐文章于 2021-06-20 20:04:38 发布

daique1908

最新推荐文章于 2021-06-20 20:04:38 发布

阅读量473

点赞数

文章标签： html python javascript java js ViewUI

在本教程中，我将详细介绍利用流行的前端框架Bootstrap结合AJAX和PHP创建工作联系表的步骤。从那里，我们可以探索一些附加功能，例如带有animate.css的精美CSS动画，JavaScript中的进一步验证以及使用异步内容改善用户体验。

在撰写本文时， Bootstrap 3.3.5是最新版本，值得一提的是，本教程使用的是默认版本的Bootstrap（具有12列布局）。在进行后续操作时，请确保使用Bootstrap文档中概述的最新代码段和代码结构。

寻找快速解决方案？

如果您正在寻找一种快速的解决方案，那么在Envato Market上可以找到大量的PHP表单脚本。从几美元开始，它们是快速实现此功能的好方法（需要加载大量强大的功能！）

您还可以让Envato Studio服务提供商为您处理整个事情。例如，您可以获得一份精美的AJAX PHP联系人表格，其中包含Google创建的No Captcha reCaptcha并将其添加到您的网站中，价格仅为$ 45。

文件和文件夹结构

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

Bootstrap-Form:
    ├── css/
    ├── images/
    ├── js/ 
        ├── scripts.js
    ├── php/ 
        ├── process.php
    ├── index.html

我们将需要包括一些前端库来帮助我们，因此请继续下载（或从外部参考）以下内容：

放入这些库，因此文件结构变为：

Bootstrap-Form:
    ├── css/
        ├── bootstrap.min.css
    ├── images/
    ├── js/ 
        ├── scripts.js
        ├── bootstrap.js
        ├── jquery-1.11.2.min.js
    ├── php/ 
        ├── process.php
    ├── index.html

建立表格的基础

打开index.html文件，复制以下HTML基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>Contact form using Bootstrap 3.3.4</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">

</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
    <h3>Send me a message</h3>
    <form role="form" id="contactForm">
    
    </form>
</div>
</div>
</body>
<script  type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>

这是我们的基本html模板，我们将在其中构建表单的内容。您可以看到我们已经链接了所有必需CSS和JavaScript文件（请注意，对于该特定示例，我们实际上不需要bootstrap.js）。我们在Bootstrap中添加了一个视口元标记，以帮助我们进行媒体查询。 JavaScript已放置在文件的底部，以帮助首先交付核心内容。

在我们的body标签内，我们包含了一个带有col-sm-6 col-sm-offset-3类的div。这基本上意味着在我们的sm （小）视口中，并且上面我们希望显示50％宽度的列（最多12列）。 col-sm-offset-3类表示左边距为25％，因此产生的布局是可用屏幕视口的一半，并且位于水平居中位置。从这里开始，我们加入了h3并开始了我们表格的基础。确保将ID应用于此表单，以便稍后我们可以将jQuery事件附加到此表单。

没有胆量就没有荣耀

构建表单的胆量，我们可以在<form></form>标记内复制/粘贴或编写以下代码：

<div class="row">
            <div class="form-group col-sm-6">
                <label for="name" class="h4">Name</label>
                <input type="text" class="form-control" id="name" placeholder="Enter name" required>
            </div>
            <div class="form-group col-sm-6">
                <label for="email" class="h4">Email</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email" required>
            </div>
        </div>
        <div class="form-group">
            <label for="message" class="h4 ">Message</label>
            <textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
        </div>
        <button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>

这是用户将与之交互的所有输入字段和按钮。具有指定的row类别的初始div是经典的Bootstrap语法，表示col元素的水平分组。 Bootstrap中的列会创建填充或装订线–在这些填充区周围添加一行将删除左侧和右侧的填充区，从而帮助它们完美地放入容器中。

我们用col-sm-6类（50％）创建了两列，我们将使用它们来拆分表单。在第一个col-sm-6我们为名称创建了标签和字段，第二个用于电子邮件。其中的每个标签都包含一个带有适当的for属性的标签，因此它可以定位到关联的字段。这些列中的每一个都包括一个form-group ，该form-group在语义上将标签和字段分组在一起，并在底部应用了少量空白。

版式

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类，该类将显示设置为无，将可见性设置为隐藏。

添加提交功能

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

打开scripts.js复制以下代码：

$("#contactForm").submit(function(event){
    // cancels the form submission
    event.preventDefault();
    submitForm();
});

这部分代码是一个jQuery代码段，它侦听我们的#contactForm id（如先前设置）上的#contactForm函数。基于此函数，我们解析一个event变量，该event变量将提交表单动作存储到该函数。 event.preventDeafult(); 停止正常提交表单，这将刷新页面，因为未设置表单操作。最后，它请求submitForm(); 功能。

提交表格（）;

接下来，我们构建submitForm(); 功能如下：

function submitForm(){
    // Initiate Variables With Form Content
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();

    $.ajax({
        type: "POST",
        url: "php/form-process.php",
        data: "name=" + name + "&email=" + email + "&message=" + message,
        success : function(text){
            if (text == "success"){
                formSuccess();
            }
        }
    });
}
function formSuccess(){
    $( "#msgSubmit" ).removeClass( "hidden" );
}

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

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

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

将其挂接到PHP Mail函数中

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

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$EmailTo = "emailaddress@test.com";
$Subject = "New Message Received";

// prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";

$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";

$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";

// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);

// redirect to success page
if ($success){
   echo "success";
}else{
    echo "invalid";
}

?>

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

电子邮件主体是围绕所建立的三个变量宽松地构建的。首先设置一些描述性文本，例如“ Name：”，然后设置变量，然后设置由/n （新行/换行符）确定的新行。重复该过程并将其连接到$body变量。

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

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

该结果将返回给AJAX对象，并在客户端进行处理。 AJAX的优点在于，所有这些操作都是在客户端异步完成的，从而使用户可以在发送站点时继续使用该站点。

吐和波兰语

在本教程的上半部分介绍了表单的基本结构和功能之后，我们现在将深入探讨如何通过我们可以包括的各种附加功能向用户提供反馈。具体来说，我们将通过客户端和服务器端的错误处理来涵盖表单反馈。

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

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

现在，项目结构应如下所示：

Bootstrap-Form:
    ├── css/
        ├── bootstrap.min.css
        ├── animate.css
    ├── images/
    ├── js/ 
        ├── scripts.js
        ├── bootstrap.js
        ├── jquery-1.11.2.min.js
        ├── validator.min.js
    ├── php/ 
        ├── process.php
    ├── index.html

验证我们的表格

让我们从提交验证器开始检查表单开始。回到我们的scripts.js文件，我们需要编辑提交表单时调用submitForm()函数的第一段代码。

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

$("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});

这段新的代码将检查Bootstrap Validator是否已发现问题并停止了处理。如果还没有，我们照常继续。我们仍然需要防止在成功提交表单时执行默认操作（重新加载页面），因此请保持该状态。

现在，在表单未完全填写时单击提交，这将使空白字段以红色突出显示，显示需要输入的内容，就这么简单！

在添加此验证的过程中，我们已删除或阻止了本地HTML5验证的进行。我们可以通过包含错误消息来为验证添加更多上下文。 Bootstrap Validator具有漂亮的功能，允许每个输入的错误消息无缝显示。要添加这些内容，我们需要添加一些其他HTML，以提供显示的位置。

在输入下的每个表单组内，我们应放置以下html：

<div class="help-block with-errors"></div>

例如，这是添加到“名称”和“电子邮件”字段中的额外div：

<div class="row">
    <div class="form-group col-sm-6">
        <label for="name" class="h4">Name</label>
        <input type="text" class="form-control" id="name" placeholder="Enter name" required>
        <div class="help-block with-errors"></div>
    </div>
    <div class="form-group col-sm-6">
        <label for="email" class="h4">Email</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email" required>
        <div class="help-block with-errors"></div>
    </div>
</div>

现在，如果将字段保留为空白“ 请填写此字段 。”，则现在重新提交表单将显示默认错误消息。通过将数据属性添加到称为“data-error”的输入中，您可以包含自定义错误消息。例如：

<input type="input" data-error="NEW ERROR MESSAGE">

还有很多其他功能，例如Bootstrap验证程序可以接受的正则表达式模式。您可以在Github上查看更多信息。

添加反馈动画

我们的客户端验证看起来不错；我们在空白字段上出现了一些漂亮的亮点。但是，最好在表单中添加更多动画，并添加其他消息以使用户知道发生了什么。当前，成功时会出现“ Message Submitted！ ”消息，但是出现错误怎么办？

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

首先，让我们删除“ 邮件已提交！ ”中的文本，只留下一个空的div ：

<div id="msgSubmit" class="h3 text-center hidden"></div>

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

function submitMSG(valid, msg){
        var msgClasses;
    if(valid){
        msgClasses = "h3 text-center tada animated text-success";
    } else {
        msgClasses = "h3 text-center text-danger";
    }
    $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}

该函数有两个参数。 valid是布尔值变量：如果为true，则为成功消息，为false将为错误消息。 msg将是我们将在屏幕上的div显示的消息。

首先，该函数通过检查有效值来检查它是在处理成功消息还是错误消息。无论哪种情况，它都会使用适当CSS类设置类变量（我们需要重新包含h3和text-center因为我们稍后会在函数中默认删除它们）。

注意：我们在消息成功类中使用了animate.css类。 tada动画将成功播放。

最后，该函数从#msgSubmit删除所有类（避免发生冲突的类），然后添加先前设置的类，然后在div添加消息文本。

在验证器的初始化内部，我们在本节的开头进行了更新，当它等于true时，可以在if语句内添加以下函数调用。

submitMSG(false, "Did you fill in the form properly?");

现在，提交带有空白字段的表单应该显示错误消息“ 您是否正确填写了表单？ ”

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

$("#contactForm")[0].reset();
submitMSG(true, "Message Submitted!")

首先，我们要重置表单并清除成功后的值，然后像以前一样使用成功消息调用我们的submitMSG函数。成功提交表单后，现在应显示带有精美的animate.css tada动画效果的成功消息。

摇一摇

还有一个动画，对吗？让我们在错误的整个表单中添加另一个动画，通用的“摇动”动画应该不错！

在formSuccess()之后创建一个新函数， formSuccess()其formError()

function formError(){
    $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass();
    });
}

此函数使用在animate.css演示页上找到的方法，使我们可以将动画添加到元素，然后一次又一次地调用/添加。 CSS动画存在一个令人讨厌的问题，即一旦播放它们，即使删除并重新添加了类，它们也往往不会再播放。此功能有助于在动画结束时重置类，使您可以重新添加它们。当用户点击一个不完整的表格提交，我们希望shake动画播放。如果他们还是在错误的情况下再次提交，则需要再次播放。

我们可以把这种formError()上面的函数submitMSG()我们为这个错误消息创建功能。例如：

formError();
submitMSG(false, "Did you fill in the form properly?");

现在，当我们提交一个空表格时，它会震动以告知用户出了什么问题。

磨齿验证

所有这些客户端验证都是好的，但是任何用户都可以禁用这些措施，并通过在浏览器中编辑代码来提交带有空白字段的表单。进行一些服务器端验证，以捕获任何遗漏的内容始终是一个好方法。

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

<?php
$errorMSG = "";

// NAME
if (empty($_POST["name"])) {
    $errorMSG = "Name is required ";
} else {
    $name = $_POST["name"];
}

// EMAIL
if (empty($_POST["email"])) {
    $errorMSG .= "Email is required ";
} else {
    $email = $_POST["email"];
}

// MESSAGE
if (empty($_POST["message"])) {
    $errorMSG .= "Message is required ";
} else {
    $message = $_POST["message"];
}

?>

此PHP在将它们设置为对应的变量之前检查它们是否为空（替换现有的代码，从$_POST设置变量）。如果它们为空，则设置一条基本消息以发送回客户端。在PHP和JavaScript中，我们要做的不仅仅是验证字段是否为空（如果字段太短/太长，请对照正则表达式等）。但是，为简单起见，我们现在仅将其限制为空字段。

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

<?php
// redirect to success page
if ($success && $errorMSG == ""){
   echo "success";
}else{
    if($errorMSG == ""){
        echo "Something went wrong :(";
    } else {
        echo $errorMSG;
    }
}

?>

在我们的if语句中，我们还检查$errorMSG是否为空（“”），以及我们在$success变量上使用的内置邮件功能的状态。在else条件下，我们还进行了进一步检查。这只是检查错误是否是$success失败的结果，如果是，则发送回“ 出事了:: ”。否则，我们将显示在检查空值时编译的消息。

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

$.ajax({
        type: "POST",
        url: "php/form-process.php",
        data: "name=" + name + "&email=" + email + "&message=" + message,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
                submitMSG(false,text);
            }
        }
    });

我们刚刚更新了else条件，该条件检查以查看text == success 。在我们的else我们调用了formError()函数，该函数将应用震动动画，并要求使用submitMSG()函数来显示从PHP返回的文本。返回的文本将是“ Something出了问题:(”或接收到的字段为空。

结论

前往Github ，全面了解代码-我们已经做了很多工作！

现在，我们的表格应通过可靠的验证为用户提供有关哪些字段不正确的一些反馈。我们根据状态和PHP返回的消息提供了上下文消息，并在服务器端实现了额外的验证层，以捕获绕过前端验证的用户。

总体而言，您现在应该拥有一个非常完善的联系表单，可以将其样式化并集成到您的网站中。希望您喜欢本教程，请在下面的评论中留下任何问题或想法！

翻译自: https://webdesign.tutsplus.com/tutorials/building-a-bootstrap-contact-form-using-php-and-ajax--cms-23068

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用PHP和AJAX构建Bootstrap联系人表单

在本教程中，我将详细介绍利用流行的前端框架Bootstrap结合AJAX和PHP创建工作联系表的步骤。从那里我们可以探索一些附加功能，例如带有animate.css的精美CSS动画，使用JavaScript进行进一步的验证以及使用异步内容完善用户体验。在写这篇文章时引导3.3.5是最新版本，并且值得一提的是，我们正在使用引导的默认版本（有12列布局）本教程。当沿着化妆下面一定要使用所...
复制链接

扫一扫