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

Суббота, 12 Декабрь 2009

 

Одним из правил хорошего тона, в плане функционала сайта, является наличие на нем "Формы обратной связи" с помощью которой посетитель ресурса может отправить на 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) &amp;&amp; isset($name) &amp;&amp; isset($email) &amp;&amp;  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) &amp;&amp; isset($name) &amp;&amp; isset($email) &amp;&amp;  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

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

Метки:

Похожие статьи:

Комментарии 

 
anonim Четверг, 15 Июль 2010

priv.napiwite kak sozdat fayli? vnes v html fayl javascript i html... a phpp otdelno v mail.php.... nev rabotaet...obyasnite pli...na mail piwite

 

 
 
anonim Пятница, 29 Октябрь 2010

в архиве не хватает php файла профиксите

 

 
 
anonim Четверг, 04 Ноябрь 2010

Пофиксил, спасибо за замечание. Обратите внимание в файле mail.php в 11 строчке вам следует указать свой адрес электронной почты, в Demo варианте адресом получателя выступает Email из поля формы!
Это сделано с той целью, что бы вы могли проверить работу скрипта.

 

 
 
anonim Понедельник, 15 Ноябрь 2010

Прикольненькая идея, как долго ожидать поступление свежего материала и вообще стоит ожидать ?

 

 
 
anonim Понедельник, 15 Ноябрь 2010

Интересует свежий материалл по Ajax ??? Или вообще???

 

 
 
anonim Среда, 17 Ноябрь 2010

Интересно, но все же хотелось бы побольше узнать об этом. Понравилась статья!:-)

 

 
 
anonim Четверг, 18 Ноябрь 2010

Тема ваша довольно сложная для новичка.

 

 
 
anonim Четверг, 18 Ноябрь 2010

Спасибо за проявленный интерес :))
Опишите подробно что вам разъяснить? Эта статья не претендует на мануал по Ajax технологии технологи... В ней я лишь привел практический упрощенный вариант (сырой), то есть довести до ума прийдется.
Ну а если в кратце функция get() принимает значения полей формы и формирует переменные вида имя_поля=значения, указывается метод передачи данных GET или POST и обработчик который все это дело примет и вернет ответ, который в свою очередь примет функция onSuccess в качестве входного параметра и вставит этот ответ в нужный DOM узел HTML страницы (в данном случае с задержкой в 300 миллисекунд в нашу форму:
$('mail').set('text', responseText) }).delay(3000)
, вот таким образом).
Вы конкретней поставьте вопросы которые необходимо по пунктам объяснить, на самом деле ничего сложного нет, нужно просто понять синтаксис mootools функций, написать с ноля пару подобных скриптов и все пойдет))
Сформулируйте вопросы, я отвечу более точно.
P.S «Правильно заданный вопрос – половина ответа»

 

 
 
anonim Пятница, 19 Ноябрь 2010

Сильно отличная сообщение! Автор пишите сообщения в том же духе..

 

 
 
anonim Пятница, 26 Ноябрь 2010

Ура! тот кто писал ништяк написал!

 

 
 
anonim Суббота, 27 Ноябрь 2010

Хорошая статья! читать было интересно, а также узнал много нового

 

 
 
anonim Суббота, 27 Ноябрь 2010

Просто офигительная статья. Спасибки огромные вам за ваш труд кропотливый. Респектище))

 

 
 
anonim Вторник, 30 Ноябрь 2010

Прикольно пишите, автору респект!

 

 
 
anonim Воскресенье, 05 Декабрь 2010

Неплохо. Возьму на заметку.

 

 
 
anonim Воскресенье, 05 Декабрь 2010

Хм. Если чесно, то не ожидал найти что-то интересное для себя на этом сайте. Приятно удивлен. Хорошие посты и сайт неплохой.

 

 
 
anonim Воскресенье, 05 Декабрь 2010

Ну что сказать. Как на меня, то блог просто супер! И посты интересные.

 

 
 
anonim Понедельник, 06 Декабрь 2010

Неплохой болг. Интересные статьи. Возьму на заметку.

 

 
 
anonim Понедельник, 06 Декабрь 2010

Довольно интересные статьи на этом блоге. Буду частенько сюда заглядывать).

 

 
 
anonim Вторник, 07 Декабрь 2010

Подписывайтесь на RSS или добавляйтесь в твиттер и группу в контакте, что бы гарантированно заглядывать :))

 

 
 
