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

Одним из правил хорошего тона, в плане функционала сайта, является наличие на нем "Формы обратной связи" с помощью которой посетитель ресурса может отправить на E-mail администрации свое предложение, комментарий, претензии и т.п.

В данной статье будет рассмотрен один из вариантов создания формы обратной связи для сайта. Для этого может быть использовано множество разных способов, но мы остановимся на применении PHP в связке Ajax & Mootools.


Начнем с простого, с HTML формы, в качестве которой будет взят пример c простейшей структурой полей: "имя", "email", тема сообщения "subject", текстовая область "сообщение" и кнопка отправки данных формы на сервер - "отправить".

В HTML это выглядит так:

<form id="mail">
  <input name="name" type="text" />
  <input name="email" type="text" />
        <input name="subject" type="hidden" value="Cообщение от поситителя сайта" />
  <textarea name="comment"></textarea>
  <input name="submit" type="submit" value="Отправить" />
</form>

Обратите внимание! тег FORM не содержит в своих атрибутах имя формы, обработчик и метод отправки (GET/POST), эти параметры будут указаны в Java Script функции которая будет выполнять отправку данных обработчику на сервер.

Также следует обратить внимание на то, что форма имеет параметр id, по которому функция будет получать ее вместе с полями, и кнопка формы также должна иметь id для того чтоб присвоить ей событие (для клик) при котором запустится функция Ajax запроса.

А теперь сам Java Script, поэтапно формируем код.
Для начала создадим событие для Window:

window.addEvent('domready', function() {});

Далее по ID получаем кнопку из формы и назначаем событие клика по ней мышей при котором запустится функция:

window.addEvent('domready', function() {
    $('submit').addEvent('click', function(){
 
    });
});

"Каркас" готов - эта часть кода будет выполнять функцию запуска двух методов класса Request - get() или post(), (используйте как вам удобней), которая формирует запрос в виде "переменная=значение" из полей формы, и send() которая отправляет сформированный запрос на сервер обработчику:

    $('mail').get('send', {
      method: 'get',
      url: 'mail.php',      
      onRequest: function(){
        $('mail').set('html', img)
      },
      onSuccess: function(responseText){
        (function(){ $('mail').set('text', responseText) }).delay(3000);
      }
 
    }).send();

А теперь поподробней:

1.получаем форму по ID и передаем ее методу get() в котором в строке

2.указываем "method" - метод отправки формы GET/POST (optional)

3.обработчик формы "url" - если не указан то берется из формы(в этом случае он там должен быть указан).

В принципе на этом можно было и закончить с методом get(), данные формы успешно бы отправились на сервер, который там выполнит/не выполнит определенные действия с полученными данными, но так как все должно быть "интерактивно" то както нужно уведомлять пользователя о том что его данные начали отправляться и после успешной обработки этих данных на сервере, сказать пользователю "Спасибо :)".

Для этого в строке

4. используется событие для класса Request - onRequest которое возникает при начале посылки запроса на сервер, при наступлении этого события мы можем выполнить какие то действия. В данном примере при событии onRequest в строке 5 осуществляется замена содержимого тега Form c помощью функции set, которая заменит все поля формы и кнопку, на созданную картинку статуса отправки формы (ajax-loader.gif).

5.в этой строке самое интересное - это еще одно событие класса Request - onSuccess, которое наступает при успешной отправке данных и получения ответа от серверного скрипта, но обратите внимание здесь при этом событии выполняется функция которая в качестве параметра принимает текст/код ответа обработчика, который может быть как положительный так и отрицательный (например "Спасибо!" или "Ошибка!").

Но как же вставить этот текст ответа сервера? Ведь при пред-идущем событии мы уже заменили содержимое формы на картинку. Но это еще и не самый главный вопрос, вставить текст то можно, но его нужно вставлять не сразу после получения ответа от обработчика, а с задержкой в три секунды, то-есть дать картинке прилоадеру "немного помоячить перед глазами" и только после этого снова обновить содержимое тега Form текстом ответа!

Именно это и реализовано в строке 8 - где функция которая производит замену содержимого тега Form обновляется через три секунды. Осуществляется это с помощью метода функции - delay.

Основной функционал Java Script реализован (достаточно для данного примера) и код выглядит так:

window.addEvent('domready', function() {
 
    $('submit').addEvent('click', function(){
    $('mail').get('send', {
      method: 'get',
      url: 'mail.php',      
      onRequest: function(){
        $('mail').set('html', '<img src="ajax-loader.gif" border="0" />')
      },
      onSuccess: function(responseText){
        (function(){ $('mail').set('text', responseText) }).delay(3000);
      }
    }).send();
    });
});
 

