Простая форма обратной связи на 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);
	}
	
?>

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

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


Оценить:
(11 оценок, среднее: 4,55 из 5)

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

    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();

  7. Здравствуйте. Все работает, есть только одна идея, которую очень хочется реализовать. Как вывести ошибки под каждое поле отдельно.

    Я понимаю, что:
    ‘result’ => $msg_box — передаем массив со всеми ошибками
    $(‘.messages’).html(data.result); — передаем все в div messages
    А как реализовать передачу в отдельно в каждый div под input?
    Например:
    для ошибки имя в div error_name
    для ошибки в телефоне в div error_phone
    Буду ждать ответа. Спасибо!

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

    1. Проверьте, чтобы id полей были уникальные, чтобы данные брались из нужных полей — можно завязаться на конкретную форму, через $(this)

  9. спасибо за форму. работает как часы.
    но было б логично, чтоб в поле ОТ проставлялся email, который чел вводит при заполнении формы.
    так проще отвечать на письма.

  10. Согласен: «было б логично, чтоб в поле ОТ проставлялся email»
    И еще вопрос: В спам попадает , что делать?

  11. Подскажите, пожалуйста. AJAX передает кириллицу из формы в виде кракозябр, как это исправить?

    $.ajax({
    url: $that.attr(‘action’),
    type: $that.attr(‘method’),
    contentType: false,
    processData: false,
    data: formData,
    dataType: ‘json’,
    success: function(res){
    var result = JSON.parse(res);
    alert(res.answer);
    },
    error: function(){
    alert(res.answer);

    }
    });

  12. Всё верно!
    Но можно короче:
    $(‘.contact-form’).submit(function(){
    // отправляем данные
    $.ajax({
    url: «action.php», // куда отправляем
    type: «post», // метод передачи
    dataType: «json», // тип передачи данных
    data: $(this).serialize(),
    // после получения ответа сервера
    success: function(data){
    $(‘.messages’).html(data.result); // выводим ответ сервера
    }
    });
    });

    1. У меня почему то не получается даже с сервера. Нажимаю отправить и никакой реакции. Не понятно происходить что то или нет. Пробный сайт прикрепила при заполнении данных

  13. Здравствуйте, а как сделать, чтобы поля очищались после успешной отправки?

      1. Тогда кнопка input тоже становится пустой, а textarea сообщение не пропадает.
        А вот так заработало:
        success: function(data){
        $(‘input’).val(»);
        $(‘textarea’).val(»);
        $(‘.messages’).html(data.result); // выводим ответ сервера
        }
        и вместо input отправки Отправить
        Спасибо за наводку:)

  14. Подскажите пожалуйста — что делать тем, у кого все равно не приходят уведомления на почту ? Я форму залила на сервер, но уведомления на почту не пришли. Сообщение об отправке высветилось.

    1. Добрый день, бывает на хостинге не работает функция mail или письма, отправленные этой функцией. попадают в спам. Попробуйте проверить. какой результат возвращает эта функция:
      $r = mail(..
      var_dump($r)
      И в консоле браузере посмотрите, какой ответ пришел от сервера. Если false, то проблема в функции mail. Тогда ее можно заменить smtp: https://vk-book.ru/otpravka-pisem-cherez-smtp-s-avtorizaciej-po-protokolu-ssl-na-php/

      1. Функция mail у меня вернула false. Обращаться к smtp не хотелось бы. За исправлением функции mail обращаться к сисадмину ?

        1. Да, это нужно писать системному администратору, чтобы он настроил отправку почты с сервера.
          Только чтобы точно убедится. что проблема именно в функции mail, попробуйте прописать вместо переменных реальные значения и так же посмотреть результат. если вернется false, то дело точно в настройках сервера:
          $r = mail(«test@mail.ru», «subject», «text»);
          var_dump($r);

    1. Спасибо, пригодится кому-нибудь. Только вы в репозиторий закопитили логин и пароль к почте — такие данные лучше выносить в отдельный конфиг и добавлять его в игнор гита

  15. У меня не отрабатывает скрипт js, я кликаю на кнопку отправить, но ничего не происходит, а на почту сообщения приходят. Но нет уведомления об ошибка (в случае ошибки) и нет оповещения об отправке. Почему такое происходит? Сайт analiznadom.ru, на главной странице есть кнопка «Заказать звонок». В консоли есть предупреждение, может из-за него не срабатывает? подскажи пожалуйстаhttp://prntscr.com/my4m54

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

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

*

code