Главная Сбербанк

Отдел контроля качества. Делаем форму обратной связи на PHP Скрипты хтмл и пхп для обратной связи

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

Для этого создадим два файла - forma.php и mail.php . В первом файлике будет находиться только форма с полями для ввода пользователем данных. Внутри тега form - кнопка "Отправить" и атрибут action , который ссылается на обработчик - mail.php , именно к нему обращаются данные из формы при нажатии кнопки "Отправить" . В нашем примере данные формы отправляются на веб-страницу с названием «/mail.php» . На этой странице прописан скрипт на PHP , который обрабатывает данные формы:

Данные формы отправляются методом POST (обрабатывается как $ _POST ). $ _POST - это массив переменных, переданных текущему скрипту через метод POST .

Ниже вы видите содержимое файла forma.php , поля которой заполняет сам пользователь на каком-нибудь веб-сайте. Все поля для ввода данных обязательно должны иметь атрибут name , значения мы прописываем сами, исходя из логики.

Форма обратной связи на PHP с отправкой на почту

Форма обратной связи на PHP

Оставьте сообщение:
Ваше имя:

E-mail:

Номер телефона:

Сообщение:

Текстовая область может содержать неограниченное количество символов-->

Так форма визуально выглядет в браузере.

Далее пишем код для файла mail.php . Придумываем сами имена для переменных. В PHP переменная начинается со знака $ , а затем имя переменной. Текстовое значение переменной заключается в кавычки. С помощью переменных на емайл администратора передается содержимое формы, просто подставив в квадратные скобки имя элемента формы - значение name .

Таким образом данные из массива $_POST будут переданы соответствующим переменным и отправлены на почту при помощи функции mail . Давайте заполним нашу форму и нажмем кнопку отправить. Не забудьте указать ваш е-майл. Письмо пришло моментально.

Привет, Друзья! Хочу представить вашему вниманию универсальный скрипт отправки данных из форм на 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. Скрипт разработан командой

Press the download button above. The zip file contains all the code you need for the form.

Unzip the file feedback-form-in-html

Open the file named "handler.php"
Look for sendEmailTo add the email addresses to receive the form submissions.

Upload the whole folder to your website

Open the formpage.html in your browser and test

The sections below explain the code of this form

The HTML Code Feedback

Please provide your feedback below:

How do you rate your overall experience?

Bad Average Good

