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

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

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

  • макс

    Классная форма!
    Тут у меня встал такой вопрос по lading страничкам)))
    decorstudia. ru есть сайты на подобии этого на странице когда листаешь в низ там акции, таймер и форма обратной связи а на заднем фоне у них картинка. как это можно реализовать на wordpress?

    Ответить
  • dimadv7

    Вы, наверное, о параллакс эффекте говорите? Об этом? lunita.ca/. Достаточно сложный эффект, который в большинстве случаев реализуется на javascript. Поищите, может быть плагин какой-то есть. Или скачайте тему, в в которой уже реализован данный эффект.

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

    Не ту ссылку вставил, пардон) shtorkindom. ru/
    там под формой обратной связи и акцией есть фон (картинка) как это реализовать?

    Ответить
  • dimadv7

    Сделать контейнер, например

    <div class="formBg"> </div> 

    , в него вставить форму и все, что нужно. А после этого в таблице стилей задать .formBg{
    background: путь к картинке; width: 000px; и height: 000px;

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

    Блин точно))) пора на воздух))))

    Ответить
  • dimadv7

    Бывает :)

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

    я думаю можно все равно добавить в статью)))

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

    библиотеку jquery*

    Ответить
  • Ольга

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

    Ответить
  • dimadv7

    Здравствуйте, сообщение выводиться. Вы просто попробуйте на локальном или реальном сервере ) Это когда просто открываешь индексный файл, тогда не работает, как и письма не уходят, а когда делаете все на сервере, то отлично работает)

    Ответить
  • Ольга

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

    Ответить
  • dimadv7

    Только что проверил — работает. Может ошиблись где-то? Если хотите, выложите исходник, я гляну. Можете на почту или в ВК.

    Ответить
  • Ольга

    нашла проблему. у меня кнопка отправки в виде картинки, т.е type=»image», а с type=»button» все работает, только я хочу свою картинку)

    Ответить
  • Ольга

    вместо <input написала <button type="button". Все прекрасно работает. Спасибо. Еще если можно подскажите, как сделать, чтобы выдавалась ошибка, если не все поля заполнены?

    Ответить
  • dimadv7

    Можно input заменить на

    <img src="" ... />

    , и тоже работать будет. Проверил только что. А вот с проверкой — проблемка. Я обычно пользовался атрибутом required, но тут он почему-то не работает. Нужно проверку формы при помощи javascript осуществлять, но до этого руки, пока, не доходили.

    Ответить
  • dimadv7

    Но не уверен, что будет работать, так как не проверял

    Ответить
  • Ольга

    У меня обязательный только e-mail
    Сделала так:
    <?php
    $to = "..";
    $subject = "..";
    if(!empty($_POST['mail']))
    {
    $message = 'Имя: '.$_POST['name'].'; Адрес: '.$_POST['mail'].';Сообщение: '.$_POST['text'].';';
    $headers = "Content-type: text/html; charset=UTF-8 \r\n";
    $headers .= "From: \r\n»;
    $result = mail($to, $subject, $message, $headers);
    }
    if ( $result){
    echo «Thank you! Your message has been successfully sent. «;
    }
    else {
    echo «Type your e-mail, please»;
    }
    ?>
    Вроде работает
    Еще если можно два вопроса:
    1) как сделать, чтобы поля после отправки очищались
    unset($_POST['name'], $_POST['mail'], $_POST['text']); не работает
    2)чем объясняется необходимость переименования index.html в index.php?

    Ответить
  • dimadv7

    Спасибо, что отписались. Для того, чтобы отчистить поля добавьте эти строки, перед последней скобкой в главном файле

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

    Это универсальный вариант, он отчищает значение чекбоксов, полей ввода и радиокнопок.

    В этой строке нужно поменять #formMain на id вашей формы:

    $(':input','#formMain')
    

    Вы не против, если я обновлю статью с учетом вашей проверки email(а)? Действительно, все работает и с html!!! я посему-то был уверен, что не сработает. Спасибо вам за наводку.

    Ответить
  • dimadv7

    то есть должно быть так:

    <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>
    
    Ответить
  • Ольга

    Спасибо. Конечно, обновляйте. Пошла менять на html, php меня немного пугало))) Кроме того, в php у меня не срабатывает автоматическая проверка правильности указания e-mail с помощью type=»email»

    Ответить
  • dimadv7

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

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

    Добрый день, Дмитрий. Просмотрите, пожалуйста, форму по вот этой ссылке: postovoy.net/22.html . Если вдруг Вас заинтересует, буду благодарен за статью про подключение этой формы на сайт.

    Ответить
  • dimadv7

    Здравствуйте. Честно говоря, не очень хочется писать рерайт. Ну там же и есть статья о том, как ее подключить. Чем она отличается от моих?

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

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

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

    Апдейтом к предыдущему комменту.
    Форма по той ссылке с анти-спамом, проверкой, подсветкой и всплывающими окошками. Красиво реализовано.

    Ответить
  • dimadv7

    Нет, письма складываются в одну из папок. Если не ошибаюсь tmp -> !sendmail. Давно уже не пользовался denwer. Там они в txt формате по датам разложены. Не знаю, может быть как-нибудь сделаю обзор, пока немного другие планы.

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

    ширина страницы мешает, не получается :(

    Ответить
  • dimadv7

    Опиши подробнее в чем проблема.

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

    Изображение которое я вставляю в страницу через css не отображается
    ширина стр не дает скажем на 3000px сделать изображение

    Ответить
  • dimadv7

    :) :) :) Ничего не понял!

    Ответить
  • dimadv7

    Почему не отображается изображение? Где оно должно быть?

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

    все разобрался)
    margin-bottom: 0px;
    margin-left: -900px;
    решило)

    но появилась другая проблема, с формой обратной связи)
    1 в хедере вторая в page
    заполняешь в page нажимаешь отправить, а кнопка получается запрашивает поля в хедере

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

    Дмитрий, добрый день. Извиняюсь, снова Вас побеспокою. Всё мучаюсь с формой, но на этот раз использую Вашу. Уже вывел сайт на домен. Возникает несколько проблем. Во-первых, При нажатии на кнопку в «messegeResult» попадает не только запланированное сообщение «успешной отправки», но и часть php-кода. Во-вторых, сообщение выводится, но самой отправки не происходит. Видимо, я налажал где-то в php-коде, потому что html в порядке. Но сколько бы я не проверял, никакой ошибки не нашел (чистого времени потратил не меньше 6 часов на поиск этой ошибки) :( Скину ссылки на Code-pen html и php страницы:
    codepen.io/anon/pen/gbaPJE.html
    codepen.io/anon/pen/gbaPJE.js
    Буду крайне признателен, если вы сможете мне помочь. Заранее благодарю.

    Ответить
  • dimadv7

    Ответил в вк)

    Ответить
  • toxa

    Привет, спасибо за скрипт, проблема с кодировкой, иероглифы пишет, что делать? у страницы стоит utf-8

    Ответить
  • dimadv7

    Привет. На чем тестируешь?

    Ответить
  • Ильдар

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

    Ответить
  • dimadv7

    В смысле? :) :) :) НУ так статья же об этом)

    Ответить
  • Георгий

    Добрый вечер! Можете посмотреть? Не выводит оповещение об отправки. Не могу понять в чем причина. test7.html-box.com

    Ответить
  • dimadv7

    Привет, у меня выводит латиницей слово «Otpravleno»)))

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

    подскажите, пожалуйста, как я могу прикрутить эту форму на сайт wordpress?

    Ответить
  • dimadv7

    Все аналогично, как описано в статье, только обработчик в корень wp класть, туда, где wp-config.php

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

    Спасибо!

    Ответить
  • Дима

    Как реализована форма на Вашем сайте?

    Ответить
  • dimadv7

    Привет. Плагин contact form7. Вот все никак руки не доходят сделать его чуть приличнее (подровнять все и уменьшить отступы)

    Ответить
  • Васька

    Привет. А как вставить две таких формы на одной странице? Спасибо

    Ответить
  • dimadv7

    Привет, а ты пробовал это сделать?)))

    Ответить
  • Васька

    вчера получилось) не мог понять в чем причина — оказалось просто опечатка) когда меня айди формы пропустил букву)

    Ответить
  • dimadv7

    Здорово. Я просто спросил, чтобы понимать с чего начать помогать)) Ну в смысле ты попробуешь, получишь какую-то ошибку, и мы бы начали разбираться)) А ты видишь, и сам разобрался))

    Ответить
  • Саша

    Здравствуйте! Взяла вашу реализацию, но со своей формой. Есть проблема, не могу понять, как решить.. У меня обязательные поля идут в таком порядке: «контактное лицо», ниже «телефон», требуют ввода с помощью применения псевдокласса :required. До добавления Вашего кода работало так: при нажатии на кнопку отправки формы, если не заполнили поле «контактное лицо», всплывает возле поля сообщение «пожалуйста, заполните это поле», заполняем, но еще не заполнили поле «телефон» и нажимаем на кнопку, выдает к нему соответствующее сообщение. Добавила Ваш код, даже если заполнено поле «контактное лицо», но «телефон» не заполнено, он очищает все поля и снова требует заполнить начиная с «контактного лица»… Ох, много прямо написала, простите, что так. Надеюсь на ответ! Заранее спасибо!!

    Ответить

Comments are closed.

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