Создание Bootstrap контактной формы с помощью PHP и AJAX

Создание Bootstrap контактной формы с помощью PHP и AJAX

От автора: в этом уроке я шаг за шагом расскажу, как создать рабочую контактную форму с помощью всегда популярного front-end фреймворка Bootstrap в сочетании с AJAX и PHP. Мы изучим пару дополнительных возможностей, таких как анимация animate.css, валидация на JavaScript и улучшение пользовательского опыта при работе с асинхронным контентом.

На время написания статьи последняя версия это Bootstrap 3.3.5, стоит отдельно упомянуть, что мы используем стандартный билд 12 колоночной верстки. Перед тем, как продолжить, убедитесь в том, что вы используете самые последние сниппеты, описанные в документации Bootstrap.

Файловая структура

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Освойте наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты

Узнать подробнее

Также надо подключить пару front-end дополнительных библиотек, скачайте или подключите их по внешним ссылкам: Bootstrap, jQuery

Закиньте файлы в нужные папки, в итоге структура выглядит так:

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

Откройте index.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.

Кто не рискует, тот не пьет шампанское

Можно вручную написать код формы или скопипастить его:

Пользователь будет взаимодействовать только с этими полями и кнопками. Родительский 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 и скопируйте следующий код:

Этот кусок кода JQuery ловит событие нажатия кнопки формы с id#contactForm. По этой функции мы парсим переменную события, в которой хранится информация по нажатию кнопки. event.preventDeafult(); останавливает отправку данных из формы, как это было бы по-обычному, так как не указан action формы. В конце вызывается функция submitForm();.

submitForm();

Создадим функцию submitForm();:

Три переменные содержат значения, полученные из формы, данные значения будут использоваться позже.

Создаем объект AJAX и устанавливаем тип запроса POST, URL– ссылка на PHP файл. В data посылается необходимая информация, и при успешной отработке срабатывает функция success. Функция сравнивает возвращенное значение со строкой «success», если все верно, то запускается функция formSuccess.

Функция formSuccess удаляет класс hidden с DIV с id #msgSubmit, показывая текст.

Создание Mail функции PHP

Нам осталось написать код для получения и отправки нашей информации с помощью встроенной функции mail. Откройте process.php и скопируйте следующий код.

Похож на кусок кода 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(). Теперь код выглядит так:

Этот новый кусок кода проверяет, нашел ли Bootstrap Validator какие-то ошибки и остановил процесс. Если нет, то мы продолжаем, как обычно. Не забываем о том, что нам необходимо предотвратить обновление страницы. Теперь, при нажатии на кнопку отправки формы, и если все поля пустые, сработает проверка правильности формы, и поля подсветятся красным. Так просто!

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Освойте наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты

Узнать подробнее

К примеру, ниже к полям имени и почты добавлены дополнительные блоки DIV:

Теперь, при повторной отправке пустой формы, должно появляться сообщение о том, что поля пусты «Пожалуйста, заполните поле». Добавив к инпуту атрибут data-error, можно написать свое собственное сообщение. К примеру:

Существует целый ряд других функций, как регулярные выражения, которые можно применить к валидатору Bootstrap. Посмотреть их можно на Github.

Добавляем анимацию

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

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

Во-первых, удалим текст «Message Submitted!» из верстки и просто оставим DIV пустым:

Теперь необходимо создать новую функцию для обработки статуса сообщения. Добавьте эту функцию в конец scripts.js.

Функция принимает два аргумента: valid Булево выражение, msg содержит сообщение для отображения в блоке DIV. Если valid true, то показывается успешное сообщение и наоборот.

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

Обратите внимание: мы применяем некоторые классы из animate.css. Класс tada применит анимацию при успешной отправке сообщения.

В конце функция удаляет все классы у #msgSubmit, устанавливает классы из переменных и вставляет текст в DIV.

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

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

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

Трясучка

Еще немного анимации, да? Добавим еще одну анимацию, но теперь для всей формы при сообщении об ошибке. «Встряхивание» должно смотреть очень хорошо! Прямо после formSuccess() создайте функцию formError().

Функция использует метод, найденный на демо странице animate.css, который позволяет добавлять анимацию к элементу и вызывать/добавлять заново ее снова и снова. С CSS анимацией связана одна проблемка, если один раз добавить анимацию к элементу и потом удалить стили, а затем добавить их по новой, то анимация не повторится. Данная функция помогает полностью сбросить классы по завершению анимации, а затем добавить их снова. Когда пользователь пытается отправить не до конца заполненную форму, нам нужно потрясти форму, показывая, что она заполнена не до конца. То же самое и в случае, если форма заполнена неправильно.

Функцию formError() необходимо вызывать над submitMSG(). К примеру:

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

Еще больше валидации

Клиентская валидация выглядит превосходно, однако пользователь может отключить ее и отправить пустую форму, отредактировав код в браузере. Поэтому стоит добавить валидацию на стороне сервера. Откройте process.php, нам необходимо немного его изменить, добавить проверку на пустоту полей; Если не пусты, отправляем сообщение обратно на front-end. Создадим переменную $errorMSG, в которую будем записывать ошибки.

Перед записью в соответствующие переменные данный код PHP проверяет поля на пустоту. Если поля пусты, формируется строка с сообщением и отсылается обратно. Можно проверять еще более тщательно (если значение слишком короткое/длинное, то проверяем на регулярное выражение) в PHP и JavaScript. Однако ради простоты, ограничимся проверкой на пустоту. Необходимо вернуть сообщение в функцию AJAX. Отредактируем условие, описанное раньше внизу файла PHP.

В условии мы проверяем переменную $errorMSG на пустоту («») вместе с результатом в переменной $success. По else описана еще одна проверка. Если ошибка в том, что в переменную $success вернулось false, то отсылается «Произошла ошибка». В противном случае отображаем сообщение, сформированное при проверке на пустоту полей.

Последним шагом будет принять новое сообщение в AJAX и отобразить в форме. В файле scripts.js необходимо обновить код в объекте AJAX:

Мы только обновили условие else, проверяющее text == success. По else вызывается функция formError(), которая активирует анимацию тряски. Затем функция submitMSG() отображает текст сообщения из файла PHP. В сообщении записано или «Произошла ошибка» или данные о пустых полях.

Заключение

Перейдите на Github, чтобы посмотреть на весь тот код, который мы написали!

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

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

Автор: Aaron Vanston

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Освойте наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (4)

  1. Владимир

    Спасибо, у меня всё работает. Но я хочу добавить 2 дополнительных поля. Беру переменную «name», копирую её, переименовываю и добавляю в js и php файлы, вроде всё должно работать, но на почту приходит вот что:

    Имя: Владимирsite=undefined
    Сайт:
    Email: Skylikez@mail.rumobile=undefined
    Телефон:
    Сообщение: dasasdwdaw

    • Андрей Кудлай

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

  2. Луиза

    Здравствуйте, почему-то не работает форма, помогите, пожалуйста (((

    • Андрей Кудлай

      Здравствуйте.
      Для того, чтобы решить проблему, — нужно ее хотя бы увидеть. Задайте вопрос на нашем форуме, покажите код, подробнее опишите проблему, указав, что конкретно не работает. После этого можно будет попробовать помочь.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree