Показать Меню
falbar Форма обратной связи на PHP

Делаем форму обратной связи на PHP

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

Из этой статьи Вы узнаете, как сделать форму обратной связи на 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;
			}

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

HTML форма

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

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

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

Настройка

На этом этапе мы создадим три переменные: 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>

Вот и всё, форма обратной связи готова. Спасибо за внимание.

Подписаться на обновления

Андрей Самойлов
Андрей Самойлов 24 июня 2016 в 13:14
Спасибо
Ответить