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

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

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

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

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

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

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

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

  • dimadv7

    Здравствуйте. Ну все верно, я же прям в статье написал что не работает проверка через required. Нужно через js делать или php.

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

    Да, простите. невнимательно вашу переписку с Ольгой прочла, думала проблема решилась. дело в том, что мне эта очистка то и не нужна, в идеале буду делать, чтоб форма скрывалась, и выводилось сообщение. я убрала эти 5 строчек $(':input', '#add')… Все хорошо, :required заработало, но сообщение вверху с «Оставьте ваши контакты и наш консультант свяжется с вами» не сменилось.. разве очистка связана с выдачей самого сообщения? простите, если туплю..

    Ответить
  • dimadv7

    Нет, вы правы — не связанно. Должно рабоать. Обратите внимание. В исходнике есть :

    <div id="messegeResult">
    <p> Оставьте ваши контакты и наш консультант свяжется с вами </p>
    </div>
    

    И в обработчике и скрипте есть условия вывода в этот div сообщения:

    if ($result){
            echo "<p>Cообщение успешно отправленно. Пожалуйста, оставайтесь на связи</p>";
        }
    

    и скрипт:

    error: function(response) {
                    document.getElementById(result_id).innerHTML = "<p>Возникла ошибка при отправке формы. Попробуйте еще раз</p>";
                    }
    Ответить
  • Саша

    У меня прописано в случае прохождения валидации — отсылает сообщение и выводит echo. Я только что поняла, что сообщение и не отправилось.. не понимаю почему когда возвращаю эти пять строчек, он отсылает..)

    Ответить
  • dimadv7

    Ну изначально все и без них работало, это уже когда Ольга спросила, то добавил их. Должно работать. Где-то ошиблись просто. Вообще ajax — хитрая штука, тоже не очень разбираюсь в этой технологии

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

    Добрый день. Скачал ваш исходник формы. Поставил на хостинг. При нажатии на кнопку отправить с пустыми полями отправляется письмо. А должно быть не правильность заполнения вылезти..помогите в чём проблема? спасибо.

    Ответить
  • dimadv7

    Здравствуйте. В статье же писал об этом!!!

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

    Доброго времени суток! а как реализовать данную форму в виде модального окна…нажимаем кнопку ЗАКАЗАТЬ и вылетает окно с формой по середине экрана…Мне просто нравится использовать вашу форму. Удобно в установке и редактирование…

    Ответить
  • dimadv7

    Привет, используй скрипт модального окна. Или вот я когда-то пытался для себя сделать, но есть минусы: https://smartlanding.biz/kak-sdelat-knopku-zakazat-obratnyj-zvonok.html

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

    Приветствую, возник вопрос об использовании нескольких форм на странице, не подскажете как это реализовать?

    Ответить
  • dimadv7

    Здравствуйте. А вы пробывали? В чем проблема?

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

    У меня несколько форм на странице, а работает только одна

    Ответить
  • dimadv7

    Так, что не работает. Напишите конкретно?

    Ответить
  • Елена

    Здравствуйте. Я так же пробовала подключить несколько одинаковых форм — после отправки письма сообщение об отправке отображается на верхнюю форму, а та, в которой заполнялась информация остается неизменной. Как это исправить? Может сообщение отображать в сплывающем окне? если да, то как сделать?

    Ответить
  • Елена

    Да, и еще, письма иногда (не всегда!) приходят пустыми…

    Ответить
  • dimadv7

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

    Ответить
  • Елена

    Оставьте ваши контакты и наш консультант свяжется с вами

    Оставьте ваши контакты и наш консультант свяжется с вами

    Ответить
  • Елена

    Получилось!!! Как вставить сюда код?

    Ответить
  • Елена

    Есть только сложность: он не вставляет результат, если заменять другие теги, как h1 и т.д.

    Ответить
  • dimadv7

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

    Ответить
  • Елена

    Ой как не люблю формы…
    Готовое рабочее решение для одинаковых форм получилось таким:

    <div id="form-1" class="form">
      <div id="messegeResult_1"><h3>ОСТАВЬТЕ ЗАЯВКУ</h3>
      <p>на бесплатную оценку<br>вашей недвижимости</p></div>
      <form  method="post" action="" id="formMain_1">
        <input id="telephone"  class="pole" type="Tel" name="telephone" placeholder="Ваш телефон" maxlength="30" autocomplete="off" />
        <input id="button" type="button"  class="btn" value="Оставить заявку" onclick="AjaxFormRequest('messegeResult_1', 'formMain_1', 'form.php')"/>
      </form>
    </div>
    
    <div id="form-2" class="form">
      <div id="messegeResult_2"><h3>Хотите узнать как можно легко решить ваш вопрос?</h3>
      <p>Оставьте заявку и наш менеджер свяжется с вами</p></div>
      <form  method="post" action="" id="formMain_2">
        <input id="telephone"  class="pole" type="Tel" name="telephone" placeholder="Ваш телефон" maxlength="30" autocomplete="off" />
        <input id="button" type="button"  class="btn" value="Оставить заявку" onclick="AjaxFormRequest('messegeResult_2', 'formMain_2', 'form.php')"/>
      </form>
    </div>
    Ответить
  • Егор

    А где в статье написано? У меня тоже отправляет незаполненные поля.

    Ответить
  • dimadv7

    В статье написано, что этой проверки нет. В комментариях уже отвечал, что пока руки не доходят. Исправить очень просто, достаточно обычной проверки на заполнение поля. Например:

    if(!empty($_POST['mail']))
    {
    код
    вывод нужного сообщения
    }
    
    else {
    echo "Ошибка при отправке";
    }

    На днях поправлю :)

    Ответить
  • Илья

    Здравствуйте. Не могу разобраться, что я делаю не так. Сменил обработчик на собственный cgi скрипт — без проверки заполненности полей. В итоге получается, что обычный html required не срабатывает. Форму можно отправить пустой. Как добавить в этот скрипт проверку заполненности полей ДО того, как обработчик получит данные?

    Ответить
  • Дядя Алёша

    Большое СПАСИБО.
    Только у Вас разобрался с тонкостями данной темы. Только маленький косяк нашел — не работает перевод строки в Вашем исполнении. Большое спасибо за материал.

    Ответить
  • dimadv7

    Наверное делать это на javascript. А как еще? Но сходу так я не выдам вам код, нужно садиться и разбираться. Что-то вроде такого:

    <script type='text/javascript'>
    function validate(){
       //Считаем значения из полей name и email в переменные x и y
       var x=document.forms['application']['telephone'].value; //applivation - это атрибут name="" у формы, а telephone - это атрибут name="" у поля, которое хотим проверить
       var y=document.forms['application']['email'].value;
       //Если поле telephone и email пустое, выведем сообщение и предотвращаем отправку формы
       if (x.length==0 && y.length==0 ){
          document.getElementById('namef').innerHTML='* Укажите E-mail или Телефон для связи';
          return false;
       }
    }
    </script>
    
    Ответить
  • dimadv7

    Здравствуйте, ну у меня работает, обычный br ставьте и будет вам перевод строки :)

    $message = 'Имя: '.$_POST['name'].';<br/> Телефон: '.$_POST['telephone'].';';
    Ответить
  • Лена

    не приходят на почту сообщения(((
    помогите пожалуйста
    пишет успешно отправлено…

    <?php
    if(!empty($_POST['telephone'] ))
    {
    $to = "woloshindima@ya.ru";
    $from = 'madmweb@gmail.com';
    $subject = "Проверка почты";
    $message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].';';
    $headers = "Content-type: text/html; charset=UTF-8 \r\n";
    $headers .= "From: \r\n»;
    $result = mail($to, $subject, $message, $headers);

    if ($result){
    echo «Cообщение успешно отправленно. Пожалуйста, оставайтесь на связи»;
    }
    else{
    echo «Cообщение не отправленно. Пожалуйста, попрбуйте еще раз»;
    }
    }
    else {
    echo «Обязательные поля не заполнены. Введите номер телефона»;
    }
    ?>

    Ответить
  • dimadv7

    Давайте в вк пообщаемся, скиньте свой файл, а то wordpress режет код в комментариях.

    Ответить
  • Лена

    Спасибо Дмитрий) я вчера таки добила этот код)) поменяла кусок на:

    $to      = 'madmweb@gmail.com';
    $subject = 'Проверка почты';
    $message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].';';
    $headers = "Content-type: text/html; charset=UTF-8 \r\n";
    $headers = 'From: madmweb@gmail.com' . "\r\n" .
        'Reply-To: madmweb@gmail.com' . "\r\n" .
        'X-Mailer: PHP/' . phpversion();
    

    и заработало. Отличная вещь! Спасибо за прекрасную статью))

    Ответить
  • dimadv7

    Ну главное, что работает)

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

    Всё отлично работает, но есть одно «но». В коде нет обработки спецсимволов. То есть в формы ввода можно занести опасные коды и они прочитаются на серваке, как коды. Добавьте, пожалуйста, htmlentities с соответствующей кодировкой в обработчик. Сам бы добавил, но у меня IQ не хватает. Заранее спасибо!

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

    Допишите экранирование переменных, плииз…

    Ответить
  • dimadv7

    Так там же ограничение на количество символов. Вряд ли можно что-то вредоносное вместить в 30 символов. Вообще, конечно. Можно сотню проверок наворотить, но просто не заморачивался с этим пока.

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

    Предлагаю дополнить форму обработки следующими строчками:
    if(isset($_POST['name']) && isset($_POST['telephone'])){
    $name=htmlentities($_POST['name']);
    $telephone = htmlentities($_POST['telephone']);
    }
    В этом случае всё должно быть зэ бэст.

    Ответить
  • dimadv7

    Это проверка на то, не пуста ли переменная? Прикольно. В исходнике есть проверка, но там на == 0, наверное, ваш вариант правильнее :) Поправлю на днях.

    Ответить
  • Алексей

    СПС Красава все работает!

    Ответить
  • Алексей

    С первого раза !

    Ответить
  • dimadv7

    Отлично :)

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

    Подскажите все такие как разместить 2е форме на одной странице?

    Ответить
  • dimadv7

    А вы уже пробовали как-то это сделать?

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

    да, пробовал как описала 2015-04-22 ЕЛЕНА но формы у меня на одной странице разные

    Ответить
  • dimadv7

    Хорошо, давайте начнем с того, что у вас получается конкретно, какая ошибка или еще что?

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

    Есть скайп? ЧТО бы быстрее? Ошибок нет формы две разные с разным набором полей к тому же обязательных для заполнения. Как можно реализовать такую форму?

    Ответить
  • dimadv7

    Давай в вк, напиши. Только, ты говоришь, что не получается, а ошибок нет. Странно! Что тогда не получается, что ты сделал, после чего вдруг понял, что не получается?

    Ответить
  • Виталий

    Мне нужно сделать чтоб сообщение об успешной оправке выводилось в модальном окне, а не переходило на новую страницу

    Ответить
  • dimadv7

    Тогда это форма вам не подойдет. Она выводит сообщение прямо на странице, а не в модальном окне.

    Ответить
  • Виталий

    у меня имеется несколько форм, я сделал php обработчик отправки на email, он работает. Но выводит сообщение об отправке на новую пустую страницу, а мне нужно чтоб на эту же страницу выводилось сообщение об отправке. Подскажите как это можно сделать

    Ответить
  • Виталий

    Уже сделал, спасибо)

    Ответить
  • Константин

    Супер форма! А как можно добавить выпадающий список select для выбора клиенту? Например:
    Причина обращения (и ниже select):
    — Технический вопрос —
    — Вопрос по оплате —
    — Претензия —

    Ответить

Comments are closed.

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