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

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

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

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

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

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

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

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

  • Vlad S.

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

    Ответить
  • dimadv7

    Здравствуйте. Поменяйте id у форм. посмотрите в комментариях, уже ребята делали и описывали как вроде бы. Вообще, что конкретно не получается. Как вы пробовали. Какая ошибка вылазит и т.д?

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

    Здравствуйте Дима. На локальном сервере форма работает при переносе на хостинг перестает работать, выдает ошибку «Cообщение не отправленно. Пожалуйста, попрбуйте еще раз», помогите пожалуйста разобратся.

    Ответить
  • dimadv7

    Здравствуйте. Ну начнем с базовых вопросов :) Хостинг платный? с поддержкой php? Не тестовый период? Хостинг позволяет отправлять письма с любых адресов, а не только с почты, созданной специально для сайта (blabla@sitename.ru)?

    Ответить
  • Наталия

    А как добавить поле с Email ?
    Добавила (заменила строку) вот это в форму:
    $message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].';';
    А в html добавила input:

    СООБЩЕНИЯ НЕ ОТПРАВЛЯЮТСЯ. Что еще нужно добавить?

    Ответить
  • dimadv7

    Вы на сервере тестируете?

    Ответить
  • Наталия

    да на сервере

    Ответить
  • dimadv7

    Значит нужно добавить input, например такой:

    <input name="email" type="email" placeholder="Введите ваш E-mail" required />

    А в обработчике дописать так:

    $message = 'Имя: '.$_POST['name'].'; Почта: '.$_POST['email'].'; Телефон: '.$_POST['telephone'].';';
    Ответить
  • Наталия

    Спасибо) работает)

    Ответить
  • Аня

    Добрый день!
    У меня несколько форм, все с разными ид, после нажатия на кнопку выбивает:
    404 Cannot find the file
    Web server cannot find the file or script you requested. Please check the URL to ensure that the path is correct.

    роде уже и путь пыталась влепить в код , а все равно не идет.
    Буду очень благодарна, который день не запускается ничего…

    Ответить
  • Аня

    ой , форму пропустила:

    ОТПРАВИТЬ ЗАЯВКУ

    Ответить
  • Аня

    form id=»glavnaya» method=»post» action=»» onSubmit=»return checkForm(this)»>

    ОТПРАВИТЬ ЗАЯВКУ

    </form

    Ответить
  • Аня

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

    Ответить
  • dimadv7

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

    Ответить
  • Аня

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

    Ответить
  • dimadv7

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

    Ответить
  • Чайник

    Здравствуйте! Мой обработчик:
    <?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-х строчках имена одинаковые:
    «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); }

    Ответить
  • чайник

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

    Ответить
  • dimadv7

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

    Ответить
  • чайник

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

    Ответить
  • чайник

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

    Ответить
  • чайник

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

    Ответить
  • Zy

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

    Ответить
  • dimadv7

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

    Ответить
  • Ян

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

    Ответить
  • dimadima

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

    Ответить
  • Хабиб Омаров

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

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

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

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

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

    Ответить
  • dimadv7

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

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

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

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

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

    Ответить
  • dimadv7
    <a href="smartlanding.biz>Создание landing page</a>"

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

    Ответить
  • dimadv7

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

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

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

    Ответить
  • Чайник

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

    Ответить
  • dimadv7

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

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

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

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

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

    Ответить
  • dimadv7

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

    Ответить
  • Чайник

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

    Ответить
  • Чайник

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

    Ответить
  • Чайник

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

    Ответить
  • dimadv7

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

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

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

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

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

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

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

    Ответить
  • Чайник

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

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

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

    Ответить
  • dimadv7

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

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

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

    <iframe src="/callback/index.html"></iframe>
    
    Ответить
  • Максим

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

    Ответить

Comments are closed.

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