Создание Bootstrap контактной формы с использованием PHP и AJAX
Aaron Vanston Last updated Aug 11, 2015
В этой инструкции я собираюсь пошагово рассказать о том, как создать рабочую контактную форму, с использованием самого популярного фреймворка для фронт-энда Bootstrap в комбинации с AJAX и PHP. Также здесь мы рассмотрим некоторые дополнительные возможности, как например, некоторые причудливые CSS-анимации с помощью листа стилей animate.css, последующую проверку формы через Javascript и улучшение общего впечатления конечных пользователей с помощью асинхронного контента.
На момент написания самой свежей версией фреймворка был Bootstrap 3.3.5 и стоит отметить, что в данной инструкции будет использоваться обычная сборка с двенадцатью колонками. В процессе чтения этой инструкции убедитесь, что используете самые последние фрагменты и части кода, как это показано в документации к Bootstrap.
Примерная структура файлов и папок
Первым делом, мы создаем корневую директорию и помещаем в нее следующие файлы и папки:
Нам будет нужно добавить несколько фронт-энд библиотек, которые нам помогут, так что не стесняемся и качаем (или добавляем внешние ссылки на следующие из них:
Предположим, что мы их скачали в локальное хранилище и положили в папку проекта, файловая структура нашего проекта теперь будет выглядеть так:
Задание Основ Формы
Открываем index.html, копируем следующую базовую структуру HTML:
Contact form using Bootstrap 3.3.4 name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> http-equiv="content-type" content="text/html; charset=utf-8" /> rel="stylesheet" href="css/bootstrap.css"> rel="stylesheet" href="css/animate.css"> type="text/javascript" src="js/jquery-1.11.2.min.js"> type="text/javascript" src="js/form-scripts.js"> Это наш базовый HTML шаблон, на основе которого мы будем создавать содержимое формы. Вы можете видеть, что мы связали все необходимые файлы CSS и JavaScript (обратите внимание, что для этого конкретного примера нам не нужен bootstrap.js). Мы включили метатег viewport для облегчения работы с медиа запросами в Bootstrap. JavaScript был прописан в нижней части файла, чтобы сначала загрузилась основная часть формы.
Внутри тега body мы включили div с классом col-sm-6 col-sm-offset-3 . Это в основном означает, что на маленьких экранах sm (small) мы хотим отобразить столбец шириной 50% (максимум 12 столбцов). Класс col-sm-offset-3 добавляет отступ слева 25%, создавая таким образом макет, который занимает половину доступного экрана и выровнен по центру. Здесь мы добавили тег h3 , и это начало основы нашей формы. Убедитесь, что вы применили ID к этой форме, чтобы мы могли позднее связать событие jQuery.
Кто не рискует, тот не пьет шампанское
Создавая элементы формы мы можем скопировать/вставить или написать следующий код в тегах :
type="text" class="form-control" id="name" placeholder="Enter name" required> type="email" class="form-control" id="email" placeholder="Enter email" required> for="message" class="h4 ">Message id="message" class="form-control" rows="5" placeholder="Enter your message" required> type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit id="msgSubmit" class="h3 text-center hidden">Message Submitted! Пользователь будет взаимодействовать со всеми этими полями и кнопками. Родительский div с присвоенным классом row — классический Bootstrap синтаксис, создает строку из элементов col. Столбцы в Bootstrap создают внутренние отступы или интервалы — добавление строки вокруг них приведет к удалению отступов слева и справа и столбцы идеально вписываются в основной контейнер.
Мы создали два столбца с классом col-sm-6 (50%), который мы будем использовать для разделения нашей формы. В первом столбце col-sm-6 мы создали метку и поле для имени, во втором столбце поле для электронной почты. Каждый из них включает метку с соответствующим атрибутом for , ссылающийся на соответствующее поле. Каждый из этих столбцов заключен в класс form-group который семантически группирует метку и поле вместе и также добавляет маленький внешний отступ снизу.
Типографика
Bootstrap позволяет вам использовать классы заголовков H1-H6. Эти классы помогают нам использовать строчные элементы без добавления дополнительных отступов или создания блочных элементов. Мы применили класс H4 к меткам, быстро увеличив их размер и сделав их более понятными.
Класс form-control применяемый к каждому полю ввода, позволяет ему охватывать всю длину контейнера (100%). Он также добавляет различные стили, улучшающие читаемость текста (увеличивая высоту текста, добавляя рамку и т.д.).
После этих столбцов мы добавляем текстовое поле сообщения. Опять же, мы заключаем это внутри класса form-group и применяем похожие стили к нашей метке и текстовому полю, как мы это делали раньше.
Призыв к действию
И наконец, мы добавляем кнопку. В Bootstrap имеется несколько классов для разных кнопок с различными цветами и состояниями. Мы решили использовать кнопку «успех» ( btn-success ), которая по умолчанию имеет зеленый цвет. Кроме того, нам необходимо добавить класс btn для сброса стандартных стилей кнопки (граница, отступы, выравнивание текста, насыщенность шрифта). Мы применили класс btn-lg который увеличивает кнопку и наконец класс pull-right для выравнивания кнопки по правому краю.
После нашей кнопки мы добавили div с идентификатором #msgSubmit и применили следующие классы: » h3 text-center hidden «. h3 создает более крупный заголовок, text-center (как вы уже догадались) делает выравнивание текста по центру, и, наконец, мы установили класс hidden , который устанавливает оба свойства, display в значение none и свойство visibility в значение hidden (display: none; visibility: hidden;).
Добавляем функцию отправки
Как вы можете видеть это в своем браузере, мы создали основу Bootstrap формы. Но пока она абсолютно ничего не делает. Следующим шагом будет создание функции, которая принимает входные данные пользователей и отправляет их асинхронно в наш класс PHP mailer.
Откройте scripts.js и скопируйте следующий код:
$("#contactForm").submit(function(event)
// cancels the form submission