Для развития веб проекта очень важно получать обратную связь от посетителей. К сожалению, на многих веб сайтах возможность отправить сообщение разработчикам либо вообще не предоставляется, либо связана с достаточно серьезными трудностями.
Сегодня мы сделаем простое решение данной задачи. Используя jQuery, PHP и класс PHPMailer форма посылает предложение пользователя прямо в ваш почтовый ящик.
HTMLНачнем с разметки HTML. Стили включаются вверху документа, а файлы JavaScript - внизу. Таким образом оптимизируется процесс загрузки страницы, так скрипты грузятся последними, позволяя пользователю увидеть содержание страницы.
demo.htmlФорма обратной связи с использованием PHP и jQuery | Демонстрация для сайта сайт Обратная связь
Пожалуйста, включите контактную информацию, если вы хотите получить ответ.
ОтправитьВнутри body находится div #feedback . Он размещен внизу справа в окне с помощью фиксированного позиционирования, что будет видно в разделе урока, посвященного CSS.
Внутри данного div размещаются пять цветных элементов span . Каждый из них имеет 20% ширины и смещается влево. Таким образом, они размещаются точно на по всей ширине div #feedback .
Затем следует контейнер .section, который содержит заголовок, область текста и кнопку.
Перейдем к заданию стилей для формы. Для начала скажем несколько слов о том, из чего состоит структура таблицы стилей. Если взглянуть на определения CSS, представленные ниже, то можно заметить что каждое правило начинается с #feedback . Таким образом организуется подобие пространства имен в CSS, что облегчает добавление кода к существующему веб-сайту без конфликтов.
styles.css - Часть 1#feedback{ background-color:#9db09f; width:310px; height:330px; position:fixed; bottom:0; right:120px; margin-bottom:-270px; z-index:10000; } #feedback .section{ background:url("img/bg.png") repeat-x top left; border:1px solid #808f81; border-bottom:none; padding:10px 25px 25px; } #feedback .color{ float:left; height:4px; width:20%; overflow:hidden; } #feedback .color-1{ background-color:#d3b112;} #feedback .color-2{ background-color:#12b6d3;} #feedback .color-3{ background-color:#8fd317;} #feedback .color-4{ background-color:#ca57df;} #feedback .color-5{ background-color:#8ecbe7;} #feedback h6{ background:url("img/feedback.png") no-repeat; height:38px; margin:5px 0 12px; text-indent:-99999px; cursor:pointer; } #feedback textarea{ background-color:#fff; border:none; color:#666666; font:13px "Lucida Sans",Arial,sans-serif; height:100px; padding:10px; width:236px; resize:none; outline:none; overflow:auto; -moz-box-shadow:4px 4px 0 #8a9b8c; -webkit-box-shadow:4px 4px 0 #8a9b8c; box-shadow:4px 4px 0 #8a9b8c; }
Первый элемент, для которого задается стиль - это div #feedback . Ему назначается фиксированная позиция и привязка к окну браузера. После него идет определение для div .section и пяти цветных элементов span . Данные элементы отличаются только цветом фона, который назначается отдельно для каждого класса.
В самом низу представленной части CSS файла определяются правила для вывода области текста.
styles.css - Часть 2#feedback a.submit{ background:url("img/submit.png") no-repeat; border:none; display:block; height:34px; margin:20px auto 0; text-decoration:none; text-indent:-99999px; width:91px; } #feedback a.submit:hover{ background-position:left bottom; } #feedback a.submit.working{ background-position:top right !important; cursor:default; } #feedback .message{ font-family:Corbel,Arial,sans-serif; color:#5a665b; text-shadow:1px 1px 0 #b3c2b5; margin-bottom:20px; } #feedback .arrow{ background:url("img/arrows.png") no-repeat; float:right; width:23px; height:18px; position:relative; top:10px; } #feedback .arrow.down{ background-position:left top;} #feedback h6:hover .down{ background-position:left bottom;} #feedback .arrow.up{ background-position:right top;} #feedback h6:hover .up{ background-position:right bottom;} #feedback .response{ font-size:21px; margin-top:70px; text-align:center; text-shadow:2px 2px 0 #889889; color:#FCFCFC; display:block; }
Во второй части таблицы стилей определяется вид кнопки отправки. Отметим, что существует три состояния кнопки, изображения для которых содержатся в одном файле для фонового рисунка - submit.png . Они выводятся только когда необходимо.
Форма обратной связи имеет два состояния - минимизированной и максимальное. При загрузке по умолчанию устанавливается минимизированное состояние внизу справа на экране. А jQuery переводит форму в максимальное состояние, когда пользователь нажимает кнопку мыши на заголовке. Данная функция выполняется с помощью привязки события и выполнения простых анимаций.
script.js - Часть 1$(document).ready(function(){ // Относительный URL скрипта submit.php. // Вероятно, вам нужно будет его поменять. var submitURL = "submit.php"; // Кэшируем объект feedback: var feedback = $("#feedback"); $("#feedback h6").click(function(){ // Значения свойств анимации хранятся // в отдельном объекте: var anim = { mb: 0, // Поле снизу pt: 25 // Отступ сверху }; var el = $(this).find(".arrow"); if(el.hasClass("down")){ anim = { mb: -270, pt: 10 }; } // Первая анимация перемещает вверх или вниз форму, а вторая перемещает // заголовок, так что он выравнивается по минимизированной версии feedback.stop().animate({marginBottom: anim.mb}); feedback.find(".section").stop().animate({paddingTop:anim.pt},function(){ el.toggleClass("down up"); }); });
Для того, чтобы код был простым и понятным, вверху создается объект anim , который содержит значения для анимации, и размещается оператор if . В зависимости ото существования класса ‘down ‘ на стрелке, мы разворачиваем или сворачиваем форму.
Вторая часть script.js обрабатывает работу с AJAX с submit.php .
script.js - Часть 2$("#feedback a.submit").live("click",function(){ var button = $(this); var textarea = feedback.find("textarea"); // Мы используем класс working не только для задания стилей для кнопки отправки данных, // но и как своеобразный замок для предотвращения множественных генераций формы. if(button.hasClass("working") || textarea.val().length < 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // Данная операция помогает пользователю определить ошибку: if(xhr.status == 404){ text = "Путь к скрипту submit.php неверный."; } // Прячем кнопку и область текста, после которой // мы показывали полученный ответ из submit.php button.fadeOut(); textarea.fadeOut(function(){ var span = $("",{ className: "response", html: text }) .hide() .appendTo(feedback.find(".section")) .show(); }).val(""); } }); return false; }); });
Мы используем метод jQuery для AJAX $.ajax() для взаимодействия с submit.php . Данный метод дает немного больше контроля над соединением, чем $.get() и $.post() .
Одним из преимуществ метода является видимость свойств объекта во "всей" возвратной функции. Здесь мы проверяем статус ответа на соответствие ошибке 404 (не найдена страница) , и выводим сообщение пользователю с просьбой проверить путь submitURL .
Теперь пора перейти к завершающей части - PHP.
PHPPHP обрабатывает данные, переданные с AJAX, проверяет их и посылает e-mail сообщение по заданному адресу.
submit.php// Здесь нужно ввести свой адрес $emailAddress = "[email protected]"; // Используем сессию, чтобы предотвратить флудинг: session_name("quickFeedback"); session_start(); // Если последняя форма была отправлена меньше 10 секунд назад, // или пользователь уже послал 10 сообщений за последний час if($_SESSION["lastSubmit"] && (time() - $_SESSION["lastSubmit"] < 10 || $_SESSION["submitsLastHour"] > 10)){ die("Пожалуста, подождите несколько минут, прежде чем отправить сообщение снова."); } $_SESSION["lastSubmit"] = time(); $_SESSION["submitsLastHour"]++; require "phpmailer/class.phpmailer.php"; if(ini_get("magic_quotes_gpc")){ $_POST["message"] = stripslashes($_POST["message"]); } if(mb_strlen($_POST["message"],"utf-8") < 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail(); // Добавляем адрес получателя $mail->AddAddress($emailAddress); $mail->Subject = "Новое письмо из формы обратной связи"; $mail->MsgHTML($msg); $mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "Форма обратной связи на демо странице"); $mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "Форма обратной связи на демо странице"); $mail->Send(); echo "Спасибо!";
Сначала мы используем управление сессиями, чтобы определить, как часто использует пользователь отправку формы в течение последнего часа, а также определяем время, прошедшее с последней отправки. Если с момента последней отправки прошло менее 10 секунд, или пользователь уже посылал более 10 сообщений в течение последнего часа, выводится сообщение об ошибке.
E-mail отправляется с помощью класса PHPMailer . Внимание! Он работает только с PHP5.
Несколько методов PHPMailer используется для конфигурации исходящего e-mail. Метод IsMail() указывает классу использовать внутреннюю функцию PHP mail() . Метод AddAddress() добавляет адрес получателя (вы можете добавить более одного получателя с помощью дополнительных вызовов данного метода). После добавления темы письма и текста указывается адрес для ответов и производится отправка сообщения.
Готово!
ЗаключениеВы можете использовать данную форму для организации быстрой обратной связи с посетителем вашего сайта. Очень низкий барьер перед отправкой - нужно просто заполнить текстовове поле и нажать кнопку - создаст отличные условия для того, чтобы посетители ваших страниц начали делиться своими идеями. Скрипт также хорошо структурирован и прост в настройке, что поможет вам с минимальными усилиями использовать его на своем сайте.
На этом уроке мы познакомимся с функцией 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 . Давайте заполним нашу форму и нажмем кнопку отправить. Не забудьте указать ваш е-майл. Письмо пришло моментально.
Из этой статьи вы узнаете, как сделать форму обратной связи на 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(), которая будет в обратном порядке считать секунды до перенаправления.