Как настроить форму обратной связи на сайте

Дата публикации: 2016-09-08

От автора: приветствую вас, друзья. Данная статья будет продолжением статьи, в которой мы реализовывали отправку данных формы на сервер без перезагрузки страницы. Здесь мы продолжим данную тему и узнаем, как принять данные на сервере и реализовать отправку формы на электронную почту (email). Итак, давайте настроим форму обратной связи и добавим возможность ее отправки на email.

Исходные файлы текущей статьи вы можете скачать по ссылке.

В этом уроке мы сделаем все максимально просто и своими силами. В частности, для отправки писем мы воспользуемся специальной функцией PHP под названием mail(), которая раньше часто использовалась для отправки писем.

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

subject — тема письма;

message — текст письма.

Из опциональных параметров практически всегда используется только первый, который отвечает за заголовки письма: кодировка, отправитель, тип письма и др.

Давайте попробуем отправить письмо, используя данную функцию. Сделаем это в файле mail.php, в котором мы принимаем данные из формы. Новый код данного файла будет таким:

<?php

$to = 'mail@site.com'; // адрес получателя
$subject = 'Заказ обратного звонка'; // тема письма
$message = "Имя: {$_POST['name']}\r\n"; // добавляем имя в текст
$message .= "Телефон: {$_POST['phone']}"; // добавляем телефон в текст
$headers .= 'Content-type: text/plain; charset=utf-8' . "\r\n"; // установливаем кодировку
$headers .= 'From: mail@site.com' . "\r\n"; // добавляем отправителя

if( mail($to, $subject, $message, $headers) ){
 echo '<p style="color: green;">Ваше сообщение отправлено</p>';
}else{
 echo '<p style="color: red;">Ошибка!</p>';
}

Это минимальный код, который уже позволит сформировать сообщение для отправки. Давайте проверим, как он работает:

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

Ну а на этом текущую статью мы завершаем. Дополнительно по работе с формами вы можете посмотреть этот урок. Удачи!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3