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

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

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

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

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

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

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

Первое, что необходимо сделать — это подключить библиотеку 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 форму, которая работает как в модальном окне, так и без него описано тут

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

173 комментария

  • Максим

    Еще сделал такую штуку, типа всплывающего окна:

    <a href="javascript:void(0)" onClick="javascript:window.open('путь_к_файлу_index.html', 'Имя_окна', 'width=400, height=480, status=no, toolbar=no, menubar=no, left=40%, top=20%, scrollbars=no, resizable=no');">Обратный звонок</a>
    

    и прикольненько так получилось! :)

    Ответить
  • Максим

    О.о
    странно… пробовал на бесплатном хостинге — работает как часы. На платный хостинг поставил — пишет сообщение об ошибке отправки формы :(

    Ответить
  • Aleks

    Всем большой привет. И большая просьба!!
    Сколько уже форм обратной связи не пробовал, ни одна не пашет.
    Опять же? скачиваю на данный странице готовый код, вставляю, а он ни пашет.
    __http://vector136.ru/hren/

    Прошу помогите!!! Желаю всем добра и много гигов счастья!!!!

    Ответить
  • dimadv7

    Хостинг не бесплатный, не тестовый период? Попробуй почту у хостера завести, иногда, в качестве борьбы со спамом, можно только на нее письма отправлять.

    Ответить
  • Кирилл

    Пожалуйста, скажите как сделать защиту формы?
    Я в пхп не силён совсем…

    Ответить
  • Кирилл

    Кол-во символов не самый лучший вариант, т.к. в моём случае отправляемый текст может быть больше 30 символов

    Ответить
  • dimadv7

    Вот тут современная статья, эту обновить нужно как-нибудь. Пока руки не доходят.

    Ответить
  • homeprorab.info

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

    Ответить
  • Андрей

    Добрый день.
    У Вас маленькая неувязочка:

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

    Находится внутри функции, но форму Вы ищете не по переданному параметру, а на прямую указывая id.
    И этот способ затирает стили о_О

    Ответить
  • Андрей

    И этот способ затирает стили о_О

    Пардон, затирает автозаполнение

    Ответить
  • Михаил

    класм

    Ответить
  • Михаил

    А можно в форме сделать отправку на 2 почты или даже 3?

    Ответить
  • Таня

    Здравствуйте! Сделала все в точности как вы написали, шаг за шагом — то кнопка отправки сообщения не работает!

    Ответить
  • dimadv7

    Здравствуйте, хм, а что в консоли? Есть ошибки? И попробуйте исходник загрузить на свой сервер. Работает ли у вас он?

    Ответить
  • сергей

    помогите мне с формой, не понимаю что и где должно вставляться. а то письма на приходят на почту. на опен сервере есть в лого что почта работает на реальном хосте нет

    Ответить
  • dimadv7

    Реальный хост не бесплатный? не тестовый период? Хостер позволяет отправлять письма на бесплатные почтовые ящики и ящики которые созданы не специально для домена? То есть не вида info@sitname.ru. Очень часто можно отправлять письма только на почтовый адрес привязанный к домену.

    Ответить
  • Дмитрий

    Не знаю, что не так. Обычная форма с вашего сайта встала «на ура», а вот эта без перезагрузки что то капризничает. Ничего не менял, ставлю на тот же эксперимент Альпы домен — не отправляет письма и всё тут…

    Ответить
  • Александр

    Добрый день, приходит пустое письмо((
    Вот так: Имя: ; Телефон: ; Email: ; Сообщение: ;

    Ответить
  • dimadv7

    Здравствуйте. Значит атрибут name у полей, не соответствует тому, который принимаете в обработчике.

    Ответить
  • Владимир

    Все скопировал.
    В итоге Cannot set property 'innerHTML' of null
    Подскажите пожалуйста, в чем проблема?

    Ответить
  • dimadv7

    Скорее всего в момент исполнение скрипта, документ еще не загрузился, проверьте порядок подключения, чтобы было как в статье.

    Ответить
  • Максим Саенко

    Здравствуйте Дмитрий! С удовольствием читаю все Ваши статьи. Они отличаются конкретикой, лаконичностью, краткостью и в то же время, понятливостью (если можно так выразиться).
    У меня такой вопрос: как прикрутить данную форму на сайте через модальное окно?
    Есть ли такая возможность?
    Заранее спасибо.
    С ув. Максим

    Ответить
  • dimadv7

    Здравствуйте, спасибо большое. Да есть же форма подобная, но и с модальным окном. Вот тут. Но, думаю, и эту можно, а в чем собственно сложность? Можно как при помощи плагина какого-нибудь для модального окна. Но, думаю, в 2018 — это преступление подключать какой-то из плагинов. Просто делаем див, помещаем туда форму, скрываем его в css, а потом при клике на кнопку доавляем класс скрытом диву, и добавляем новому классу в css видимость.

    Или просто менять видимость элемента при клике на кнопку:

    Показать и скрыть элемент при клике можно так:

    $('.toogle-element').on('click', function() {
            $(".toogled-element").fadeToggle();
    });
    // где toogle-element - элемент по которому кликаем, toogled-element - элемент который нужно показать или скрыть
    
    Ответить

Comments are closed.

Подписывайтесь на обновления, чтобы ничего не пропустить.