Создаем контактную форму с использованием Bootstrap, PHP и AJAX

Создаем контактную форму с использованием Bootstrap, PHP и AJAX В данной статье я опишу создание и отправку формы AJAX. После этого мы сможем рассмотреть реализацию анимации при помощи animate.css, валидации данных при помощи JavaScript.

На момент написания данной статьи Bootstrap 3.3.5 будет актуальной версией фреймворка. Для данной статьи мы используем сборку Bootstrap по умолчанию(с 12 столбцами). Когда вы будете выполнять задания данной статьи, убедитесь, что используете последние сниппеты и структуру кода, описанные в документации Bootstrap.

Структура файлов и папок

Мы создадим корневой каталог и добавим в него следующие файлы и папки:

Bootstrap-Form:

Создаем контактную форму с использованием Bootstrap, PHP и AJAX Нам необходимо будет подключить некоторые front-end библиотеки:

  • Bootstrap;
  • jQuery.

С учетом данных библиотек структура файлов будет выглядеть следующим образом:

Bootstrap-Form:

Создаем контактную форму с использованием Bootstrap, PHP и AJAX

Создание формы

Откройте файл index.html и скопируйте в него следующую базовую структуру AJAX формы обратной связи:

<!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.

Мы включили мета-тег viewport для медиа-запросов в рамках Bootstrap. JavaScript был помещен в нижней части файла, чтобы в первую очередь обрабатывался основной код.

В теге body мы включили div с классом col-sm-6 col-sm-offset-3. Это означает, что в пределах окна просмотра sm(маленького) и поверх него мы хотим отобразить столбец шириной 50%(максимальное число столбцов 12). Класс col-sm-offset-3 задает отступ слева на 25%.

Таким образом, создается макет, который занимает половину доступного пространства и отцентрирован по горизонтали. После этого мы включили h3, и дальше идет основа формы. Убедитесь в том, что вы применили к форме идентификатор, чтобы позже прикрепить к ней событие для отправки формы AJAX JQuery:

Создаем контактную форму с использованием Bootstrap, PHP и AJAX

Без борьбы не бывает победы

Дальше необходимо вставить следующий код внутри тегов <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>

Это все поля ввода ввода и кнопки, с которыми будет взаимодействовать посетитель. Первоначальный div с присвоенным классом row — это классический синтаксис Bootstrap, представляющий собой горизонтальную группировку элементов col. Столбцы в пределах Bootstrap создают отступы или пробелы. Удаляя их, можно без проблем добиться, чтобы строка равномерно вписывалась в контейнер.

Мы создали два столбца с классом col-sm-6(50%), который будем использовать, чтобы отделить верхнюю часть формы. В пределах первого столбца col-sm-6 мы создали label и поля ввода для имени и электронной почты. Каждый из них включает label с соответствующим атрибутом for, так что метка связана с соответствующим полем ввода.

Каждый из данных столбцов содержит form-group, который семантически группирует метки, создавая небольшой отступ снизу:

Создаем контактную форму с использованием Bootstrap, PHP и AJAX

Типографика

Bootstrap может использовать классы для H1-H6. Они помогают задать стили встроенных элементов без добавления дополнительных полей ввода или создания блоков элементов super AJAX contact form. Мы использовали класс для H4, чтобы задать стиль label и сделать их большими.

Класс form-control применяется для каждого элемента ввода, чтобы он занимал всю ширину контейнера(ширина 100%). Этот класс также добавляет разные стили, которые могут создать без труда читаемый элемент формы(большой размер, четкие края и т.д.).

После данных столбцов мы включаем тело сообщения. Мы оборачиваем его в form-group и применяем те же стили, что и для меток и для текстовых полей ввода.

Призыв к действию

Создадим submit button. Bootstrap включает классы для разных кнопок и их состояний. Мы решили использовать кнопку “success” ( btn-success ), которая, по умолчанию, будет зеленой.

Также необходимо применить базовый класс btn , чтобы сбросить основные настройки кнопки (рамка, отступ, выравнивание текста, размер шрифта). Мы применили класс btn-lg , который создает большую кнопку, а далее класс pull-right , который задает обтекание кнопки слева.

