Smartlanding / Элементы сайта /

Отправка формы без перезагрузки страницы

форма без перезагрузки страницыДоброго времени суток. Как ваши дела? Сегодня решил разобрать то, как устроена форма обратной связи, работающая без перезагрузки страницы. То есть это такая контактная форма, после заполнения и отправки которой не осуществляется переход на другую страницу.

Если у вас нет необходимости в реализации данного эффекта, то вы можете создать обычную контактную форму и отправить пользователя на страницу благодарности. Но для некоторых лендинг пейдж - это жизненно необходимый элемент. Давайте приступим…

Отправка данных формы без перезагрузки страницы

Будем реализовывать такую структуру:

форма без перехода на страницу

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

Первое, что необходимо сделать - это подключить библиотеку jquery. Я не буду больше писать, как это делать. Думаю, все, кто хоть немного разбираются в верстке - уже знают, как она подключается. А может запишу внеочередную статью и буду давать ссылку на нее.

Для того, чтобы отправка формы осуществлялась без перезагрузки страницы нам придется воспользоваться технологией ajax. Необходимо между тегами <head></head> подключить следующий скрипт:

<script>
function AjaxFormRequest(result_id,formMain,url) {
   jQuery.ajax({
      url:     url,
      type:     "POST",
      dataType: "html",
      data: jQuery("#"+formMain).serialize(),
      success: function(response) {
         document.getElementById(result_id).innerHTML = response;
      },
      error: function(response) {
         document.getElementById(result_id).innerHTML = "Возникла ошибка при отправке формы. Попробуйте еще раз";
      }
   });
}
</script>

В этой строке напишите сообщение, которое будет выводиться при неудачной отправке данных формы:

   document.getElementById(result_id).innerHTML = "Возникла ошибка при отправке формы. Попробуйте еще раз";

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

$(':input','#formMain')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

То есть, теперь должно выглядеть так:

<script>
 function AjaxFormRequest(result_id,formMain,url) {
 jQuery.ajax({
 url: url,
 type: "POST",
 dataType: "html",
 data: jQuery("#"+formMain).serialize(),
 success: function(response) {
 document.getElementById(result_id).innerHTML = response;
 },
 error: function(response) {
 document.getElementById(result_id).innerHTML = "

Возникла ошибка при отправке формы. Попробуйте еще раз

";
 }
 });

 $(':input','#formMain')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');
 }
</script>

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

Теперь следует создать совершенно обыкновенную форму, с одной единственной особенностью в input (е), отвечающем за отправку данных формы:

<div class="wrapper">
 <div class="form">
  <div id="messegeResult">Оставьте ваши контакты и наш консультант свяжется с вами </div>
  <form method="post" action="" id="formMain">
        <input id="name" type="text" name="name" placeholder="Введите ваше имя" maxlength="30" autocomplete="off" />
        <input id="telephone" type="Tel" name="telephone" placeholder="Введите ваш телефон" maxlength="30" autocomplete="off"/>
        <input id="button" type="button"  value="Заказать обратный звонок" onclick="AjaxFormRequest('messegeResult', 'formMain', 'form.php')"/>
  </form>
  </div>
</div>

В этой строке нужно указать то сообщение, которое будет выводится до отправки данных формы:

<div id="messegeResult">
 Оставьте ваши контакты и наш консультант свяжется с вами 
</div>

Почти готово, теперь необходимо создать обработчик, для нашей формы. Создаем файл form.php и помещаем в него следующий код:

<?php
if($_POST)
	{
	$to = "почта@mail.ru"; //куда отправлять письмо
	$from = 'почта@mail.ru'; // от кого
	$subject = "Проверка почты"; //тема
	$message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].';';
	$headers = "Content-type: text/html; charset=UTF-8 \r\n";
	$headers .= "From: <почта@mail.ru>\r\n";
	$result = mail($to, $subject, $message, $headers);

    if ($result){
        echo "Cообщение успешно отправленно. Пожалуйста, оставайтесь на связи";
	}
	}
?>

Здесь пишем сообщение, которое увидит пользователь, после нажатия на кнопку "Заказать обратный звонок":

echo "

Cообщение успешно отправленно. Пожалуйста, оставайтесь на связи

";

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

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

Скачать исходник

Про более совершенную (во всех смыслах) ajax форму, которая работает как в модальном окне, так и без него описано тут

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

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