Comments: Your Name: Email: Post Posted your feedback successfully! Error Sorry there was an error sending your form. CSS Styling The following extra CSS styling is used to make the form look better jQuery Form submission handling $(function() { function after_form_submitted(data) { if(data.result == "success") { $("form#reused_form").hide(); $("#success_message").show(); $("#error_message").hide(); } else { $("#error_message").append(""); jQuery.each(data.errors,function(key,val) { $("#error_message ul").append("

"+key+":"+val+"

"); }); $("#success_message").hide(); $("#error_message").show(); //reverse the response on the button $("button", $form).each(function() { $btn = $(this); label = $btn.prop("orig_label"); if(label) { $btn.prop("type","submit"); $btn.text(label); $btn.prop("orig_label",""); } }); }//else } $("#reused_form").submit(function(e) { e.preventDefault(); $form = $(this); //show some response on the button $("button", $form).each(function() { $btn = $(this); $btn.prop("type","button"); $btn.prop("orig_label",$btn.text()); $btn.text("Sending ..."); }); $.ajax({ type: "POST", url: "handler.php", data: $form.serialize(), success: after_form_submitted, dataType: "json" }); }); }); Form Validations HTML5 validations are used. For example, the Name and Email fields have "required" validation and the email field is of input type "email".

Similarly, the message field (textarea) allows a max length of 6000 characters

using the built-in HTML5 validations has the advantage that the browser itself shows the error message.
You can customize those validations to fit your needs

Server Side Handling Every form requires a server side script to collect the form data and do the processing like send emails, save to database etc. This form comes with a PHP script to handle the form submissions. PHP is widely supported server side scripting platform.

Из этой статьи вы узнаете, как сделать форму обратной связи на PHP для своего сайта. Скрипт будет обрабатывать данные, введённые пользователем, и отправлять результат на нужную вам почту. Мы предусмотрим вариант в PHP, когда форма обратной связи отработает, но при отправке письма возникнет ошибка. В этом случае - всю введённую информацию запишем в файл.

Итак, давайте приступим, первым делом мы разметим страницу и пропишем для неё стили. Разметка будет включать в себя обычную форму обратной связи с двумя input (телефон, почта) и одной текстовой областью, куда, по нашей задумке, пользователь будет вводить своё сообщение. Обработчик формы разместим на отдельной странице.

Форма обратной связи

Введите телефон:

Ваша почта:

Ваш вопрос:

Пропишем стили:

Html, body{ height: 100%; margin: 0; } html{ background-color: #fff; color: #333; font: 12px/14px Verdana, Tahoma, sans-serif; cursor: default; } #feedback-form{ background-color: #ececec; margin: 50px auto 0; text-align: center; width: 430px; padding: 15px; } #feedback-form h2{ margin-bottom: 25px; } #feedback-form input, #feedback-form textarea{ background-color: #fff; border: 1px solid #A9A9A9; padding: 1px 5px; width: 90%; } #feedback-form input{ height: 26px; } #feedback-form textarea{ height: 75px; padding-top: 5px; } #feedback-form input{ margin-top: 15px; background-color: #0B7BB5; border: 1px solid #CCCCCC; color: #FFFFFF; font-weight: bold; height: 40px; line-height: 40px; text-transform: uppercase; width: 225px; cursor: pointer; }

В результате всех этих действий получится вот такая форма:

Теперь пришло время заняться сервером. Наш скрипт будет включать в себя несколько частей:

Настройка;
Вспомогательные функции;
Обработка пришедших данных;
Вывод сообщений.

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

Настройка

На этом этапе мы создадим три переменные: $my_email (почтовый ящик на который отправляются данные), $path_log (путь до файла логов) и $time_back (время возвращение пользователя обратно на сайт).

// Указываем свой почтовый ящик $my_email = "[email protected]"; // Указываем где будут храниться логи $path_log = "log.txt"; // Время возвращения пользователя на сайт (сек) $time_back = 3;

Вспомогательные функции

Здесь опишем пять функций, которые упростят обработку данных.

Шаблоны вывода сообщений:

Function error_msg($message){ $message = "".$message.""; return $message; } function success_msg($message){ $message = "".$message.""; return $message; }

Очистка данных пришедших с формы:

Function clear_data($var){ return trim(strip_tags($var)); }

Отправка письма:

Function send_mail($email, $subj, $text, $from){ $headers = "From: ".$from." \r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=utf-8 \r\n"; $result = mail($email, $subj, $text, $headers); if(!$result){ return false; } return true; }

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

Function check_format($data, $type){ switch($type){ case "email": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match($pattern, $data)){ return true; } break; case "phone": $pattern = "/^(\+?\d+)?\s*($\d+$)?[\s-]*([\d-]*)$/"; if(preg_match($pattern, $data)){ return true; } break; } return false; }

Как видите все написанные нами функции небольшого размера. Можно было их не выносить за приделы обработки данных, но, когда вам потребуется что-то изменить или расширить, например check_format(), это будет гораздо проще и удобнее.

Обработка пришедших данных

Первым делом мы узнаём, с какой страницы пришёл пользователь. Потом определяем переменные, в которых будут храниться наши сообщения и статус отправки письма.

// Узнаем предыдущую страницу $prev_page = $_SERVER["HTTP_REFERER"]; // Наши сообщения $msg = ""; // Статус письма $status_email = "";

Теперь, чтобы не возникло проблем с кодировкой, указываем её при помощи заголовка.

Header("Content-Type: text/html; charset=utf-8");

If($_SERVER["REQUEST_METHOD"] == "POST"){ if(isset($_POST["number"], $_POST["email"], $_POST["question"])){ $number = clear_data($_POST["number"]); $email = clear_data($_POST["email"]); $question = clear_data($_POST["question"]); if(check_format($number, "phone") && check_format($email, "email") && !empty($question)){ // Формируем письмо $e_title = "Новое сообщение"; $e_body = ""; $e_body .= ""; $e_body .= "Телефон: ".$number; $e_body .= "
"; $e_body .= "Почта: ".$email; $e_body .= "
"; $e_body .= "Вопрос: ".$question; $e_body .= ""; $e_body .= ""; // END Формируем письмо if(send_mail($my_email, $e_title, $e_body, $prev_page)){ $status_email = "success"; $msg = success_msg("Спасибо за ваш вопрос.
Мы ответим вам в ближайшее время."); }else{ $status_email = "error"; $msg = error_msg("При отправке письма произошла ошибка."); } // Записываем в файл $str = "Время: ".date("d-m-Y G:i:s")."\n\r"; $str .= "Телефон: ".$number."\n\r"; $str .= "Почта: ".$email."\n\r"; $str .= "Вопрос: ".$question."\n\r"; $str .= "Письмо: ".$status_email."\n\r"; $str .= "==========================\n\r"; file_put_contents($path_log, $str, FILE_APPEND); }else{ $msg = error_msg("Заполните форму правельно!"); } }else{ $msg = error_msg("Произошла ошибка!"); } }else{ exit; }

В написанном коде мы определяем, была ли отправлена форма, в противном случае закрываем этот файл при помощи функции exit. Далее проверяем наличие в массиве POST ячеек с нашими данными, если они пришли, чистим их от возможного мусора. После очистки проверяем форматы почты и телефона, а также наличие текста в переменной вопроса. Далее формируем письмо, отправляем и пишем логии, где, помимо данных, сохраняем статус отправки письма. Так мы сможем отследить работу функции mail() и одновременно не потерять данные.

Вывод сообщений

Нам осталось только оповестить пользователя об успешной или «не очень» выполненной операции и вернуть его обратно на сайт с формой. Для этого мы используем разметку с включениями PHP скрипта.

Для перенаправления пользователя обратно на сайт, мы воспользуемся метатегом refresh, где делаем вставки PHP кода уже с созданными переменными. Ещё нам потребуются немного использовать JavaScript, чтобы сделать страницу чуть динамичней. Пишем функцию timeBack(), которая будет в обратном порядке считать секунды до перенаправления.