После кнопки мы включили div с идентификатором #msgSubmit и применили следующие классы: «h3 text-center hidden«. Класс h3 помогает создать больший заголовок, text-center устанавливает выравнивание текста по центру, а hidden — задает display: none и visible: hidden :

Создаем контактную форму с использованием Bootstrap, PHP и AJAX

Добавление функционала отправки данных

Мы создали базовую Bootstrap JQuery AJAX form , но она ещё ничего не делает. Наш следующий шаг — создать возможность, которая принимает вводимые Посетителями данные и отправляет их асинхронно в PHP .

Откройте файл scripts.js и скопируйте в него следующий программный код:

$("#contactForm").submit(function(event){    // отменяет отправку данных формы event.preventDefault();    submitForm();});

Этот фрагмент кода JQuery , который прослушивает возможности отправки данных #contactForm (как указано ранее). Перед данной функцией мы обрабатываем переменную event , которая хранит действие отправки данных формы для возможности.

event.preventDeafult() останавливает отправку данных формы при обновлении страницы без выбора действия в форме. И в конце этот код запрашивает возможность submitForm(); :

submitForm();

Далее мы создаем возможность submitForm(); следующим образом:

function submitForm(){    // Инициируем переменную с содержимым формы 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 для использования в дальнейшем.

Мы инициируем объект AJAX внутри JQuery и устанавливаем настройки для post , адрес размещения файла PHP , данные, которые мы хотим отправить, и возможность обратного вызова. Данные включают в себя все три переменные с соответствующим id . Функцию обратного вызова вызывается, когда объект AJAX успешно принял информацию от скрипта PHP . Функцию захватывает возвращенный текст и проверяет, равен ли он строке “success”. Если да, то запускается финальная функцию formSuccess .

Она удаляет скрытый класс из DIV #msgSubmit , который мы применили ранее, выводя таким образом текст.

Подключение к возможности PHP Mail

Сейчас необходимо написать скрипт, который будет приобретать данные из формы AJAX , и отправлять контент через возможность PHP Mail . Откройте файл process.php и добавьте в него следующий программный код:

<?php$name = $_POST["name"];$email = $_POST["email"];$message = $_POST["message"];$EmailTo = "emailaddress@test.com";$Subject = "New Message Received";// готовим тело электронного письма$Body .= "Name: ";$Body .= $name;$Body .= "n";$Body .= "Email: ";$Body .= $email;$Body .= "n";$Body .= "Message: ";$Body .= $message;$Body .= "n";// отправляем электронную почту$success = mail($EmailTo, $Subject, $Body, "From:".$email);// перенаправляем на страницу сообщения об успешной отправке данных формыif ($success){   echo "success";}else{    echo "invalid";}?>

Нам надо сохранить переменные, которые мы хотим использовать. Из почтовой возможности можно приобрести три входных переменных и присвоить им те же имена в PHP . Переменная $EmailTo будет адресом электронной почты, которую можно без проблем задать в скрипте. $Subject — это строка, описывающая тему электронного письма.

Тело письма создается произвольно с добавлением трех созданных переменных. Сначала мы задаем текст описания, к примеру, «Name:«, далее идет переменная, а далее перенос на новую строку (/n) . Те же действия мы повторяем, связывая все данные с переменной $body .

Чтобы отправить электронное письмо, мы присоединяем его к почтовой возможности. Присвоив значение переменной $success , мы задаем адрес электронной почты, на который будет отправлено письмо, тему письма, тело и адрес электронной почты отправителя.

Чтобы начать процесс отправки электронной почте, необходимо вызвать его в операторе if . Таким образом можно проверить, были ли данные формы успешно предоставлены или нет. Если функцию Mail возвращает “true”, скрипт возвращает “success”, если функцию выдает ошибку, возвращается “ invalid ”.

Этот результат будет возвращаться объекту AJAX , и обрабатываться на стороне покупателя. Преимущества AJAX заключается в том, что все это делается в асинхронном режиме на стороне покупателя. Это может посетителю продолжать взаимодействовать с веб-сайтом во время отправки данных AJAX form :

Создаем контактную форму с использованием Bootstrap, PHP и AJAX

Наводим блеск

Сейчас мы сконцентрируемся на обеспечении обратной связи с посетителем при помощи разных дополнительных возможностей, которые можно без проблем включить. В частности, мы рассмотрим обратную связь формы при помощи обработки ошибок, как на стороне покупателя, так и на стороне сервера.

Также для валидации формы мы используем некоторые инструменты:

  • Animate.css: ;
  • Bootstrap Validator .

Добавьте их в проект, как мы ранее делали с Bootstrap и JQuery . Данные инструменты помогут обеспечить обратную связь с посетителем после того, как он отправил данные.

Структура проекта сейчас должна выглядеть следующим образом:

Создаем контактную форму с использованием Bootstrap, PHP и AJAX

Валидация формы

Давайте начнем с установки валидатора после ввода данных формы обратной связи AJAX PHP. Перейдите в файл scripts.js и отредактируйте первый фрагмент кода, который вызывает возможность SubmitForm() после того, как данные формы отправлены. Его необходимо настроить следующим образом:

$("#contactForm").validator().on("submit", function (event) {    if (event.isDefaultPrevented()) {        // обработка ошибки формы...    } else {        // все в порядке!        event.preventDefault();        submitForm();    }});

Этот новый фрагмент кода проверяет, нашел ли Bootstrap Validator проблемы и остановил ли работу кода. Если нет, мы продолжаем выполнение действий в стандартном режиме. Нам все ещё необходимо исключить действие по умолчанию (перезагрузку страницы без заполнения формы) из сценария представления данных формы.

Сейчас, если мы нажмем кнопку отправки данных формы, не заполнив все поля ввода, пустые будут выделяться красным цветом:

Создаем контактную форму с использованием Bootstrap, PHP и AJAX
В процессе добавления валидации мы заблокировали родную валидацию HTML5 . Можно без труда добавить в валидацию дополнительный контекст, включив сообщения об ошибках. Bootstrap Validator имеет в себя удобную возможность, позволяющую отобразить сообщения об ошибке по каждому из полей ввода. Чтобы добавить их, необходимо дополнить разметку HTML .

Внутри каждой form-group под полем ввода ввода данных необходимо разместить следующий 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>

Сейчас при повторной отправке данных AJAX JQuery формы будет отображаться сообщение об ошибке, если поля ввода формы не были заполнены: “Please fill in this field.”. Добавив data-атрибут для вводимых данных под названием “data-error”, можно включить пользовательское сообщение об ошибке.

Например:

<input type="input" data-error="Новое сообщение об ошибке">
Создаем контактную форму с использованием Bootstrap, PHP и AJAX

Добавление анимации обратной связи

Мы добавили функционал для индикации незаполненных полей ввода формы. Но было бы неплохо добавить в форму дополнительную анимацию и пару сообщений, которые дадут посетителю знать, что происходит. В настоящее время при успешной отправке данных формы появляется сообщение « Message Submitted! «, но как насчет ошибок?

Чтобы задействовать существующий код, мы изменим существующее сообщение об успешной отправке данных. Первым делом удалим текст «Message Submitted!» из HTML-разметки и оставим пустой 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 .

Данная функцию проверяет, имеем ли мы дело с сообщением об успешной отправке данных или с сообщением об ошибке. Это делается через проверку значения переменной valid . В любом случае она устанавливает переменную с соответствующими классами CSS (нам надо повторно включить h3 и text-center , поскольку мы удалим их).

Примечание: Для класса сообщения об успешной отправке данных мы используем некоторые классы animate.css . При успешной отправке данных AJAX JQuery contact form будет проигрываться анимация tada .

Наконец, функцию удаляет все классы из #msgSubmit (чтобы избежать пересечения классов), а далее устанавливает приоритетные классы и добавляет текст сообщения в div .

Внутри инициализации валидатора в начале этого раздела мы обновляем программный код, чтобы добавить вызов следующей возможности внутри оператора if , когда он дает значение true :

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

Сейчас, если вы не заполнили все поля ввода, будет отображаться сообщение об ошибке “ Did you fill in the form properly? »

Последний шаг для данной новой возможности submitMSG — вызвать ее, когда данные формы отправлены успешно. Обновите возможность formSuccess() следующим образом:

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

Мы хотим сбросить форму и очистить значения, когда вызываем возможность submitMSG , как указано выше с сообщением об успешной отправке данных. Сейчас при успешной отправке данных формы должно выводиться соответствующее сообщение с анимацией animate.css tada :

Создаем контактную форму с использованием Bootstrap, PHP и AJAX

Встряхнемся

Давайте добавим ко всей форме анимацию ошибки, универсальная анимация “тряски” должна подойти!

Создайте сразу же после возможности formSuccess() новую и назовите ее formError() :

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

Эта функцию использует подход, описанный на демонстрационной странице animate.css , который может добавить анимацию к элементу, а далее повторно вызывать ее снова.

Анимация CSS имеет в себя неприятную особенность: отсутствие функции повторного проигрывания, даже если удалить и повторно добавить класс. Эта функцию помогает сбросить классы конца анимации, что может повторно добавить их. Когда посетитель нажимает кнопку «Отправить», не заполнив все поля ввода AJAX формы обратной связи, мы проигрываем анимацию shake . И если он снова не заполнит все поля ввода, необходимо снова проиграть эту анимацию.

Можно вызвать эту возможность formError() выше возможности submitMSG() , которую мы создали для сообщения об ошибке. К примеру, так:

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

Сейчас, когда посетитель попытается отправить данные формы, не заполнив все поля ввода, она будет трястись, чтобы он понял, что что-то не так.

Больше валидации

Валидация на стороне покупателя — это отлично, но любой посетитель может отключить ее и отправить форму с пустыми полями ввода, отредактировав код в браузере. Надо создать сервис валидации на стороне сервера.

Нам необходимо открыть файл process.php и внести в него необходимые изменения, чтобы обеспечить проверку заполнения всех полей ввода. Мы создадим переменную $errorMSG , при помощи которой будем перехватывать сообщения об ошибках, а далее включим дополнительную проверку $_POST :

<?php$errorMSG = "";// ИМЯif (empty($_POST["name"])) {    $errorMSG = "Name is required ";} else {    $name = $_POST["name"];}// E-MAILif (empty($_POST["email"])) {    $errorMSG .= "Email is required ";} else {    $email = $_POST["email"];}// СООБЩЕНИЕif (empty($_POST["message"])) {    $errorMSG .= "Message is required ";} else {    $message = $_POST["message"];}?>

Этот PHP-код проверяет, существуют ли пустые поля ввода AJAX form , перед тем как установить их данные в виде соответствующих переменных (заменяет существующие заданные в коде переменные из $_POST ). Если поля ввода пусты, мы задаем общее сообщение для отправки обратно покупателю.

В ответ на исходный вызов AJAX нам необходимо послать сообщение об ошибке, которое будет выводиться в браузере. Для этого отредактируйте оператор if , который мы создали ранее в нижней части кода PHP :

<?php// перенаправление на страницу с сообщением об успешной отправке данныхif ($success && $errorMSG == ""){   echo "success";}else{    if($errorMSG == ""){        echo "Something went wrong :(";    } else {        echo $errorMSG;    }}?>

Через оператор if мы проверяем, будет ли переменная $errorMSG пустой («») , а также статус встроенной возможности Mail , которую мы использовали для переменной $success . В условии else мы включили дополнительную проверку, будет ли ошибка результатом сбоя $success . Если да, то отправляем обратно сообщение “Something went wrong :“. Иначе выводим сообщение, которое было скомпилировано, когда мы производили проверку пустых полей ввода.

И последний этап — необходимо принять новое сообщение в AJAX и вывести его в форме. Нам необходимо обновить объект AJAX в файле scripts.js следующим образом:

$.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 .

Заключение

Зайдите на Github , чтобы посмотреть весь программный код целиком. Сейчас форма обратной связи AJAX PHP предлагает посетителю информацию о том, какие из полей ввода он не заполнил. Мы выводим контекстные сообщения, основанные на статусе и возвращаемом от PHP сообщении. А также реализовали дополнительный уровень проверки на стороне сервера для тех посетителей, которые пытаются обойти front-end валидацию.

Я надеюсь, вам понравилась эта статья. Пожалуйста, оставляйте в комментариях ваши вопросы и отзывы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *