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

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

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

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

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

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

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

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

  1. dimadv7

    у вас на сервере ,если загрузить исходник, работает форма?

    1. Аня

      Не знаю, к счастью или нет, но исходники работают

    2. dimadv7

      Ну, а теперь поменяйте дизайн и все будет в порядке))) Кончено к счастью. Теперь мы знаем, что с сервером все в порядке)

  2. Чайник

    Здравствуйте! Мой обработчик:
    <?php
    /* Здесь проверяется существование переменных */
    if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == '') unset($name); }
    if (isset($_POST['phone'])) {$phone = $_POST['phone']; if ($email == '') unset($email); }
    if (isset($_POST['wishes'])) {$wishes = $_POST['wishes']; if ($message == '') unset($message); }

    /* Проверяем заполнены ли все поля */
    if (isset($name) && isset($email) && isset($message)) {

    /* Убираем все лишние пробелы и переносы строк, а также преобразуем все теги HTML в символы */
    $name = htmlspecialchars(trim($name));
    $phone = htmlspecialchars(trim($phone));
    $wishes = htmlspecialchars(trim($wishes));

    /* Сюда впишите свою эл. почту */
    $address = "xxx@list.ru";

    /* А здесь прописывается текст сообщения, \n - перенос строки */
    $sub = "Сообщение с моего сайта!!!";
    $mes = "Тема: Заказ обратного звонка!\nИмя: $name\nТелефон: $phone\nВаше сообщение: $wishes";

    /* Отправка сообщения */
    $email='Заказ ';
    $verify = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:$email");

    if ($verify == 'true'){
    echo "Сообщение отправлено!";
    }
    else {
    echo "Сообщение не отправлено!Повторите";
    }
    }
    }
    else{
    echo "Вы заполнили не все поля!";
    }
    ?>
    Хочу использовать $verify вместо $result .
    Можно ли в или где реализовать третий вариант результата заполнения формы? Я - чайник...

  3. Чайник

    Виноват, в первых 3-х строчках имена одинаковые:
    "if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == '') unset($name); }
    if (isset($_POST['phone'])) {$phone = $_POST['phone']; if ($phone == '') unset($phone); }
    if (isset($_POST['wishes'])) {$wishes = $_POST['wishes']; if ($wishes == '') unset($wishes); }

  4. чайник

    Здравствуйте, Дмитрий! Извините, что намусорил... Пытаюсь запустить две формы на странице...не подскажете, а в Head надо что вносить? СПАСИБО!!!

    1. dimadv7

      Нет, нужно только менять id у форм, а так делать все точно так-же

  5. чайник

    Прекрасная форма! Работает и при размещении полей в таблице, и выводит изображение о состоянии, если заменить картинкой и вместо
    if ($result){
    echo "Cообщение успешно отправлено"; }
    поставить картинки, например
    ($result){
    echo ""; }

  6. чайник

    В кавычках типа img src='_mod_files/images/zapolnite.png'

  7. чайник

    Если используете несколько форм на странице, то для очистки полей формы после отправки предпоследние 5 строк скрипта из надо повторить со своим id формы

  8. Zy

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

    1. dimadv7

      Так есть же исходник, вроде бы к каждой статье, который можно скачать и посмотреть как работает. А вообще ладно, сейчас сделаю, чтобы можно было все копировать.

  9. Ян

    Супер Спасибо! Сайт классный с массой полезной информации! Я разобрался, можно было скачать исходник и подсветить исходный код в файле index, от туда можно скопировать, но с сайта намного удобнее, отдельное спасибо!

  10. dimadima

    Помогите, пожалуйста, не могу вставить 2 формы на одну страницу, id различные.

  11. Хабиб Омаров

    Было бы хорошо если прикрутили бы и проверку формы, и еще антиспам. Без проверки она и пустую форму отправляет

  12. Александр

    Подскажите в чем ошибка, как только не пробовал, никак не работает. Вот один из вариантов

    1. Александр

      Как сюда вставить код? Он удаляется из комментов...

    2. dimadv7

      Вставить код можно так [ html ] код [ /html ] - без пробелов в квадратных скобках. Но форма работает, скачайте исходник и просто замените почту. Убедитесь, что все работает. А потом уже вносите правки)

  13. Александр

    В том то и проблема что все то что есть и невкакую не работает. И изменения которые описаны в комментах пробовал ничего не помогает. Подскажите плиз где ошибка.
    Тут только почту поставил, больше нигде ничего не менял.

  14. Александр

    Сюда код не получается вставить и так как вы описали и так тоже не вставляется

    1. dimadv7
      <a href="smartlanding.biz>Создание landing page</a>"

      Должно работать.

    2. dimadv7

      Как тестируете, что не работает? Какая ошибка вываливается?

  15. Андрей

    Здравствуйте! Спасибо за полезную статью, все что вы описали - работает.
    Не могли бы вы мне помочь с кодом отправки данной формы в админку WordPress, для модерации комментариев. А то на почту отправляет, а в админку нет.

  16. Чайник

    dimadv7, СПАСИБО - все прекрасно работает! Но не подскажете: Нашел внешний генератор popup, вставляется на сайт, ес-но, через скрипт... По умолчанию у той формы обработка всякими Гетреспонсами, а мне хочется использовать то, что у меня уже есть. Короче, как правильно прописать в теле формы полный адрес на form. php , который у нас в корневой папке? Или "это так не работает"?... СПАСИБО !!!

    1. dimadv7

      Здравствуйте, спасибо. Не совсем понял, в чем проблема, но путь прописать полный пробовали? От корня сайта то есть

  17. сергей

    DIMADV7, в том то и дело, что у меня, виноват, "знаний не хватает"...чтобы прописать полный путь к form php в коде страницы... Обращение в поддержку того сервиса успеха не имело:
    Ajax Form Request (result_id,formMain,url); //you have to enter the correct parameters - это всё, что мне ответили...(пробелы сам наставил,чтобы не стерлось при отправке поста) Как правильно указать здесь полный url ? Файл php лежит в корневой папке сайта. СПАСИБО!

    1. dimadv7

      Я не совсем, все же, понимаю, что вы хотите сделать. Возьмите просто исходник, проверьте, работает ли он у вас на сайте. Ничего не меняйте, кроме почты. Когда заработает, пытайтесь вносить правки. И можете подробнее описать потом, что вы пытаетесь сделать? Для того, чтобы вставить код, нужно в квадратных скобках написать [ php ] код [ /php ], только без пробелов в скобках.

  18. сергей

    onclick="AjaxFormRequest('messegeResult_popup', 'formMain_popup', 'http://mysite/form.php')" не запускает...

  19. Чайник

    dimadv7, спасибо за внимание. Постараюсь понять, что вы написали про [ php ] код [ /php ].
    Моя проблемка: у меня на сайте стоит ваша форма и прекрасно работает. Но хорошего много не бывает, поэтому нашел удобный генератор попапов, в форму которого можно вставить свои атрибуты/имена формы, но... упс...- не работает так... А ооочень хочется, чтобы не привязываться к платным сервисами

  20. Чайник

    Сгенерированный дизайн формы ставится на страницу

  21. Чайник

    7 пробелов сам поставил, чтобы код не стерся

    1. dimadv7

      popup - это всплывающее окно, не пойму как оно мешает подключить форму. Чтобы вставить код вот так:

      <? echo "привет мир!"?>

      Нужно использовать такую конструкцию [ php ] код [ /php ], только пробел в скобках не ставить.

      Если нужна форма в модальном окне, попробуйте эту

      Если пытаетесь переделать свою, то не достаточно просто скрипт прописать, нужно следить за атрибутами name в форме. Нужно в обработчике брать информацию из соответствующих полей. То есть, если у вас есть поле с name="email", то в обработчике:

      'Имя: '.$_POST['name'].';

      Кроме того, скрипт привязан к id формы (formMain), если у вас другой, то замените все formMain на свой.

  22. Чайник

    Дмитрий, спасибо. Вдруг выкручусь, если мозгов хватит: попробую проверить скрипт src=' __www.leadsleap.com/widgetxgen/js.js?c=2915&u=yesss ... в части атрибутов формы Если найду причину, просто залью исправленный файл себе на сайт.

  23. Максим

    А подключить данную форму можно через include или iframe все-таки!?

    1. dimadv7

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

  24. Максим

    Я все-таки подключил так:
    создал папку, например callback туда загрузил все файлы и подключил

    <iframe src="/callback/index.html"></iframe>
    
  25. Максим

    Скрипт-то работает! В избранное полубасу!! :))))

  26. Максим

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

    <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>
    

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

  27. Максим

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

  28. Aleks

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

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

    1. dimadv7

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

  29. Кирилл

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

  30. Кирилл

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

    1. dimadv7

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

  31. homeprorab.info

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

  32. Андрей

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

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

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

    1. Андрей

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

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

  33. Михаил

    класм

  34. Михаил

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

  35. Таня

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

    1. dimadv7

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

  36. сергей

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

    1. dimadv7

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

  37. Дмитрий

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

  38. Александр

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

    1. dimadv7

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

  39. Владимир

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

    1. dimadv7

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

  40. Максим Саенко

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

    1. dimadv7

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

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

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

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

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