Супербыстрый хостинг на SSD от 115р в месяц   •   Реклама
15 996 просм
18 комм
Поделиться:

Простая форма обратной связи без перезагрузки страницы на PHP+jQuery

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

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

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

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

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

Простой пример формы обратной связи без перезагрузки страницы

Поскольку для отправки формы мы будем использовать 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").on("click", function() {
		
			var name = $("#name").val(); // Получаем имя
			var email = $("#email").val(); // Получаем e-mail
			var message = $("#message").val(); // Получаем сообщение
			
			$.ajax({
			
				url: "/form.php", // Куда отправляем данные (обработчик)
				type: "post",

				data: {
					"name": name,
					"email": email,
					"message": message
				},

				success: function(data) {
				
					$(".result").html(data); // Выводим результат
					
				}
				
			});
			
		});
		
	});

</script>

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

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

<?php

	header("Content-Type: text/html; charset=utf-8");
	
	if(isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && strtolower($_SERVER["HTTP_X_REQUESTED_WITH"]) === "xmlhttprequest") {
	
		if(!isset($_POST["name"]) || !isset($_POST["email"]) || !isset($_POST["message"])) {

			die();

		}
	
		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: Система уведомлений <no-reply@".$_SERVER['HTTP_HOST'].">\r\n";

			mail($mail_to, $subject, $message, $headers);
		
		}

		$name = strip_tags($_POST["name"]); // Имя
		$email = strip_tags($_POST["email"]); // E-mail
		$mess = strip_tags($_POST["message"]); // Сообщение

		if(!preg_match("|^([a-z0-9_.-]{1,20})@([a-z0-9.-]{1,20}).([a-z]{2,4})|is", strtolower($email))) { // Если e-mail пустой или невалиден

			echo "E-mail указан некорректно.";

			die();

		}

		if($mess == "") { // Если сообщение пустое

			echo "Не указан текст сообщения.";

			die();

		}

		if($name == "") { // Если имя не указано

			$name = "Не указано";

		}

		$message = <<<HTML

			<b>Имя отправителя</b>: {$name}<br>
			<b>E-mail</b>: {$email}<br><br>
			<b>Текст письма</b>: {$mess}

HTML;

		send_form($message); // Если ранее описанных ошибок нет - отправляем сообщение
		
		echo "Сообщение успешно отправлено!";

	} else {

		die();

	}

?>

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

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

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

«Pandoge» - помощник веб-мастера
18
комментариев
30.11 в 15:11

Пишет сообщение отправлено, но на почту не приходит. Адрес указан верный.

  • 0

Николай, на хостинге ограничений нет? Папку "спам" проверяли?

  • 6
4.12 в 15:11

Не совсем понятно п.2 - какую корректную ссылку написать и в каком месте?

  • 2

Alex, в строке

url: "/form.php", // Куда отправляем данные (обработчик)

Вы пишите ссылку до вашего файла.

  • 5
9.01 в 15:56

Валидация email средствами php, не?)

  • 0
10.01 в 18:23

А как эту форму поместить модальное окно?

  • 0

Вадим Агеев, у Вас уже есть модальное окно или Вам его нужно создать?

  • 5
7.07 в 02:45

Артем Мáлков ,а как можно очистить поля после успешной отправки формы?

  • 1

Сергей, Строку

$msg_result = "Сообщение успешно отправлено!"; // Сообщение об успешной отправке

Замените на

$msg_result = "Сообщение успешно отправлено!<script>$('.input_1, .input_2').val('');</script>"; // Сообщение об успешной отправке

Где .input_1, .input_2 - классы полей, которые нужно очистить.

  • 0
11.07 в 06:02

Ничего не работает.

Браузер говорит о ошибке Uncaught ReferenceError: $ is not defined

at (index):16

Указывает на первую строку скрипта - $(document).ready(function() {

Как с этим бороться?

  • 0

Аркадий, в HEAD сайта подключите:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Проблема должна решиться smiley

  • 0
29.09 в 07:27

а как создать форму отправки для определённого региона?

  • 0
23.10 в 17:24

всё круто, спасибо, но непонятно как передавать инпут типа селект ?!?

  • 0

Никита, если нужен текст, то так:

var select = $("#select_id option:selected").text();

Если нужен value, то:

var select = $("#select_id option:selected").val();

Где #select_id - ID или класс селекта. В скрипте все так же:

data: {

"name" : name,

"email" : email,

"message" : message,

"select": select

},

В обработчике - $select = $_POST["select"];

  • 1

Статья обновлена.

Упрощен код + добавлена фильтрация данных.

  • 1
25.06 в 20:53

Большое вам спасибо за этот скрипт! Я перелопатил огромную кучу сайтов и корректно всё стало работать только с вашим скриптом!!!!)

  • 1
2.08 в 18:42

Я видел, кто-то спрашивал, как уместить этот код в модальное окно. У меня аналогичный вопрос.

И как это всё можно запихнуть в <form>? Просто стили у меня под неё, если возможно, подскажите. Буду очень признателен

  • 0

Владислав, если у Вас уже есть модальное окно, то просто вставляете форму в него. Сам процесс создания такого окна будет (возможно) позже.

Чтобы форма работала через form нужно переделывать работу скрипта. В Вашем случае, проще немного подправить стили.

  • 0
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Подняться наверх