Як налаштувати форму зворотного звязку на сайті

131

Від автора: вітаю вас, друзі. Дана стаття буде продовженням статті, в якій ми реалізовували надсилання даних форми на сервер без перезавантаження сторінки. Тут ми продовжимо цю тему і дізнаємося, як прийняти дані на сервері і реалізувати відправку форми на електронну пошту (email). Отже, давайте налаштуємо форму зворотного зв’язку і додамо можливість її відправки на email.

Вихідні файли поточної статті ви можете завантажити за посиланням.

У цьому уроці ми зробимо все максимально просто і своїми силами. Зокрема, для відправки листів ми скористаємося спеціальною функцією PHP під назвою mail(), яка раніше часто використовувалася для відправки листів.

Почнемо з синтаксису функції mail. Дана функція має три обов’язкових параметра і два опціональних (не обов’язкових). Обов’язкові параметри:

to — email одержувача (також можна вказати кілька адрес, перерахувавши їх через кому);

subject — тема листа;

message — текст листа.

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

Давайте спробуємо відправити лист, використовуючи дану функцію. Зробимо це у файлі mail.php, в якому ми беремо дані з форми. Новий код даного файлу буде таким:

Ваше повідомлення надіслано

‘;
}else{
echo ‘

Помилка!

‘;
}

Це мінімальний код, який дозволить сформувати повідомлення для відправки. Давайте перевіримо, як він працює:

Як налаштувати форму зворотного звязку на сайті

Як бачимо, код працює, у відповідь ми отримуємо повідомлення про те, що лист надіслано. Оскільки ми працюємо на локальному сервері, тут листи реально не відправляються функцію mail(), вони зберігаються у вигляді текстового файлу в спеціальній папці. В Open Server це папка \userdata\temp\email\. Відкриємо цю папку і переконаємося, що лист там є, приблизно так воно буде виглядати:

Як налаштувати форму зворотного звязку на сайті

Відмінно! Залишилося кілька моментів, які не завадить поправити JS скрипті. Наприклад, необхідно виводити повідомлення не простим текстом, а саме HTML-кодом, а також очищати поля форми після надсилання повідомлення. Підсумковий JS код буде таким:

$(function(){
$(‘#recall’).submit(function(e){
e.preventDefault();
var data = $(this).serialize();
$.ajax({
url: ‘mail.php’,
type: ‘POST’,
data: data,
beforeSend: function(){
$(‘#submit’).next().text(‘Відправляю…’);
},
success: function(res){
$(‘#recall’).find(‘input’).val(«);
$(‘#submit’).next().html(res);
},
error: function(){
alert(‘Помилка!’);
}
});
});
});

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

Як налаштувати форму зворотного звязку на сайті

Як бачимо, все працює. Однак на практиці функцію mail використовувати для відправлення повідомлень не завжди вийде. Деякі хостери не надають послугу відправки листів, часто листи, відправлені з хостингу, потрапляють у спам або не доставляються до адресата. У цьому випадку рекомендується відправляти листи через SMTP популярних поштових серверів: gmail, yandex і т. п. Як це зробити ми дізнаємося в наступній статті.

Ну а на цьому поточну статтю ми завершуємо. Додатково по роботі з формами ви можете подивитися цей урок. Удачі!