Из этой статьи вы узнаете, как сделать форму обратной связи на PHP для своего сайта. Скрипт будет обрабатывать данные, введённые пользователем, и отправлять результат на нужную вам почту. Мы предусмотрим вариант в PHP, когда форма обратной связи отработает, но при отправке письма возникнет ошибка. В этом случае - всю введённую информацию запишем в файл.
Итак, давайте приступим, первым делом мы разметим страницу и пропишем для неё стили. Разметка будет включать в себя обычную форму обратной связи с двумя input (телефон, почта) и одной текстовой областью, куда, по нашей задумке, пользователь будет вводить своё сообщение. Обработчик формы разместим на отдельной странице.
<div id="feedback-form">
<h2>Форма обратной связи</h2>
<form action="feedbackHandler.php" method="post">
<p>
Введите телефон:
</p>
<input name="number" type="text" required />
<p>
Ваша почта:
</p>
<input name="email" type="text" required />
<p>
Ваш вопрос:
</p>
<textarea name="question" required></textarea>
<br />
<input type="submit" value="отправить" />
</form>
</div>
Пропишем стили:
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[type=text],
#feedback-form textarea{
background-color: #fff;
border: 1px solid #A9A9A9;
padding: 1px 5px;
width: 90%;
}
#feedback-form input[type=text]{
height: 26px;
}
#feedback-form textarea{
height: 75px;
padding-top: 5px;
}
#feedback-form input[type=submit]{
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 = "test@mail.ru";
// Указываем где будут храниться логи
$path_log = "log.txt";
// Время возвращения пользователя на сайт (сек)
$time_back = 3;
Вспомогательные функции
Здесь опишем пять функций, которые упростят обработку данных.
Шаблоны вывода сообщений:
function error_msg($message){
$message = "<h2 style='color: red; font-size: 25px; margin-top: 120px;'>".$message."</h2>";
return $message;
}
function success_msg($message){
$message = "<h2 style='color: green; font-size: 25px; margin-top: 120px;'>".$message."</h2>";
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 = "/^[a-z0-9_][a-z0-9\._-]*@([a-z0-9]+([a-z0-9-]*[a-z0-9]+)*\.)+[a-z]+$/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 = "<html>";
$e_body .= "<body>";
$e_body .= "Телефон: ".$number;
$e_body .= "<br />";
$e_body .= "Почта: ".$email;
$e_body .= "<br />";
$e_body .= "Вопрос: ".$question;
$e_body .= "</body>";
$e_body .= "</html>";
// END Формируем письмо
if(send_mail($my_email, $e_title, $e_body, $prev_page)){
$status_email = "success";
$msg = success_msg("Спасибо за ваш вопрос.<br />Мы ответим вам в ближайшее время.");
}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(), которая будет в обратном порядке считать секунды до перенаправления.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="refresh" content="<?php echo($time_back);?>; url=<?php echo($prev_page);?>" />
<title>Обработчик формы обратной связи</title>
<script type="text/javascript">
function timeBack(){
var time = document.getElementById("time-back");
time.innerText = parseInt(time.innerText) - 1;
setTimeout("timeBack()", 1000);
};
</script>
</head>
<body>
<div style="text-align: center;">
<?php if($msg):?>
<?php echo($msg);?>
<?php endif;?>
<p>
Вы будете возвращены на страницу <b><?php echo($prev_page);?></b> через
</p>
<p id="time-back">
<?php echo($time_back + 1);?>
</p>
<script type="text/javascript">timeBack();</script>
</div>
</body>
</html>
Вот и всё, форма обратной связи готова.