Веб-дизайн и поисковая оптимизация. Форма обратной связи на PHP с отправкой на e-mail

Обновлено 12.12.2015 г.

Несмотря на то, что тема отправки почтовых сообщений прямо со страниц сайта уже достаточно избита, но судя по письмам, которые я получаю от посетителей своего сайта, делаю вывод, что у многих еще имеются пробелы знаний в этих вопросах.

Итак, в этом уроке мы научимся делать форму отправки почтовых сообщений со страниц сайта с проверкой на правильность ввода данных . Т.е. если какое то поле формы будет не заполнено, то скрипт выдаст ошибку и сообщит об этом посетителю. Пример работы такой формы Вы можете увидеть . Если Вы заполните эту форму и нажмете кнопку: Отправить сообщение , то я получу Ваше послание.

Преимущество такой отправки сообщений очевидны:

1. Вам не нужно "светить в Интернете" свой почтовый адрес, а значит он не попадет к спамерам.

2. Если посетитель хочет задать Вам вопрос или что-то спросить ему не нужно, копировать адрес электронной почты, открывать свой почтовый клиент, писать сообщение и т.д. Посетитель быстро заполнит в форме нужные данные и отправит Вам сообщение.

3. При такой организации обратной связи с посетителями, вероятность доставки Вам сообщения почти 100%, особенно если почтовый адрес привязан к вашему домену. Ведь из длинной почтовой цепочки исключаются промежуточные узлы. А значит надежность доставки почты резко повышается.

Как создать форму отправки сообщений?

Как правило подобные скрипты состоят из двух частей и код расположен в двух разных файлах:

  • Первый файл - это сама форма, в которой заполняются данных сообщения.
  • Второй файл - это файл-обработчик, который получает данные из формы (первого файла) и отправляет по указанному в скрипте эл.адресу. Но работают эти части скрипта всегда обязательно в паре.

Первую часть скрипта мы выносим в отдельный файл и назовем его: mail.php . В этом файле будет располагаться форма ввода данных. Имя файла mail.php я взял условно, Вы можете назвать этот файл как угодно. Это файл может иметь и другое расширение, например .html .

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

Итак, создаете новый файл, присвойте ему имя: mail.php или mail.html и вставляете в него код Листинга 1 .

Листинг 1









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



Ваше имя:


Ваш e-mail:


Ваше сообщение:




Это самая простая форма, состоящая всего из 3-х полей для ввода данных. Эти поля я назвал: Ваше имя , Ваш e-mail , Ваше сообщение . При необходимости количество полей можно увеличить.

Первых два поля: Ваше имя , Ваш e-mail , описываются тегами:

Ваше имя:

но каждому из них присваивается свое имя, которое называетмя идентификатор : name="name" и name="email" соотвественно.

Третье поле для ввода сообщения описано тегами:

Ваше сообщение:

Данное поле имеет идентификатор: name="mess" .

И естественно имеется две кнопки: Отправить сообщение и Очистить форму .

Данным (информации), которые посетитель заносит в форму, присваиваются соотвествующие идентификаторы: name , email и mess , запоминайте - это важно!

Для удобства оформления вся форма помещена в обычную таблицу, внешний вид, которой можно оформить с помощью , у меня это класс: class="td_border" , его я здесь не привожу, при необходимости допишите сами, на свой вкус.

Файл обработчик.

Вторая часть скрипта состоит из файла обработчика: mail2.php , в который методом POST передаются все данные с соответствующими идентификаторами: name , email и mess . Здесь эти данные помещаются в переменные: $name , $email , $mess .

Создаем файл mail2.php и прописываем в него код Листинга 2 :

Листинг 2

$name = $_POST["name"];
$email = $_POST["email"];
$mess = $_POST["mess"];

$REMOTE_ADDR = $_POST["REMOTE_ADDR"];

if (isset ($name))
{
$name = substr($name,0,20); //Не может быть более 20 символов
if (empty($name))
{
echo "Не указано имя!!!

";
echo "";
exit;
}
}
else
{
$name = "не указано";
}

if (isset ($email))
{
$email = substr($email,0,20); //Не может быть более 20 символов
if (empty($email))
{
echo "Не указан e-mail !!!

";
echo "Вернуться и правильно заполнить форму.";
exit;
}
}
else
{
$email = "не указано";
}

if (isset ($mess))
{
$mess = substr($mess,0,1000); //Не может быть более 1000 символов
if (empty($mess))
{
echo "Сообщение не написано!!!

";
echo "Вернуться и правильно заполнить форму.";
exit;
}
}
else
{
$mess = "не указано";
}

$i = "не указано";
if ($name == $i AND $email == $i AND $mess == $i)
{
echo "Внимание! Произошла ошибка! Вы не заполнили поля сообщения!";
exit;
}

$to = "admin@сайт ";
$subject = "Сообщение с сайта сайт ";
$message = "Имя пославшего письмо: $name .\nЭлектронный адрес: $email\nСообщение: $mess .\nIP-адрес: $_SERVER";
mail ($to,$subject,$message,"Content-type:text/plain; charset = windows-1251 ") or print "Не могу отправить письмо!!!";
echo "Спасибо за отправку Вашего сообщения.

Для меня это очень важно!

В ближайшее время Вы обязательно получите ответ.";
exit;
?>

В этом файле происходит проверка введенных посетителем сайта в форму данных, и последующая отправка сообщения по указанному адресу электронной почты.

При незаполненных полях или заполненных некорректно, скрипт вернет посетителю сообщение с указанием конкретной причины.

Обращаю Ваше внимание, что файл: mail2.php обязательно должен иметь расширение .php , т.к. отправка сообщения осуществляется с помощью функции mail PHP .

И естественно ваш Хостинг, должен поддерживать работу PHP. Это в основном касается бесплатных хостингов, хотя в последнее время даже на бесплатных Хостингах практически везде установлен PHP.

В коде Листинга 2 все просто, исправьте все значения, выделенные красным под свои требования, а именно:

  • пропишите свой адрес электронной почты , на который будут отправляться сообщения (переменная $to );
  • исправьте тему сообщения (переменная $subject );
  • обратите внимание на кодировку (charset = windows-1251 ). Кодировку пропишите ту, которая используется на вашем сайте. В русскоязычном интернете кодировка может быть: "utf-8" или "windows-1251" . Если ошибетесь с кодировкой текст в письме будет отображаться неправильно (кракозябрами).

Вот собственно говоря и все, теперь осталось закачать файлы: mail.php и mail2.php и на вашем сайте появится удобная форма для отправки сообщений.



Комментарии к этой статье (уроку):

Спасибо за урок. Вот правду говорят, что все приходит вовремя. Сегодня собиралась искать в инете как сделать форму контакта для сайта, причем независимую. Я так понимаю, что эта подойдет.

Хороший урок! Спасибо!

Спасибо Андрей, хороший урок.

Благодарствую, думаю пригодится

Вам пишет Савин Дмитрий Александрович (SAVIN DMITRY ALEXANDROVICH) ,хочу узнать все по подробнее о формах в CSS , я мало обэтом осведомлен: поподробнее о свойстве action , как я знаю action это ссылка на документ, куда отсылается запрос данных либо сами данные с формы, или что-то в этом роде.method="post" обработка данных в наибольших размерах нежели чем get и т. д.Пожалуйста подробнее о формах у меня в них почти просак.

Здравствуйте Андрей! С уважением к Вам Ахмад. Вот я тоже хочу на сайте создать "Добавить Ваш комментарий" чтобы посетители могли оставить свои Отзывы.Какой код писать мне? Спасибо Вам мне понравилось.Ахмад

Красавчик! очень полезная инфа!

Полезно, то полезно, но н запускаетсяю. После заполнения формы выдается листинг mail2.php

Полезно, то полезно, но не запускается. После заполнения формы выдается листинг mail2.php

Все хорошо работает, только кнопочки не получаются объемными как у автора. Может кто-то подскажет, как сделать объемные кнопочки? Автору спасибо!

а у меня не работает. точнее работает на половину. письмо отправляет, но пустое. данные из майл1 не переходят в майл2

На маил не приходит.В чем подвох? Я не пойму как он без логина и пароля чегонибуть отправит. Это что сервер почтовый типа? Простая форма и все

Спасибо за форму! Работает! У кого не работает - внимательно выполняйте каждый шаг. У меня тоже не сразу всё получилось. Андрей, ещё раз спасибо!

Помогите плиз, форму вставила всё вроде бы Ок, но на почту которую я указала сообщение не доходит, хотя и пишется сообщение отправлено...

Подскажите, а как сделать так, чтоб после отправки/неудачной отправке письма не открывалось новое окно а писалость в старом?

Андрей. Я понимаю, что обработчик вызывается. Я пока не особо в php разбираюсь. Но мне вот чего бы хотелось достич: страница с почтовой формой одна,т.е. после нажатия "Отправить сообщение" новое окно не открывается, а изменяется текущая страница. Т.е я так понимаю она динамическая. Самой пока не додуматься как сделать такое, поэтому спрашиваю совета.

Андрей, подскажите пожалуйста, форма замечательно работает в хроме, а вот с эксплорером проблема. Не доставляются письма и не выводятся сообщения об ошибках или отправке. В чем тут дело? Заранее спасибо

Классный урок! Спасибо!

Спасибо. Всё отлично работает)

в коде нет закрывающих тегов /p. Почему?

Warning: mail(): "sendmail_from" not set in php.ini or custom "From:" header missing in E:Roomsu362571transport-online.netwwwmail.php on line 66 Не могу отправить письмо!!! Во - как получается Как быть??

не могу разобраться с кодировкой. Если прописывать windows-1251 - текст скрипта в сообщении нормальный, сам текст сообщения на почту приходит крокозяброй. а если ставить utf-8 - текст скрипта в сообщении на почте - знаки вопроса, а текст сообщения из формы - нормальный. как сделать, что б и то и то нормальным было?

у меня неработает, но сайт еще не на хостинге, когда помещу-будет?

Все работает, спасибо за скрипт! Поскажите пожалуйста как сделать что бы при нажатии кнопки отправить не открывалась новая страница с обработчиком. Что бы сайт оставался на той странице где и был до нажатии кнопки отправить?

а как сделать поле ввода майл выше?

Если необходимо отправить письма на несколько адресов, просто через запятую дописываете нужные адреса вот так: $to = "admin@сайт, [email protected], [email protected]";

А как сделать чтобы после отправки сообщения была переадресация на другую страницу?

есть $to = "admin@сайт"; вопрос: если необходимиа отправка на 2-а адреса! один из адресов в виде $to = "$email"; другими словами функционал "посоветовать другу" с дублированием послания на мной заданную почту. Спасибо.

У меня почему-то форма обратной связи не работает, причём, никакая не работает. Делает вид, что сообщение отправлено, но на почту оно не приходит.

Здравствйте! Обьясните пожалуйста, почему не работает на хостинге, пишет: "Не могу отправить письмо". А на lockalhost на Денвере работает нормально. В чём проблема?...

почему у меня не одна формнеа не пашет пишет

Большое спасибо. Очень все просто и доступно. Я использовал Ваш пример на сайте gosdogovor.ru. Только немного подточил дизайн под себя и состав полей: http://www.gosdogovor.ru/easuzcon.html. Еще раз спасибо.

Ребят, если вы пытаетесь отправить сообщение с вашего локального сервера, тобишь с сайта еще не размещенном в инете, - у вас ничего не получится. Разместите на каком-то хостинге, и будет вам счастье)

Андрей, а как сделать так стобы при нажатии на кнопку отправлялось сообщение с определенным текстом на определенный адрес? Помогите пожалуйста: [email protected]

Привет, Друзья! Хочу представить вашему вниманию универсальный скрипт отправки данных из форм на email . Скрипт идеально подойдет для сайтов типа Landing Page , сайтов визиток и т.д. Наш скрипт Формы обратной связи выделяется среди массы остальных скриптов в интернете тем, что имеет возможность подключения неограниченного количества форм с разными полями на одной странице и способен отправлять письма нескольким получателям .

Итак. Давайте приступим. Начнем пожалуй с возможностей скрипта.

  • Подключение неограниченного количества форм на одной странице.
  • Проверка правильности заполнения полей.
  • Настройка уведомлений.
  • Возможность использования писем для каждой формы.
  • Тип письма - (если используются html теги)
  • Отправка на неограниченное количество адресов.
  • Индивидуальная настройка каждой формы.
  • Скрипт работает на , без перезагрузки страницы.
  • Защита от спам ботов.
  • Первоначальная настройка.
    Скрипт работает на основе библиотеки , поэтому первое что нам необходимо сделать это подключить ее. Для этого рекомендую воспользоваться Google Hosted Libraries.

    О остальных файлах давайте подробнее:

    feedback.js - основной файл скрипта, отвечает за AJAX отправку формы .
    jquery.arcticmodal.js,
    jquery.arcticmodal. - обеспечивают возможность вывода форм в модальном окне.
    jquery.jgrowl.js,
    jquery.jgrowl.css - позволяют выводить уведомления на странице (блоки в верхнем углу страницы).

    HTML и обязательные атрибуты.
    Обязательным атрибутом для всех элементов формы является атрибут name="" - необходим для последующей настройки формы.
    Для кнопки (type=«button») обязательно нужно указать class=«feedback» . Так же хочу обратить ваше внимание на то, что в качестве кнопки может выступать любой html тег с классом «feedback».Вызов формы в модальном окнеДля вызова формы в модальном окне сперва нужно определить действие по нажатию на какой либо тег, например div с классом modal_btn
    Вызов формы в модальном окне $(document).ready(function() { $(document).on("click", ".modal_btn", function(){ $("#small-modal").arcticmodal(); }); });
    Так как форма должна быть видна только в модальном окне ее нужно скрыть, поместив в div с атрибутом style=«display: none;», а также для стилизации модального окна обернуть в парочку стандартных дивов.
    x

    Вот мы и разобрались с основными настройками подключения нашего скрипта отправки форм на E-mail. Давайте теперь заглянем во внутрь и разберемся с настройкой полей, уведомлений да и всего остального, что там есть.

    Пример настроек для одной формыНастройки всех форм хранятся в файле feedback\index.php
    $form["form-1"] = array("fields" => array("name" => array("title" => "Имя", "validate" => array("preg" => "%%", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "Поле [ %1$s ] возможно содержит ошибку", "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s", "maxlength" => "Максимальная длинна поля [ %1$s ] превышает допустимую - %2$s",)), "tell" => array("title" => "Телефон", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{5,10}$/", "minlength" => "5",), "messages" => array("preg" => "Поле [ %1$s ] возможно содержит ошибку", "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s",)),), "cfg" => array("charset" => "utf-8", "subject" => "Тема письма", "title" => "Заголовок в теле письма", "ajax" => true, "validate" => true, "from_email" => "[email protected]", "from_name" => "noreply", "to_email" => "[email protected], [email protected]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77", "antispamjs" => "address77", "okay" => "Сообщение отправлено - OK", "fuck" => "Сообщение отправлено - ERROR", "spam" => "Cпам робот", "notify" => "color-modal-textbox", "usepresuf" => false)); // Следующая форма $form["form-2"] = array("fields" => array(.....
    Для добавления настроек новой формы, нужно по примеру массива $form["form-1"] создать новый массив $form[""]

    Помните я говорил о обязательном атрибуте name="" ?

    Обязательным атрибутом для всех элементов формы является атрибут name="" - необходим для последующей настройки формы.
    Так вот пришло время рассказать для чего же он все таки нужен.
    name="" - это буквенно-цифровой ключ для массива, должен быть уникальным для массива $form[""]

    Пример html кода для наглядности

    Теперь давайте разберемся с массивами и для чего они нужны.

    $form["form-1"] = array();
    $form["form-2"] = array(); и т.д.
    Это основные массивы для каждой новой формы, содержат в себе:

  • "fields" => array(); - Массив настроек элементов формы.
    • "name" => array(); - Массив настроек элемента формы (например input name=«name» type=«text» ) который имеет ряд настроек.
      • "title" => "Ваше имя" - название элемента формы, будет выводится при ошибках или в шаблоне
      • "validate" => array(); - массив, содержит правила валидации элемента формы
        • "preg" => "%%" - регулярное выражение
        • "minlength" => "3" - минимальный размер поля
        • "maxlength" => "35" - максимальный размер поля
        • "substr" => "35" - всегда обрезать до N символов
      • "messages" => array(); - массив, содержит сообщения валидации, а именно:
        • "preg" => "Элемент формы не соответствует регулярному выражению"
        • "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s" - ошибка валидации, ключ(preg) не соответствие ключу валидации
        • "maxlength" => "Максимальная длинна поля [ %1$s ] превышает допустимую - %2$s" - ошибка валидации, ключ(preg) не соответствие ключу валидации
  • "cfg" => array(); - Массив настроек формы.
    • "charset" => "utf-8" - кодировка
    • "subject" => "Тема письма", - Тема письма
    • "title" => "Заголовок в теле письма", - Заголовок в теле письма
    • "ajax" => true, - это аякс форма TODO (если не нужно, поставить - false)
    • "validate" => true, - (true) если хотим валидацию формы на сервере, заменяет js валидацию при "ajax" => true. Когда выкл(false) то можно не задавать настройки validate полей. TODO
    • "from_email" => "myemail", - отправитель, указать имя поля(name=«myemail»), а если не нужно email от пользователя, тогда заглушку [email protected]
    • "from_name" => "myname", - отправитель, указать имя поля(name=«myname»), а если не нужно имени пользователя, тогда заглушку No-reply
    • "to_email" => "[email protected]", - email получателя. Для отправки на несколько адресов перечислить их через запятую. Пример ("to_email" => "[email protected], [email protected], [email protected]",)
    • "to_name" => "noreply1", - Имя получателя. При отправке на несколько адресов через запятую перечислить имена получателей. Пример ("to_name" => "noreply1, noreply2, noreply3",)
    • "geoip" => true, - узнать местоположение по типу TODO
    • "referer" => false, - добавлять URL страницы с которой была отправлена форма
    • "type" => "plain", - тип письма - plain, html (если используются html теги)
    • "tpl" => false, - использовать шаблон письма. Если true, то будет подключен файл шаблона, в соответствии с именем формы (name=«form-1»), из папки и обработан файл (feedback/tpl/form-1.tpl), в противном случае будет отправлено все как есть, каждое поле с новой строки
    • "antispam" => "email77", - Анти спам, метод основан на скрытом (display:none) поле, которое автоматом заполняет только робот, тем самым выдает себя.
    • "antispamjs" => "address77", - Анти спам, метод основан на скрытом (display:none) поле, изначально заполненное, которое автоматически очищает javascript при загрузке страницы, даже умный робот не может это предвидеть, и тогда он блокируется.
    • "okay" => "Сообщение пользователю", - Сообщение пользователю, выводится при условии успешно отправленной формы, можно использовать html теги.
    • "fuck" => "Сообщение пользователю", - Сообщение пользователю, выводится при возникновении ошибки отправки формы, можно использовать html теги.
    • "spam" => "Сообщение пользователю", - Сообщение пользователю, выводится при подозрении на спам робот, можно использовать html теги.
    • "notify" => "color-modal", - какой тип уведомлений показывать, textbox - блоки в верхнем углу страницы, color - цветная подсветка в форме, modal - модальное окно в центре страницы, none - отключить. Можно совмещать, пример: color-modal - ошибки заполнения подсветкой полей, а текстовый статус отправки в модальном окне TODO
    • "usepresuf" => false - Используется ли кастомное добавление к теме либо к заголовку письма, на случай не большого изменения можно указать например %%cfg.title.suffix%%, для этого в форме должно быть скрытое поле, подробнее, см. ф-цю presuf()
  • Настройка шаблонов писемИтак. давайте теперь разберемся с темизацией наших сообщений.
    Во-первых, для того, что-бы форма была отправлена в шаблоне, в настройках формы нужно включить использование файла шаблона - "tpl" => true ,
    Во-вторых, нужно создать файл шаблона с расширением *.tpl в папке (feedback/tpl/ ), в соответствии с именем формы (name=«form-1» ).

    Пример: (feedback/tpl/form-1.tpl )

    Заголовок в теле письма
    %%name.title%% %%name.value%%
    %%tell.title%% %%tell.value%%

    name , tell и т.д. - Это атрибуты (name="") полей которые заполняет пользователь.
    title - Название элемента формы, которое задается в массиве настроек элементов формы.
    value - Значение элемента формы.

    На сегодня пока все, но скрипт конечно же не идеален, так что комментарии и описания багов приветствуются и в следующих версиях будут исправлены.

    P.S. Скрипт разработан командой

    Дата добавления: 2011-12-01

    

    Рассмотрим пример отправки сообщения с сайта на ваш электронный адрес. Зачем это нужно? Предположим, у вас на странице есть поле для комментариев, и вам нужно оперативно узнавать, что кто-то оставил комментарий. Не будете же вы каждую минуту заходить на свой сайт и проверять наличие новых комментариев.

    Сам процесс создания формы и отправки письма несложен. Но есть некоторые моменты, которые могут испортить настроение на целый день.

    Первая трудность - глупый и устаревший стандарт для писем на русском языке. Из-за него к вам на почту могут приходить письма с "кракозябрами". Особенно эта проблема заметна на почтовых клиентах типа Windows Mail, Outlook Express и т.д. Если читать письма через веб-интерфейс, то проблема не так актуальна. Многие почтовые сервера достаточно умны, чтобы корректно отобразить письмо.

    Вторая проблема - нежелательные письма. Некоторые "альтернативно" одаренные личности могут без конца нажимать на кнопку отправления писем (флуд). К ним можно также отнести ботов - специально написанные программы, которые сами нажимают на кнопки.

    Третья проблема - защита от уязвимостей. Если на сайте можно что-то вводить, значит существует вероятность взлома. Например, вы просите ввести в поле электронный адрес для регистрации, а хакер вводить специально заготовленный зловредный скрипт, который можно попортить вам сайт.

    Если описанные трудности вас не успугали и вы хотите получать сообщения с сайта, то продолжим...

    Начнем с простейшего примера без наворотов.

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

    Мы только что создали форму с двумя текстовыми полями и кнопкой. Обратите внимание, что у формы мы определили метод post и указали в параметре action путь к обработчику формы - mail.php. Естественно, вы можете указать свой адрес и другое имя для файла.

    Теперь создадим файл mail.php (в нашем примере он должен находиться в той же папке).

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

    Укрепляем оборону

    В описанном примере есть минимальная защита в виде функции htmlspecialchars . Еще одной формой защиты может стать использование сессий.

    В самом начале первого файла введите следующее.