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

8 ноября 2014 Антон Кулешов 5082 0

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

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

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

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

Настройка

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

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Всплывающие окна на jQuery за 3 минуты

8 сентября 2014 Антон Кулешов

Сегодня я расскажу о том, как сделать всплывающие окна на jQuery потратив на это 3 минуты своего времени. Данное решение будет включать в себя минимум кода.

Авто эффект печатания текста

31 марта 2016 Антон Кулешов

Несколько статей назад, я рассказывал: как написать на JavaScript простую имитацию набора текста на печатной машинке. Воспользовавшись данным эффектом можно, к примеру, выделить важные заголовки на странице. Но при написании скрипта не были учтены маленькие нюансы. В общем, сегодня мы рассмотрим jQuery плагин под название typed. Он будет хорошим инструментом в арсенале веб-разработчика, когда потребуется добавить на сайт эффект набора текста.

jQuery плагин dotdotdot - обрезка длинного текста

29 ноября 2014 Антон Кулешов

Сегодня пойдет речь об инструменте, который позволяет с помощью jQuery обрезать длинный текст до нужного размера. Причем, в результате мы получаем не просто блок с текстом «сколько влезло – столько влезло», а лаконично законченный отрывок длинного текста с тремя точками в конце, указывающими на продолжение. Ко всему, это - довольно распространённая задача. Чаще всего ею занимаются в серверной части движка сайта. Но если вдруг вам потребуется выводить текст в зависимости от высоты блока, то тут может пригодиться плагин dotdotdot.