От автора: в этом уроке я шаг за шагом расскажу, как создать рабочую контактную форму с помощью всегда популярного front-end фреймворка Bootstrap в сочетании с AJAX и PHP. Мы изучим пару дополнительных возможностей, таких как анимация animate.css, валидация на JavaScript и улучшение пользовательского опыта при работе с асинхронным контентом.
На время написания статьи последняя версия это Bootstrap 3.3.5, стоит отдельно упомянуть, что мы используем стандартный билд 12 колоночной верстки. Перед тем, как продолжить, убедитесь в том, что вы используете самые последние сниппеты, описанные в документации Bootstrap.
Файловая структура
Во-первых, необходимо создать корневой каталог и включить в него следующие файлы и папки:
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Также надо подключить пару front-end дополнительных библиотек, скачайте или подключите их по внешним ссылкам: Bootstrap, jQuery
Закиньте файлы в нужные папки, в итоге структура выглядит так:
Создание основы формы
Откройте index.html и скопируйте следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPEhtml> <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"/> <linkrel="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 мы прописали мета тег viewport. JavaScript был прописан внизу страницы специально, чтобы сначала загрузилась визуальная часть формы.
Внутри body мы создали DIV с классом col-sm-6 col-sm-offset-3. Это значит, что на маленьких экранах sm (small) мы хотим отображать наши колонки с шириной в 50% (максимум 12 колонок). Класс col-sm-offset-3 добавляет левый внешний отступ в 25%, тем самым создается шаблон, занимающий половину от экрана и расположенный по центру. Внутри этого блока мы добавили h3 и форму. Не забудьте добавить ID к форме, чтобы потом прицепить к ней событие JQuery.
Кто не рискует, тот не пьет шампанское
Можно вручную написать код формы или скопипастить его:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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="btnbtn-success btn-lg pull-right ">Submit</button> <div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div> |
Пользователь будет взаимодействовать только с этими полями и кнопками. Родительский DIV с классом row – классический синтаксис Bootstrap, создает строку из колонок. Колонки в Bootstrap создают внутренние отступы или интервалы между столбцами текста – обертывание их в div с классом row убирает левый и правый внутренние отступы, и колонки идеально вписываются в основной контейнер.
Мы создали две колонки col-sm-6 (50%), их мы используем, чтобы разбить форму. Внутри первого столбца col-sm-6 создадим лэйбл и инпут для имени, во втором то же самое для почты. Каждый лэйбл имеет свой атрибут for, ссылающийся на определенное поле. Каждая колонка заключена в DIV form-group, семантически объединяющий лэйблы и инпуты вместе, а также добавляющий маленький внешний отступ снизу.
Типографика
Bootstrap позволяет использовать классы заголовков H1-H6. Эти классы облегчают стилизацию линейных элементов, не нужно добавлять дополнительных отступов или обертывать их в блочные элементы. Можно применить класс H4 к лэйблам, быстро увеличив их размер и сделав их более понятными.
Класс form-control применяется к каждому инпуту и растягивает их на всю ширину контейнера (100%). Помимо растяжения данный класс добавляет различные стили, улучшающие читаемость текста (увеличивает высоту текста, добавляет рамку и т.д.).
После колонок с именем и почтой мы добавляем текстовое поле сообщения. И опять же, мы оборачиваем его блоком form-group с теми же стилями для лэйблов и текстовых полей.
Призыв к действию
И наконец, мы добавляем кнопку. В Bootstrap имеется большое количество классов для различных кнопок с различными цветами и состояниями. Мы решили использовать кнопку «успеха» (btn-success), по умолчанию имеет зеленый цвет. Также для сброса стандартных стилей кнопки (граница, паддинг, выравнивание текста, насыщенность шрифта), мы добавим базовый класс btn. Последнее, что мы сделаем, это добавим класс btn-lg для увеличения кнопки и класс pull-right для выравнивания кнопки по правому краю.
После кнопки добавляем DIV с id #msgSubmit и классами «h3 text-centerhidden». H3 увеличивает заголовок, text-center (думаю, догадались) делает текст по центру, а класс hidden прячет блок (display:none; visibility:hidden;).
Добавляем функционал по отправке формы
В предыдущей главе мы создали основу Bootstrap формы, но пока что она абсолютно ничего не делает. Следующим шагом станет создание функции, которая асинхронно отправит данные из полей. Откройте scripts.js и скопируйте следующий код:
|
1 2 3 4 5 |
$("#contactForm").submit(function(event){ // cancels the form submission event.preventDefault(); submitForm(); }); |
Этот кусок кода JQuery ловит событие нажатия кнопки формы с id#contactForm. По этой функции мы парсим переменную события, в которой хранится информация по нажатию кнопки. event.preventDeafult(); останавливает отправку данных из формы, как это было бы по-обычному, так как не указан action формы. В конце вызывается функция submitForm();.
submitForm();
Создадим функцию submitForm();:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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"); } |
Три переменные содержат значения, полученные из формы, данные значения будут использоваться позже.
Создаем объект AJAX и устанавливаем тип запроса POST, URL– ссылка на PHP файл. В data посылается необходимая информация, и при успешной отработке срабатывает функция success. Функция сравнивает возвращенное значение со строкой «success», если все верно, то запускается функция formSuccess.
Функция formSuccess удаляет класс hidden с DIV с id #msgSubmit, показывая текст.
Создание Mail функции PHP
Нам осталось написать код для получения и отправки нашей информации с помощью встроенной функции mail. Откройте process.php и скопируйте следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php $name= $_POST["name"]; $email= $_POST["email"]; $message= $_POST["message"]; $EmailTo= "email address"; $Subject= "Получено новое сообщение"; // Подготовка шапки сообщения $Body.= "Имя: "; $Body.= $name; $Body.= "\n"; $Body.= "Email: "; $Body.= $email; $Body.= "\n"; $Body.= "Сообщение: "; $Body.= $message; $Body.= "\n"; // посылаем сообщение $success= mail($EmailTo, $Subject, $Body, "From:".$email); // редирект if($success){ echo"success"; }else{ echo"invalid"; } ?> |
Похож на кусок кода JQuery выше, мы создаем и храним переменные, которые потом будем использовать. Из POST функции мы ловим три переменные и записываем их значения в такие же переменные PHP. Переменная $EmailTo – заранее определенный email адрес, который задается в скрипте и отправляется на вашу почту из формы. $Subject – строка с темой сообщения.
Заголовок сообщения формируется из трех переменных. Сначала указывается от кого сообщение «Имя», затем добавляется символ перехода на новую строку /n. Эти шаги повторяются и прикрепляются к переменной $body.
Для того чтобы отправить сообщение мы пишем функцию отправки сообщения. В переменную $success вернется результат отправки, в которую входит: получатель, тема, основной текст и отправитель.
Функцию отправки можно вызвать в выражении if. Также условие поможет определить статус сообщения. Если вернулось true, то мы вернем «success», а если false соответственно «invalid».
Данный результат вернется в AJAX объект. Вся красота в том, что весь этот процесс происходит асинхронно и выполняется на клиентской стороне, позволяя клиенту пользоваться сайтом во время отправки сообщения.
Начищаем до блеска
Изучив базовую структуру и функционал нашей формы в первой половине урока, теперь мы погрузимся в практические вопросы по поддержке обратной связи с пользователями. Все это мы будем делать через различные дополнительные функции. В частности, мы рассмотрим форму обратной связи через обработку ошибок, как на стороне клиента, так и на стороне сервера.
Еще раз, для валидации формы мы будем использовать дополнительные инструменты. Вот эти: Animate.css, Bootstrap Validator
Добавьте их так же в проект, как раньше добавили Bootstrap и jQuery. Эти инструменты обеспечат нам обратную связь с пользователем, когда он будет отправлять форму. Существует множество валидаторов форм и фреймворков (в том числе и нативной HTML5 валидатор), но я использовал «Bootstrap Validator», так как он отлично вписывается в нашу форму. Теперь структура проекта выглядит так:
Валидация формы
Начнем с создания валидатора при нажатии на кнопку формы. Вернемся в файл scripts.js и отредактируем код там, где вызывается submitForm(). Теперь код выглядит так:
|
1 2 3 4 5 6 7 8 9 |
$("#contactForm").validator().on("submit", function(event) { if(event.isDefaultPrevented()) { // обработка неправильной формы... } else{ // все хорошо! event.preventDefault(); submitForm(); } }); |
Этот новый кусок кода проверяет, нашел ли Bootstrap Validator какие-то ошибки и остановил процесс. Если нет, то мы продолжаем, как обычно. Не забываем о том, что нам необходимо предотвратить обновление страницы. Теперь, при нажатии на кнопку отправки формы, и если все поля пустые, сработает проверка правильности формы, и поля подсветятся красным. Так просто!
Добавив такую проверку, мы избавились от нативной HTML5 проверки. Можно улучшить нашу валидацию, добавив сообщения об ошибках. В Bootstrap Validator есть отличная функция, она позволяет довольно легко отображать сообщения об ошибках возле каждого поля. Чтобы ее добавить, мы должны написать дополнительный HTML-код. В каждой form-group под инпутом необходимо разместить следующий код:
|
1 |
<div class="help-block with-errors"></div> |
К примеру, ниже к полям имени и почты добавлены дополнительные блоки DIV:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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, можно написать свое собственное сообщение. К примеру:
|
1 |
<input type="input" data-error="NEW ERROR MESSAGE"> |
Существует целый ряд других функций, как регулярные выражения, которые можно применить к валидатору Bootstrap. Посмотреть их можно на Github.
Добавляем анимацию
Наша клиентская валидация смотрится очень хорошо; пустые поля подсвечиваются красным. Тем не менее, было бы неплохо добавить немного анимации форме и дополнительных сообщений, чтобы пользователь знал, что происходит. У нас уже есть «Message Submitted!», сообщение появляется при успешной отправке формы. А что насчет сообщения об ошибке?
Мы модифицируем наш код, чтобы он стал более универсальным, изменив успешное сообщение так, чтобы оно принимало и сообщения об ошибках.
Во-первых, удалим текст «Message Submitted!» из верстки и просто оставим DIV пустым:
|
1 |
<div id="msgSubmit" class="h3 text-center hidden"></div> |
Теперь необходимо создать новую функцию для обработки статуса сообщения. Добавьте эту функцию в конец scripts.js.
|
1 2 3 4 5 6 7 8 9 |
function submitMSG(valid, msg){ varmsgClasses; if(valid){ msgClasses = "h3 text-center tada animated text-success"; } else{ msgClasses = "h3 text-center text-danger"; } $("#msgSubmit").removeClass().addClass(msgClasses).text(msg); } |
Функция принимает два аргумента: valid Булево выражение, msg содержит сообщение для отображения в блоке DIV. Если valid true, то показывается успешное сообщение и наоборот.
Сперва, функция смотрит, с каким сообщением она работает, проверяя значение valid. В обоих случаях в переменную записываются необходимые имена классов (нужно еще раз подключить h3 и text-center, так как позже мы будем их удалять по умолчанию).
Обратите внимание: мы применяем некоторые классы из animate.css. Класс tada применит анимацию при успешной отправке сообщения.
В конце функция удаляет все классы у #msgSubmit, устанавливает классы из переменных и вставляет текст в DIV.
В нашей форме валидации, которую мы редактировали в начале главы, можно добавить следующую функцию в условие, если true.
|
1 |
submitMSG(false, "Проверьте правильность заполнения формы"); |
Теперь, при отправке пустой формы, отобразится сообщение об ошибке «Проверьте правильность заполнения формы». Осталось также вызывать нашу функцию submitMSG при успешной отправке сообщения. Обновим функцию formSuccess():
|
1 2 |
$("#contactForm")[0].reset(); submitMSG(true, "Получено сообщение!") |
Нам необходимо сбросить данные формы и очистить значения полей при успешной отправке, затем вызываем нашу функцию submitMSG, как раньше. При успешной отправке теперь должно отображаться сообщение с эффектом анимации tada из animate.css.
Трясучка
Еще немного анимации, да? Добавим еще одну анимацию, но теперь для всей формы при сообщении об ошибке. «Встряхивание» должно смотреть очень хорошо! Прямо после formSuccess() создайте функцию formError().
|
1 2 3 4 5 |
functionformError(){ $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(this).removeClass(); }); } |
Функция использует метод, найденный на демо странице animate.css, который позволяет добавлять анимацию к элементу и вызывать/добавлять заново ее снова и снова. С CSS анимацией связана одна проблемка, если один раз добавить анимацию к элементу и потом удалить стили, а затем добавить их по новой, то анимация не повторится. Данная функция помогает полностью сбросить классы по завершению анимации, а затем добавить их снова. Когда пользователь пытается отправить не до конца заполненную форму, нам нужно потрясти форму, показывая, что она заполнена не до конца. То же самое и в случае, если форма заполнена неправильно.
Функцию formError() необходимо вызывать над submitMSG(). К примеру:
|
1 2 |
formError(); submitMSG(false, " Проверьте правильность заполнения формы "); |
Теперь, при отправке пустой формы, последняя будет трястись, показывая пользователю, что что-то пошло не так.
Еще больше валидации
Клиентская валидация выглядит превосходно, однако пользователь может отключить ее и отправить пустую форму, отредактировав код в браузере. Поэтому стоит добавить валидацию на стороне сервера. Откройте process.php, нам необходимо немного его изменить, добавить проверку на пустоту полей; Если не пусты, отправляем сообщение обратно на front-end. Создадим переменную $errorMSG, в которую будем записывать ошибки.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php $errorMSG= ""; // ИМЯ if(empty($_POST["name"])) { $errorMSG= "Необходимо ввести имя "; } else{ $name= $_POST["name"]; } // EMAIL if(empty($_POST["email"])) { $errorMSG.= " Необходимо ввести Email"; } else{ $email= $_POST["email"]; } // СООБЩЕНИЕ if(empty($_POST["message"])) { $errorMSG.= "Необходимо ввести сообщение "; } else{ $message= $_POST["message"]; } ?> |
Перед записью в соответствующие переменные данный код PHP проверяет поля на пустоту. Если поля пусты, формируется строка с сообщением и отсылается обратно. Можно проверять еще более тщательно (если значение слишком короткое/длинное, то проверяем на регулярное выражение) в PHP и JavaScript. Однако ради простоты, ограничимся проверкой на пустоту. Необходимо вернуть сообщение в функцию AJAX. Отредактируем условие, описанное раньше внизу файла PHP.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php // редирект с успешной отправкой if($success && $errorMSG == ""){ echo "success"; }else{ if($errorMSG == ""){ echo "Произошла ошибка"; } else{ echo $errorMSG; } } ?> |
В условии мы проверяем переменную $errorMSG на пустоту («») вместе с результатом в переменной $success. По else описана еще одна проверка. Если ошибка в том, что в переменную $success вернулось false, то отсылается «Произошла ошибка». В противном случае отображаем сообщение, сформированное при проверке на пустоту полей.
Последним шагом будет принять новое сообщение в AJAX и отобразить в форме. В файле scripts.js необходимо обновить код в объекте AJAX:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$.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, чтобы посмотреть на весь тот код, который мы написали!
Наша форма обеспечивает обратную связь с пользователями и показывает, какие поля заполнены неправильно или пустые. В форме присутствуют контекстные сообщения, основанные на статусе возвращенного значения из PHP файла. И последним рубежом является проверка на стороне сервера, вылавливая тех пользователей, которые захотели обойти front-end валидацию.
В целом теперь у вас на руках очень живая форма, которую можно легко стилизовать и внедрить в ваш проект. Надеюсь, вам понравился этот урок.
Автор: Aaron Vanston
Источник: //webdesign.tutsplus.com/
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Редакция: Команда webformyself.
Комментарии (4)