От автора: приветствую вас, друзья. Данная статья будет продолжением статьи, в которой мы реализовывали отправку данных формы на сервер без перезагрузки страницы. Здесь мы продолжим данную тему и узнаем, как принять данные на сервере и реализовать отправку формы на электронную почту (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
Узнать подробнее
Всё вроде верно, но при установке на сайт, форма письма не отправляет. Скрипт не работает.
Причём более простая форма, с перезагрузкой работает без проблем и письма приходят.
Значит, что-то делаете не так, где-то допускаете ошибку.
Спасибо за ответ.
Но копирую все с исходных файлов, интегрируя в свою страницу.
Может быть проблема в конфликте скриптов?
Может быть… здесь можно только гадать, в чем проблема. Точно можно попробовать сказать, только посмотрев проблему.
Спасибо. Буду разбираться.
Пожалуйста. Если разобраться не получится, можно дать ссылку на страницу с формой, возможно что-то получится подсказать.
Спасибо, Андрей! Проблема была в конфликте скрипта со скриптом elastislide.
Я его отключил, и все заработало. Благо слайд этот я не использовал.
А, нет, извините, поторопился — elastislide использую и немало. Получается этот скрипт обратной связи использовать не могу? И почему они конфликтуют?
Сергей, вряд ли они конфликтуют, поскольку конфликтовать там нечему. Скорее, вызов данного скрипта сопровождается ошибкой, которую можно попробовать устранить. Но для этого нужно увидеть страницу с проблемой.
Андрей, я сделал вот что — в файле scripts.js переставил скрипт elastislide после скрипта формы, и снова все заработало. Не знаю, что изменилось в принципе.
Пока я пробовал на тестовой странице и показать нечего. Но задумывал как форму обратной связи (немного переделав, и добавив окно сообщения) из верхнего меню. Все оформлю — покажу. Сайт верстал основываясь на Вашем курсе по Bootstrap, отсюда и elastislide.
Спасибо за отличные уроки для разработчика. Особенно для самоучек.
Отлично! Пожалуйста
Добрый день, Андрей!
Установил форму (обратная связь в верхнем меню) на сайт, и немного видоизменил добавив окно сообщений — textarea.
Всё работает нормально, письма приходят.
Есть один вопрос. Я вероятно что-то не поменял в скрипте, и окно сообщений у меня после отправки не очищается. Как это можно исправить?
km1954.ru
Здравствуйте, Сергей.
Скрипт просто очищает все поля input, а здесь поле textarea. Чтобы очистить и его, можно немного изменить первую строку блока success, вот так:
$('#recall').find('input, textarea').val('');Другой вариант, заменить эту строку такой:
$('#recall')[0].reset();Спасибо Андрей! Попробую, отпишусь.
Спасибо, Андрей! Всё получилось. Единственное, у меня почему-то не выдаёт ошибку при отправке пустой формы. Просто отправляет. Приходит пустое письмо.
Пожалуйста, Сергей.
Для запрета отправки пустой формы — необходима ее проверка на клиенте и сервере. Самый простой и быстрый вариант — добавить для обязательных полей атрибут .
Здравствуйте. Сделала все по инструкции, но при клике на кнопку нет никакой реакции (сайт analiznadom.ru). Подскажите , пожалуйста, где я ошибаюсь?
Вместо этого лучше какие плагины готовые использовать, намного быстрей получится создать форму и установить на сайт, например, Ninja Forms, uCalc, Calculated Fields Form и прочие есть.
Пользуюсь формами от Формдизайнер, быстро и удобно всё настраивается. Также есть плагин для WP, защита формы по куки и ip, капча. Легко добавлять на свой сайт, особо знаний не требуется