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

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееsubject — тема письма;
message — текст письма.
Из опциональных параметров практически всегда используется только первый, который отвечает за заголовки письма: кодировка, отправитель, тип письма и др.
Давайте попробуем отправить письмо, используя данную функцию. Сделаем это в файле mail.php, в котором мы принимаем данные из формы. Новый код данного файла будет таким:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?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 код будет таким:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(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
Узнать подробнее
Комментарии (19)