Случайный выбор победителя «Вконтакте»

Мы выражаем благодарность всем тем людям, которые в большей или меньшей степени помогают развитию проекта. Тем, что задает нам интересные вопросы и указывает на ошибки в работе нашего сайта. Спасибо вам!

Если у вас есть темы для будущих статей, другие вопросы или предложения – прислать их вы можете через форму обратной связи.

Артем Мáлков
316 просм
0 комм
Поделиться

Простая форма обратной связи на PHP + AJAX

Я много видел разных мудреных реализаций форм обратной связи. Думаю, что даже заядлый программист не сразу разберется в работе такого кода. А зачем, собственно говоря, усложнять работу, если все можно сделать как никогда просто, не так ли?

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

Сегодня я хотел бы показать самую простую и на 100% рабочую реализацию формы обратной связи.

Под простотой я подразумеваю наличие лишь текстовых полей. По желанию, вы можете внедрить чекбоксы, селекты, прикрепление файлов и даже свою капчу.

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

Поскольку для отправки формы мы будем использовать PHP, то не стоит делать акцент на том, что на вашем хостинге должна быть его поддержка.

1. Первым делом сверстаем форму с нашими полями. CSS-стили мы упустим, так как сейчас нам это не так важно. В качестве полей сделаем «Имя», «E-mail» и поле для ввода сообщения:

<div>Ваше Имя:</div>
<input type="text" name="name" id="name" value="">

<div>Ваш E-mail <span>*</span>:</div>
<input type="text" name="email" id="email" value="">

<div>Сообщение <span>*</span>:</div>
<textarea name="message" id="message"></textarea>

<div class="result"></div>
<a href="javascript: void(0);" id="submit">Отправить</a>

Обратите внимание на элемент с классом «result» – в него мы будем выводить сообщения об ошибках или успешном отправлении сообщения.

2. Далее пишем скрипт, который соберет все данные с формы и отправит их в наш PHP-обработчик:

<script>
	$(document).ready(function(){
		$('#submit').click(function(){
			var name = $('#name').val(); // Получаем имя
			var email = $('#email').val(); // Получаем e-mail
			var message = $('#message').val(); // Получаем сообщение
			$.ajax({
				url: "/form.php", // Куда отправляем данные (обработчик)
				type: "post",
				dataType: "json",
				data: {
					"name" : name,
					"email" : email,
					"message" : message
				},
				success: function(data){
					$('.result').html(data.result); // Выводим результат
				}
			});
		});
	});
</script>

Скрипт вставляем перед закрывающим тегом </body>. После того, как мы напишем обработчик, не забудьте в этом скрипте прописать корректную ссылку до него.

3. Ну и собственно последним шагом будет написание обработчика:

<?php
	header("Content-Type: text/html; charset=utf-8");

	$msg_result = "";
	$errors = array();

	$email = $_POST['email'];
	$pattern = "|^([a-z0-9_\.\-]{1,20})@([a-z0-9\.\-]{1,20})\.([a-z]{2,4})|is";

	if($_POST['name'] == "") {
		$name = "Не указано";
	} else {
		$name = $_POST['name'];
	}

	if(!preg_match($pattern, strtolower($email))) {
	$errors[] = "E-mail указан некорректно."; // Сообщение, если e-mail некорректен
	}

	if($_POST['message'] == "") {
		$errors[] = "Не указан текст сообщения."; // Сообщение, если поле «сообщение» пусто
	}
 
	if(empty($errors)){ // Отправляем форму если нет ошибок
		$message = "<b>Имя отправителя</b>: ".$name."<br>";
		$message .= "<b>E-mail</b>: ".$_POST['email']."<br><br>";
		$message .= "<b>Текст письма</b>: " . $_POST['message'];      
		send_form($message);
		$msg_result = "Сообщение успешно отправлено!"; // Сообщение об успешной отправке
	} else { // Выводим ошибки
		$msg_result = "";
		foreach($errors as $all_error) {
			$msg_result .= $all_error."<br>";
		}
	}

	echo json_encode(array(
		"result" => $msg_result
	));

	function send_form($message) {
		$mail_to = "your_mail@mail.ru"; // Адрес, куда отправляем письма
		$subject = "Письмо с обратной связи"; // Тема письма
		$headers = "MIME-Version: 1.0\r\n";
		$headers .= "Content-type: text/html; charset=utf-8\r\n";
		$headers .= "From: ".$subject." <no-reply@".$_SERVER['HTTP_HOST'].">\r\n";
		mail($mail_to, $subject, $message, $headers);
	}     
?>

Здесь вы можете изменить тексты сообщений об ошибках и успешной отправке, вид письма, которое приходит на почту, и обязательно адрес почты, на который будут приходить сообщения с формы.

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

Вот и все, можете проверить корректность работы формы. Дополнительные поля вы можете добавить по аналогии с существующими. Если возникают проблемы в работе – пишите об этом в комментариях.

0
комментарий
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария