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

Сотрудник купил в www.e-katalog.ru/list/201/logitech/ веб-камеру для своей бабушки. Теперь она устраивает Skype видео-конференции с родственниками. При этом качество картинки поражает как сотрудника, так и бабушку с родственниками. Разрешение, частота кадров, габариты у веб-камер Logitech на высоте.

Как сделать модуль форма обратной связи для сайта

Для начала нам нужно сделать верстку этой самой формы обратной связи. Чаще всего на сайтах достаточно следующих полей у формы:

  • имя обратившегося
  • имейл обратившегося
  • сообщение

Так и поступим, то есть сверстаем форму с такими полями. Если вам нужно больше полей, просто добавте их в эту форму:

Формат обратной связи

Готово, верстка есть. Теперь нужно эту форма обратной связи отправить. Сделаем это при помощи AJAX на jQuery.

Отправить форма обратной связи на AJAX

Для того, чтобы отправить форму обратной связи на AJAX сделаем на jQuery обращение к серверному файлу и передадим в них данные из формы:

$(function(){
  $('#my-contact-form').submit(function(e){
    e.preventDefault(); //это чтобы форма не отправлялась через браузер, только по AJAX
    var formdata='name='+$('#name').val()+'&email='+$('#email').val()+'&text='+$('#text').val();
    //запишем все данные формы в переменную data
    $.ajax({
      url: 'do.ajax.php',
      data: formdata,
      type: 'post',
      success: function(respond){
        alert(respond);
      },
      error: function(){
        alert('Произошла ошибка. Повторите попытку позже.');
      }
    });
  });
});

Разберем этот кусочек кода. Сначала мы обрабатываем форма обратной связи: привязываем действие на событие submit (отправки) этой формы. В этом действии мы запрещаем форме отправляться (делать событие по умолчанию). Затем собираем данные формы в строку с урл-параметрами. И отправляем AJAX на файл do.ajax.php методом POST, с данными из переменной formdata. Если отправка завершиться успешно, мы выведем сообщение полученное из do.ajax.php в alert, а если произойдет ошибка при отправке формы — просто alert с сообщением об ошибке.

Финальная часть модуля: обработка AJAX запроса на PHP

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

  $name=$_POST['name'];
  $email=$_POST['email'];
  $text=$_POST['text'];
  $msg="Имя: {$name}\nEmail: {$email}\nСообщение: {$text}";
  mail('your@email.com','Сообщение с сайта', $msg);
  echo "Ваше сообщение успешно отправлено";

Всё, готово. На PHP мы получаем данные из $_POST, формируем из этих данных сообщение и отправляем на ваш Email (подставьте свой). В конце мы выводим сообщение (которое выведется пользователю в alert, как результат успешной отправки). И die, чтобы файл прекратил выполнение, и сразу же выпал из оперативной памяти.