Простая форма обратной связи на php и ajax

Введение

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

Алгоритм действий будет не на много отличаться от обычной формы. Для начала сверстаем формочку, после чего напишем серверный скрипт и после этого добавим js скрипт, который свяжет клиентскую и серверную части. Работать с ajax будем с помощью библиотеки jQuery, поэтому не забудьте ее подключить.

Простая форма обратной связи на php и ajax. Код

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Обратная связь. Ajax</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
	<script>
		$(document).ready(function(){
			$('#btn_submit').click(function(){
				// собираем данные с формы
				var user_name 	 = $('#user_name').val();
				var user_email 	 = $('#user_email').val();
				var text_comment = $('#text_comment').val();
				// отправляем данные
				$.ajax({
					url: "action.php", // куда отправляем
					type: "post", // метод передачи
					dataType: "json", // тип передачи данных
					data: { // что отправляем
						"user_name": 	user_name,
						"user_email": 	user_email,
						"text_comment": text_comment
					},
					// после получения ответа сервера
					success: function(data){
						$('.messages').html(data.result); // выводим ответ сервера
					}
				});
			});
		});
	</script>
</head>
<body>
	<br/>
	<div class="messages"></div>
	<br/>
	<label>Ваше имя:</label><br/>
	<input type="text" id="user_name" value="" /><br/>
	
	<label>Ваш e-mail:</label><br/>
	<input type="text" id="user_email" value="" /><br/>
	
	<label>Текст сообщения:</label><br/>
	<textarea id="text_comment"></textarea>
	
	<br/>
	<input type="button" value="Отправить" id="btn_submit" />		
</body>
</html>

И второй файл, в котором будет находиться серверная логика, написанная на php:

<?php
	$msg_box = ""; // в этой переменной будем хранить сообщения формы
	$errors = array(); // контейнер для ошибок
	// проверяем корректность полей
	if($_POST['user_name'] == "") 	 $errors[] = "Поле 'Ваше имя' не заполнено!";
	if($_POST['user_email'] == "") 	 $errors[] = "Поле 'Ваш e-mail' не заполнено!";
	if($_POST['text_comment'] == "") $errors[] = "Поле 'Текст сообщения' не заполнено!";

	// если форма без ошибок
	if(empty($errors)){		
		// собираем данные из формы
		$message  = "Имя пользователя: " . $_POST['user_name'] . "<br/>";
		$message .= "E-mail пользователя: " . $_POST['user_email'] . "<br/>";
		$message .= "Текст письма: " . $_POST['text_comment'];		
		send_mail($message); // отправим письмо
		// выведем сообщение об успехе
		$msg_box = "<span style='color: green;'>Сообщение успешно отправлено!</span>";
	}else{
		// если были ошибки, то выводим их
		$msg_box = "";
		foreach($errors as $one_error){
			$msg_box .= "<span style='color: red;'>$one_error</span><br/>";
		}
	}

	// делаем ответ на клиентскую часть в формате JSON
	echo json_encode(array(
		'result' => $msg_box
	));
	
	
	// функция отправки письма
	function send_mail($message){
		// почта, на которую придет письмо
		$mail_to = "my@mail.ru"; 
		// тема письма
		$subject = "Письмо с обратной связи";
		
		// заголовок письма
		$headers= "MIME-Version: 1.0\r\n";
		$headers .= "Content-type: text/html; charset=utf-8\r\n"; // кодировка письма
		$headers .= "From: Тестовое письмо <no-reply@test.com>\r\n"; // от кого письмо
		
		// отправляем письмо 
		mail($mail_to, $subject, $message, $headers);
	}
	
?>

Исходные коды подробно прокомментированы, поэтому что либо еще тут писать смысла нет. Остается только выложить исходники — вот они.

Рассказать друзьям:


Простая форма обратной связи на php и ajax: 23 комментария

    1. Сообщение лежит на локальном сервере! В папке \userdata\tmp\email!
      Там в файле txt откроешь будет отображаться вводимая информация!

    2. Олег, да у меня тоже так же. Проверил несколько раз. Думал что что-то упустил но как вижу не у меня одного проблема.

    3. Еще можно настроить отправку и на локальном сервере! Для этого нужно например в OpenServer зайти в настройки и настроить почту через удаленный SMTP сервер использовав свой аккаунт и настройки SMTP твоей почты!

  1. Если сей код на сервер залить, то форма обратной связи заработает? Будут ли приходить мне на ящик уведомления?

  2. Дурацкие комментарии. Хрен введешь. Уже пятая попытка. Идиотский код безопасности. Как меня это злит. Поставь дискус — не парь мозг.

    А теперь — по делу.
    Если я залью на хостинг сей код, то он письма будет мне слать на ящик?

  3. Спасибо, все работает. меняем мыло в коде на свое. и не паримся.!
    // почта, на которую придет письмо
    $mail_to = «lu***@ya.ru»;

  4. Спасибо, форму выложил на хостинг и все, сложно было найти удобную работающую форму.

    П.с.было бы круто, если добавить еще проверку на валидность телефона

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

    1. $.ajax({
      type: «POST»,
      url: «/news/insert»,
      data: formData,
      contentType: false,
      processData: false, и тд.
      $uploaddir = ‘assets/uploads/img/’;
      if ($posImage != » && $error == ‘no’) {
      foreach ($_FILES as $f) {
      $uploadfile = $uploaddir . basename($f[‘name’]);

      // Копируем файл из каталога для временного хранения файлов:
      if (copy($_FILES[‘files’][‘tmp_name’], $uploadfile)) {
      $log .= «Файл успешно загружен на сервер«;
      } else {
      $log .= «
      Ошибка! Не удалось загрузить файл на сервер!«;
      }
      }
      }

    1. Попробуй так
      обращайся по $("#такой то").click(functioin(){
      тут твой код
      });

      должно сработать правильно!

  6. Подскажите как скрыть поля и кнопку после успешной отправки? Чтобы остался только текст «Сообщение успешно отправлено!»
    Спасибо)

    1. Можно обернуть все поля, которые нужно скрыть div-ом, например, с классом form_div, и в код аякс запроса, где происходит обработка кода, после успешной отправки формы(success), добавить код: $(«.form_div»).hide();

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*