Теперь обработчик который будет принимать данные из формы, формировать из них тело письма и отправлять зголовок на SMTP cервер.

Для реализации будет взят стандартный пример отправки почтового сообщения с помощью PHP функции mai().

Эта функция принимает три параметра

1.to (адрес электронной почты получателя);

2.subject (тема сообщения);

3.body (текст сообщения);

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

И так для начала напишем условие проверки на то что все данные из полей отправлены, то-есть пользователь не пропустил ни одно, в противном случае письмо не отправляется и выводится сообщение "Ошибка!":

if(isset($_GET['subject'])){$subject = $_GET['subject']; if($subject == ''){unset($subject);} }
if(isset($_GET['name'])){$name = $_GET['name']; if($name == ''){unset($name);} }
if(isset($_GET['email'])){$email = $_GET['email']; if($email == ''){unset($email);} }
if(isset($_GET['comment'])){$comment = $_GET['comment']; if($comment == ''){unset($comment);} }
 
if(isset($subject) && isset($name) && isset($email) &&  isset($comment)){
//код
 }else{echo "Ошибка!";}

Если же условие выполняется - пользователь был внимателен :) обрабатываем данные:

    $recipient = "Адрес получателя";
    $subject = trim(addSlashes($subject));  
    $name = ucwords(trim(addSlashes($name)));
    $email = trim(addSlashes($email));
    $comment = trim($comment);

И формируем текст сообщения из клиентских заголовков - Body:

$body = "Контактное лицо:  ".$name."\r\n"."Email:  ".$email."\r\n"."Текст сообщения:\r\n".$comment;

Формируем сообщение из заголовков, и отправляем на SMTP удаленный сервер:

$formsent = mail($recipient,$subject,$body);

Условие проверка на то что письмо отправлено, если условие выполняется то переменная для вывода ответа содержит текст благодарности, иначе сообщение об ошибке:

    if($formsent){
      $data = $name."  благодарим за ваше сообщение!";
    }else{$data = "Ошибка!";}
echo iconv ("UTF-8", "UTF-8", $data);
 

Все скрипт готов, если вы заметили здесь применены функция iconv и header(см ниже), это для того чтобы не было проблем с кодировкой данных при ответе обработчика.

Полный код обработчика:

header('Content-Type: text/html; charset=utf-8');
 
if(isset($_GET['subject'])){$subject = $_GET['subject']; if($subject == ''){unset($subject);} }
if(isset($_GET['name'])){$name = $_GET['name']; if($name == ''){unset($name);} }
if(isset($_GET['email'])){$email = $_GET['email']; if($email == ''){unset($email);} }
if(isset($_GET['comment'])){$comment = $_GET['comment']; if($comment == ''){unset($comment);} }
 
if(isset($subject) && isset($name) && isset($email) &&  isset($comment)){
 
    $recipient = "Адрес получателя";
  $subject = trim(addSlashes($subject));  
    $name = ucwords(trim(addSlashes($name)));
    $email = trim(addSlashes($email));
    $comment = trim($comment);
 
  $body = "Контактное лицо:  ".$name."\r\n"."Email:  ".$email."\r\n"."Текст сообщения:\r\n".$comment;
 
    $formsent = mail($recipient,$subject,$body);
 
    if($formsent){
    $data = $name."  благодарим за ваше сообщение!";
    }else{$data = "Ошибка1!";}
   echo iconv ("UTF-8", "UTF-8", $data);
}else{echo iconv ("UTF-8", "UTF-8", "Ошибка!");}
 
 

Если у вас блог на WorldPress можите воспользоватся Wordpress форма обратной связи

Demo

Download

Используемые материаллы:

• Mootools Request

В Мой МирВ данной статье будет рассмотрен один из вариантов создания формы обратной связи для сайта. Для этого может быть использовано множество разных способов, но мы остановимся на применении PHP в связке Ajax и MootoolsСкопировать в блог

<p><a href="http://www.cleverscript.ru/index.php/javascript/mootools/5-form-to-ajax-mootools"><img style="margin-right:15px;" align="left" alt="" src="http://www.cleverscript.ru/images/stories/aj.gif"/></a><a title='Форма обратной связи на Ajax' style='font-size:18px;font-weight:bold;' href='http://www.cleverscript.ru/index.php/javascript/mootools/5-form-to-ajax-mootools'>Форма обратной связи на Ajax</a><br/>Одним из правил хорошего тона, в плане функционала сайта, является наличие на нем "Формы обратной связи" с помощью которой посетитель ресурса может отправить на E-mail администрации свое предложение, комментарий, претензии и т.п. </p>