Супербыстрый хостинг на SSD от 165р в месяц   •   Реклама
17 356 просм
20 комм
Поделиться:

Простая форма обратной связи без перезагрузки страницы на 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();

	}

?>

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

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

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

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

Михаил Безденежный, Здравствуйте.

Мне кажется, это не совсем ошибка, а больше предупреждение. Вероятнее всего, вы отправляете большой текст/файл. Увеличьте значение директивы client_body_buffer_size на вашем хостинге/сервере и попробуйте отправить письмо с вашим содержимым еще раз.

19.09 в 15:06
  • 0
Пользователь  |  1

Возникает вот такая ошибка:

2019/09/19 13:57:58 [notice] 15762#15762: *7216031 a client request body is buffered to a temporary file /var/cache/nginx/client_temp/0032964712, client: 85.93.60.215, server: zarabotok.darkhost.pro, request: "POST /form.php HTTP/1.1", host: "zarabotok.darkhost.pro", referrer: "http://zarabotok.darkhost.pro/kontakt.htm"

Что делать?

19.09 в 14:10
  • 0
Администратор  |  735

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

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

2.08 в 19:09
  • 0
Пользователь  |  1

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

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

2.08 в 18:42
  • 0
Пользователь  |  1

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

25.06 в 20:53
  • 1
Администратор  |  735

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

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

20.04 в 15:07
  • 1
Администратор  |  735

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

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"];

23.10 в 19:44
  • 1
Гости  |  679

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

23.10 в 17:24
  • 0
Гости  |  679

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

29.09 в 07:27
  • 0
Администратор  |  735

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

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

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

11.07 в 13:16
  • 0
Гости  |  679

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

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

at (index):16

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

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

11.07 в 06:02
  • 0
Администратор  |  735

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

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

Замените на

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

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

7.07 в 13:36
  • 0
Гости  |  679

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

7.07 в 02:45
  • 1
Администратор  |  735

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

11.01 в 02:36
  • 5
Гости  |  679

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

10.01 в 18:23
  • 0
Гости  |  679

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

9.01 в 15:56
  • 0
Администратор  |  735

Alex, в строке

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

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

4.12 в 15:28
  • 5
Гости  |  679

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

4.12 в 15:11
  • 2
Администратор  |  735

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

30.11 в 18:22
  • 6
Гости  |  679

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

30.11 в 15:11
  • 0
Подняться наверх
«Pandoge» - помощник веб-мастера