Створення Bootstrap контактної форми з використанням PHP і AJAX

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

Final product image — What You'll Be Creating

У цій інструкції я збираюся покроково розповісти про те, як створити робочу контактну форму, з використанням самого популярного фреймворку для фронт-енду Bootstrap в комбінації з AJAX і PHP. Також тут ми розглянемо деякі додаткові можливості, як наприклад, деякі химерні CSS-анімації за допомогою листа стилів animate.css, подальшу перевірку форми через Javascript і поліпшення загального враження кінцевих користувачів за допомогою асинхронного контенту.

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

Орієнтовна структура файлів і папок

Насамперед, ми створюємо кореневу директорію і поміщаємо в неї такі файли і папки:

Bootstrap-Form:
    ├── css/
    ├── images/
    ├── js/ 
        ├── scripts.js
    ├── php/ 
        ├── process.php
    ├── index.html

Нам буде потрібно додати кілька фронт-енд бібліотек, які нам допоможуть, так що не соромимося і качаємо (або додаємо зовнішні посилання на наступні з них:

Припустимо, що ми їх завантажили в локальне сховище і поклали в папку проекту, файлова структура нашого проекту тепер буде виглядати так:

Bootstrap-Form:
    ├── css/
        ├── bootstrap.min.css
    ├── images/
    ├── js/ 
        ├── scripts.js
        ├── bootstrap.js
        ├── jquery-1.11.2.min.js
    ├── php/ 
        ├── process.php
    ├── index.html

Завдання Основ Форми

Відкриваємо index.html, копіюємо наступну базову структуру HTML:

<!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 (small) ми хочемо відобразити стовпець шириною 50% (максимум 12 стовпців). Клас col-sm-offset-3 додає відступ зліва 25%, створюючи таким чином макет, який займає половину доступного екрану і вирівняний по центру. Тут ми додали тег h3, і це початок основи нашої форми. Переконайтеся, що ви застосували ID до цієї форми, щоб ми могли пізніше зв'язати подія jQuery.

the offset will push our DIV 25 from the right

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

Створюючи елементи форми ми можемо скопіювати / вставити або написати наступний код в тегах <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 ми створили мітку і поле для імені, у другому стовпці поле для електронної пошти. Кожен з них включає мітку з відповідним атрибутом 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
    event.preventDefault();
    submitForm();
});

Цей шматок коду є jQuery фрагментом, який приймає функцію відправки в нашому id #contactForm (як задано раніше). З цієї функції ми Парс змінну event, в якій зберігається дія відправлення форми в функцію. Подія event.preventDefault(); зупиняє відправлення даних форми, як зазвичай, щоб оновити сторінку, оскільки не задано дію форми. Нарешті, викликається функція submitForm();.

submitForm();

Потім ми створимо функцію submitForm();:

function submitForm(){
    // Initiate Variables With Form Content
    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, URL- посилання на PHP файл, дані які ми хочемо відправити, і при успішній відпрацювання спрацьовує функція success. Дані включають всі три об'єднані змінні з відповідним ідентифікатором / міткою. Функція зворотного виклику викликається, коли об'єкт Ajax успішно отримує інформацію зі сценарію PHP. Функція порівнює повертається текст і перевіряє, чи рівний він рядку "success". Якщо все вірно, то запускається функція formSuccess.

Функція formSuccess видаляє клас hidden з div з id #msgSubmit, який ми застосували раніше, тим самим показуючи текст.

Підключаємо PHP функцію mail

Нам залишилося написати PHP скрипт для отримання даних і відправлення нашою інформацією за допомогою вбудованої php функції mail. Відкрийте process.php і додайте наступний код:

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$EmailTo = "emailaddress@test.com";
$Subject = "New Message Received";

// prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";

$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";

$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";

// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);

// redirect to success page
if ($success){
   echo "success";
}else{
    echo "invalid";
}

?>

Схоже на фрагмент коду JQuery вище, ми створюємо і зберігаємо змінні, які ми хочемо використовувати. З функції post ми отримуємо три input змінні і записуємо їх значення в такі ж змінні PHP. Змінна $EmailTo - заздалегідь визначений email адреса, який вказується в скрипті і відправляється на вашу пошту з форми. $Subject - це рядок, яка використовується в якості теми листа.

Основа повідомлення створюється з трьох змінних. Спочатку вказується від кого повідомлення "Name:", потім додається символ переходу на новий рядок /n (Новий рядок / розрив рядка). Це повторюється і об'єднується зі змінною $body.

Щоб остаточно відправити повідомлення ми пишемо функцію відправлення повідомлення. У змінну $success ми повертаємо результат відправлення, в яку входить: одержувач, тема, основний текст і відправник.

Щоб ініціювати процес відправлення електронної пошти, ми можемо викликати його в операторі if. Це також допомагає перевірити чи пройшло все успішно чи ні. Якщо функція mail повернула значення "true", скрипт поверне значення "success", а якщо false відповідно "invalid".

Даний результат буде повернений в AJAX об'єкт і оброблений назад на стороні клієнта. Краса AJAX полягає в тому, що все це виконується асинхронно на клієнтській стороні, дозволяючи клієнту користуватися сайтом під час відправлення повідомлення.

Ідеальний порядок

Розглянувши основну структуру і функціональні можливості нашої форми в першій половині цього уроку, ми тепер поговоримо про те, як забезпечити зворотний зв'язок з користувачами за допомогою різних додаткових функцій, які ми можемо додати. Зокрема, ми розглянемо форму зворотного зв'язку через обробку помилок, як на стороні клієнта, так і на стороні сервера.

Ще раз, для валідації форми ми будемо використовувати деякі інструменти. До них відносяться:

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

Тепер структура проекту повинна виглядати приблизно так:

Bootstrap-Form:
    ├── css/
        ├── bootstrap.min.css
        ├── animate.css
    ├── images/
    ├── js/ 
        ├── scripts.js
        ├── bootstrap.js
        ├── jquery-1.11.2.min.js
        ├── validator.min.js
    ├── php/ 
        ├── process.php
    ├── index.html

Перевірка нашої форми

Почнемо зі створення валідатора, щоб перевірити форму при натисканні кнопки. Повернемося до файлу scripts.js, нам потрібно відредагувати перший шматок коду, який викликає функцію submitForm(), коли форма відправлена.

Тепер код виглядає так:

$("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});

Цей новий фрагмент коду перевіряє, чи знайшов Bootstrap Validator якісь помилки і зупинив процес. Якщо це не так, ми продовжимо. Нам все одно потрібно запобігти дію за замовчуванням (оновлення сторінки) при якому зазначається вдале надсилання форми, тому збережемо це.

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

У процесі додавання цієї перевірки ми видалили або заборонили нативную HTML5 перевірку. Можна поліпшити нашу валідацію, включивши повідомлення про помилки. У Bootstrap Validator є відмінна функція, що дозволяє досить легко показати повідомлення про помилки біля кожного поля введення. Щоб додати її, необхідно написати додатковий HTML-код.

У кожній form-group під полями введення необхідно розмістити наступний html-код:

1	<div class="help-block with-errors"></div>

Наприклад, ось додатковий блок div, доданий до полів Name і E-mail:

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

Тепер при повторній відправці форми, якщо поля залишені порожніми, за замовчуванням, має з'являтися повідомлення про помилку "Please fill in this field.". Додавши атрибут "data-error" до поля введення, ви можете додати призначене для користувача повідомлення про помилку. Наприклад:

1	<input type="input" data-error="NEW ERROR MESSAGE">

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

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

Наша клієнтська валідація виглядає дуже добре; у нас є витончена підсвічування порожніх полів червоним кольором. Однак було б непогано додати в форму додаткову анімацію і додати додаткові повідомлення, що дозволяють користувачеві знати, що відбувається. В даний час у нас є повідомлення "Message Submitted!" , яке з'являється при якому зазначається вдале надсилання, але як щодо повідомлення про помилку?

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

Перш за все, давайте видалимо текст "Message Submitted!" з HTML-коду і просто залишимо порожній блок div:

1	<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 буде булева [логічна] змінна: якщо це істина тоді показується успішне повідомлення, якщо брехня то показується повідомлення про помилку. msg містить повідомлення для відображення в блоці div.

По-перше, функція перевіряє, чи має вона успіх або повідомлення про помилку, перевіряючи значення valid. У будь-якому випадку в змінну записуються необхідні імена CSS класів (потрібно ще раз підключити h3 і text-center, так як пізніше ми видалимо їх за замовчуванням).

Примітка: ми використовуємо деякі класи animate.css. Клас tada застосує анімацію при якому зазначається вдале надсилання повідомлення.

Нарешті, функція видаляє всі класи з #msgSubmit (уникайте класів, які конликтують), потім додає класи, встановлені раніше, а потім додає текст повідомлення всередині елемента div.

В нашій формі валідації, яку ми оновили на початку цього розділу, ми можемо додати наступний виклик функції всередині оператора if, коли він дорівнює true.

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

При відправці форми з порожніми полями має з'явитися повідомлення про помилку "Did you fill in the form properly?"

Останнім кроком для цієї нової submitMSG функції - це викликати її при якому зазначається вдале надсилання повідомлення. Оновлення функцію formSuccess() наступним чином:

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

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

Струс

Ще одна анімація, вірно? Давайте додамо ще одну анімацію для всієї форми при повідомленні про помилку, анімаційне "тремтіння" має виглядати дуже добре!

Створіть нову функцію відразу після formSuccess() і назвіть її formError()

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

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

и можемо викликати цю функцію formError() над функцією submitMSG(). Наприклад:

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

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

Додаткова перевірка

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

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

<?php
$errorMSG = "";

// NAME
if (empty($_POST["name"])) {
    $errorMSG = "Name is required ";
} else {
    $name = $_POST["name"];
}

// EMAIL
if (empty($_POST["email"])) {
    $errorMSG .= "Email is required ";
} else {
    $email = $_POST["email"];
}

// MESSAGE
if (empty($_POST["message"])) {
    $errorMSG .= "Message is required ";
} else {
    $message = $_POST["message"];
}

?>

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

Необхідно повернути повідомлення в функцію AJAX, який буде відображатися в браузері. Ми відредагуємо умова if, яке ми створили раніше в нижній частині файлу PHP.

<?php
// redirect to success page
if ($success && $errorMSG == ""){
   echo "success";
}else{
    if($errorMSG == ""){
        echo "Something went wrong :(";
    } else {
        echo $errorMSG;
    }
}

?>

У нашому умови if ми також перевіряємо чи не є змінна $errorMSG порожній (""), яку ми використовували в змінній $success. У нашому умови else ми включили подальшу перевірку. Тут просто перевірка, якщо в змінну $success повернувся результат false, то повертається "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. Повертається текст буде або "Something went wrong :(", або дані про порожні полях.

Висновок

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

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

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