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

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

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

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

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

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

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

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

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 168

  1. dimadv7

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

    • Аня

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

    • 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 надо что вносить? СПАСИБО!!!

    • dimadv7

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

  5. чайник

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

  6. чайник

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

  7. чайник

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

  8. Zy

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

    • dimadv7

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

  9. Ян

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

  10. dimadima

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

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

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

  12. Александр

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

    • Александр

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

    • dimadv7

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

  13. Александр

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

  14. Александр

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

    • dimadv7

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

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

    • dimadv7

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

  15. Андрей

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

  16. Чайник

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

    • dimadv7

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

  17. сергей

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

    • dimadv7

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

  18. сергей

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

  19. Чайник

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

  20. Чайник

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

  21. Чайник

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

    • 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 все-таки!?

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

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

    • dimadv7

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

  29. Кирилл

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

  30. Кирилл

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

  31. homeprorab.info

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

  32. janjy2

    Daily updated sissy blog
    teens dating women sex toys hГґtels Г  budapest
    http://feminisation.xblog.in/?view.mandy
    leopard print mary janes free videos of bisexuals girls school accessories online dating for free free local contacts muppets grumpy old men what is flax seeds used for testicular pictures

  33. Андрей

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

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

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

    • Андрей

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

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

  34. Serbkr

    Предлагаем купить вентилятор Вентс по демпинговой цене со склада в Киеве. Гарантия производителя 5 лет. Скидка 10% с купоном «ALFAVENT»

    http://alfa-vent.com.ua/ventilyator-vents-125-mav-press/

  35. Brucesob

    копирайтинг — инвестиции, программирование.

  36. Михаил

    класм

  37. Продвижение сайтов в поисковых системах

    Доброго времени!

    Решусь предложить Вам свою услугу продвижения вашего сайта smartlanding.biz ссылками-донорами. На сегодня имеются профильный и статейный тарифы.

    Будем продвигать Вас по вашим ключевым запросам.

    Что вы получите http://prodvizheniya.net/statejnoe-prodvizhenie-sajta/

  38. Bradleymuh

    Профиль Rehau Delight — Застеклить лоджию, Профиль Rehau Blitz.

  39. StephenPrind

    недорогие женские блузки — интернет-магазин джемперов, купить коктейльное платье недорого.

  40. Marianaagoks

    https://i.ytimg.com/vi/2zjMsnE5SCo/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLA4DpCBsG5J-Xu8pWS5QvmYYb1uFA

    Всем приветики! Недавно научилась делать видео и создала канал. Мечта сбылась, делаю видео, создала канад ютубе, а просмотров нет. Долгое время мучилась, потратила много денег, для раскрутки канала, а толку мало и вот сейчас получилось, нашла хороший способ.Я так рада, что решилась поделиться с вами. У меня настроение победителя, смотрите и повторите, кому нужно, это просто.
    ————————
    Всем пока пока от Марианы
    Будет что-то стоящее поделюсь.

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