Створення Bootstrap контактної форми за допомогою PHP і AJAX

17

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

Створення Bootstrap контактної форми за допомогою PHP і AJAX

На час написання статті остання версія це Bootstrap 3.3.5, варто окремо згадати, що ми використовуємо стандартний білд 12 колонковою верстки. Перед тим, як продовжити, переконайтеся, що ви використовуєте самі останні фрагменти, що описані в документації Bootstrap.

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

По-перше, необхідно створити кореневий каталог і включити до нього такі файли і папки:

Створення Bootstrap контактної форми за допомогою PHP і AJAX

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

Закиньте файли у потрібну папку, в результаті структура виглядає так:

Створення Bootstrap контактної форми за допомогою PHP і AJAX

Створення основи форми

Відкрийте index.html і скопіюйте наступний код:

Contact form using Bootstrap 3.3.4
»

Send me a message

Так виглядає наш базовий 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.

Створення Bootstrap контактної форми за допомогою PHP і AJAX

Хто не ризикує, той не п’є шампанське

Можна вручну написати код форми або скопипастить його:

Name
Email
Message

Submit

Message Submitted!

Користувач буде працювати тільки з цими полями і кнопками. Батьківський DIV з класом row – класичний синтаксис Bootstrap, створює рядок з колонок. Колонки в Bootstrap створюють внутрішні відступи або інтервали між стовпцями тексту – обгортання їх у div з класом row прибирає лівий і правий внутрішні відступи, і колонки ідеально вписуються в основний контейнер.

Ми створили дві колонки col-sm-6 (50%), їх ми використовуємо, щоб розбити форму. Всередині першого стовпця col-sm-6 створимо лейбл і инпут для імені, у другому те саме для пошти. Кожен лейбл має свій атрибут for посиланням на певне поле. Кожна колонка поміщена в DIV form-group, семантично об’єднує лейбли і инпуты разом, а також додає маленький зовнішній відступ знизу.

Створення Bootstrap контактної форми за допомогою PHP і AJAX

Типографіка

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 контактної форми за допомогою PHP і AJAX

Додаємо функціонал по відправці форми

У попередній главі ми створили основу Bootstrap форми, але поки що вона абсолютно нічого не робить. Наступним кроком стане створення функції, яка асинхронно відправить дані з полів. Відкрийте scripts.js і скопіюйте наступний код:

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

Цей шматок коду JQuery ловить подія натискання кнопки форми з id#contactForm. За цієї функції ми парсим змінну події, в якій зберігається інформація по натисненню кнопки. event.preventDeafult(); зупиняє відправку даних з форми, як це було б по-звичайному, так як не вказано action форми. В кінці викликається функція 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»);
}

Три змінні містять значення, отримані з форми, ці значення будуть використовуватися пізніше.

Створюємо об’єкт 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 об’єкт. Вся краса в тому, що весь цей процес відбувається асинхронно і виконується на клієнтській стороні, дозволяючи клієнтові користуватися сайтом під час надсилання повідомлення.

Створення Bootstrap контактної форми за допомогою PHP і AJAX

Начищаем до блиску

Вивчивши базову структуру і функціонал нашої форми в першій половині уроку, тепер ми зануримося у практичні питання щодо підтримки зворотного зв’язку з користувачами. Все це ми будемо робити через різні додаткові функції. Зокрема, ми розглянемо форму зворотного зв’язку через обробку помилок, як на стороні клієнта, так і на стороні сервера.
Ще раз, для валідації форми ми будемо використовувати додаткові інструменти. Ось ці: Animate.css, Bootstrap Validator

Додайте їх так само в проект, як раніше додали Bootstrap і jQuery. Ці інструменти забезпечать нам зворотний зв’язок з користувачем, коли він буде відправляти форму. Існує безліч валідаторів форм і фреймворків (в тому числі і нативної HTML5 валідатор), але я використовував «Bootstrap Validator», так як він відмінно вписується в нашу форму. Тепер структура проекту виглядає так:

Створення Bootstrap контактної форми за допомогою PHP і AJAX

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

Почнемо з створення валідатора при натисканні на кнопку форми. Повернемося в файл 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 під инпутом необхідно розмістити наступний код:

Наприклад, нижче до полів імені та пошти додані додаткові блоки DIV:

Name

Email

Тепер, при повторній відправлення порожньої форми, повинно з’являтися повідомлення про те, що поля порожні «будь Ласка, заповніть поле». Додавши до инпуту атрибут data error, можна написати власне повідомлення. Наприклад:

Створення Bootstrap контактної форми за допомогою PHP і AJAX

Існує цілий ряд інших функцій, як регулярні вирази, які можна застосувати до валідатору Bootstrap. Побачити їх можна на Github.

Додаємо анімацію

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

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

По-перше, видалимо текст «Message Submitted!» з верстки і просто залишимо DIV порожнім:

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

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.

submitMSG(false, «Перевірте правильність заповнення форми»);

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

$(«#contactForm»)[0].reset();
submitMSG(true, «Отримано повідомлення!»)

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

Створення Bootstrap контактної форми за допомогою PHP і AJAX

Трясучка

Ще трохи анімації, так? Додамо ще одну анімацію, але тепер для всієї форми при повідомленні про помилку. «Струшування» має дивитися дуже добре! Прямо після formSuccess() створіть функцію formError().

functionformError(){
$(«#contactForm»).removeClass().addClass(‘shake animated’).one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend’, function(){
$(this).removeClass();
});
}

Функція використовує метод, знайдений на демо сторінці animate.css, який дозволяє додавати анімацію до елемента та викликати/додавати заново її знову і знову. З CSS анімацією пов’язана одна проблемка, якщо один раз додати анімацію до елемента і потім видалити стилі, а потім додати їх за новою, то анімація не повториться. Ця функція допомагає цілком скинути класи по завершенню анімації, а потім додати їх знову. Коли користувач намагається надіслати не до кінця заповнену форму, нам потрібно потрясти форму, показуючи, що вона заповнена не до кінця. Те ж саме і у випадку, якщо форма заповнена неправильно.

Функцію formError() необхідно викликати над submitMSG(). Наприклад:

formError();
submitMSG(false, » Перевірте правильність заповнення форми «);

Тепер, при відправці порожньої форми, остання буде трястися, показуючи користувачеві, що щось пішло не так.

Ще більше валідації

Клієнтська валідація виглядає чудово, проте користувач може відключити її і відправити порожню форму, змінити код в браузері. Тому варто додати валідацію на стороні сервера. Відкрийте process.php нам необхідно трохи його змінити, додати перевірку на порожнечу полів; Якщо не порожні, відправляємо повідомлення назад на front-end. Створимо змінну $errorMSG, в яку будемо записувати помилки.

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

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

Останнім кроком буде прийняти нове повідомлення в 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. У повідомленні записано або «помилка» або дані про порожніх полях.

Висновок

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

Наша форма забезпечує зворотний зв’язок з користувачами і показує, які поля заповнені неправильно або порожні. У формі присутні контекстні повідомлення, засновані на статус повернутого значення з PHP файлу. І останнім рубежем є перевірка на стороні сервера, виловлюючи тих користувачів, які захотіли обійти front-end валідацію.

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