anonim Вторник, 07 Декабрь 2010

Неплохо. Есть что почитать. Побольшеб таких постов.

 

 
 
anonim Суббота, 11 Декабрь 2010

Полностью согласен с предыдущем автором.

 

 
 
anonim Суббота, 11 Декабрь 2010

Как кому, а мне нравится этот блог.

 

 
 
anonim Суббота, 11 Декабрь 2010

Зашёл случайно. Сайт понравился. Буду ещё заглядывать.

 

 
 
anonim Суббота, 11 Декабрь 2010

Ну просто супер блог!

 

 
 
anonim Воскресенье, 12 Декабрь 2010

Интересный сайт. И статьи ничего.

 

 
 
anonim Понедельник, 13 Декабрь 2010

Спасибо всем, стараемся для вас!

 

 
 
anonim Пятница, 24 Декабрь 2010

Хороший сайт. Жаль, что таких мало.

 

 
 
anonim Вторник, 28 Декабрь 2010

Hi there, I found your blog via Google while searching for first aid for a heart attack and your post looks very interesting for me.

 

 
 
anonim Вторник, 28 Декабрь 2010

Thank you very much :))

 

 
 
anonim Суббота, 01 Январь 2011

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

 

 
 
anonim Понедельник, 03 Январь 2011

Вот здесь поменяйте на свой ID, блока который будет над формой:

onSuccess: function(respon seText){
(function(){ $('mail').set('text', responseText) }).delay(3000);
}

Вместо mail укажите свой ид блока, нопример если id блока то будет так:

onSuccess: function(respon seText){
(function(){ $('response').set('text', responseText) }).delay(3000);
}

 

 
 
anonim Вторник, 04 Январь 2011

Хороший у вас блог! удачи в развитии

 

 
 
anonim Четверг, 06 Январь 2011

//
Вот здесь поменяйте на свой ID, блока который будет над формой:

onSuccess: function(respon seText){
(function(){ $('mail').set('text', responseText) }).delay(3000);
}

Вместо mail укажите свой ид блока, нопример если id блока то будет так:

onSuccess: function(respon seText){
(function(){ $('response').set('text', responseText) }).delay(3000);
}
//
Менял, все ок - но страница почему то редиректиртся на mail.php...

 

 
 
anonim Пятница, 07 Январь 2011

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

 

 
 
anonim Среда, 02 Февраль 2011

классна форма. Я ее доработал, но не могу понять в чем проблема.

здесь работает кнопка:
...

здесь нет
...

перенес просто код и вставил

 

 
 
anonim Среда, 02 Февраль 2011

Ошибка Javascript по последней ссылке, дебажте в Firebug - сообщает:

a.widget is not a function
[Прерывать на этой ошибке] (function(a){a.widget("ui.slider",a.ex...,value:0,values :null}})})(jQue ry);;/*

Что то у вас с виджетом не так, похоже вы что-то недоподключили для его работы, сравните подключенные javascript с документа по первой ссылке с документом по второй.

 

 
 
anonim Четверг, 10 Февраль 2011

статья super, автору респект

 

 
 
anonim Пятница, 18 Февраль 2011

for sure I here you. by the way you should to a quick look at my sons blog. More than you think, Denis. More compared to you think. :) :) :)

 

 
 
anonim Вторник, 15 Март 2011

Благодаря за един интересен блог

 

 
 
anonim Пятница, 18 Март 2011

Неплохо. Интересный сайт. Есть что почитать.

 

 
 
anonim Вторник, 29 Март 2011

" то-есть пользователь не пропустил ни одно"

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

 

 
 
anonim Понедельник, 04 Апрель 2011

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

 

 
 
anonim Среда, 04 Май 2011

Чего только не делал с кодировками-форма упрямо отображает ����� �������� ���� вместо букв. Форму поставил в отдельную директорию Joomla! 1.6.3
Может автор скрипта поможет?

 

 
 
anonim Суббота, 07 Май 2011

Кодировка самого файла который выводит форму должна быть UTF-8 а также label который содержит кириллицу должен выводится после предварительной перекодировки в UTF-8:

echo iconv ("cp1251", "UTF-8", "Имя:");

Это из-за того что Joomla в UTF-8, лучше передавать имена полей из параметров модуля через

$params->get('your_name');

см. Создание модуля для Joomla

 

 

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