Smartlanding

Ajax форма обратной связи в модальном окне

Ajax форма обратной связи Всем привет. Засыпали вопросами о том, как реализовать форму, которая появляется в модальном окне после нажатия на кнопку, а после отправки, выводилось бы сообщение об успехе или провале.

Думаю, полно уже подобного в интернете, но раз народ просит, то решил сделать. Тем более, подобный функционал должен присутствовать почти на каждом лендинге для реализации кнопки обратного звонка. И действительно, сейчас все больше появляется результатов АБ — тестирования, которые говорят, что открытые формы работают хуже, чем те, что спрятаны в модальное окно и открываются после нажатия на кнопу.

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

Примечание! Я не буду подробно описывать каждое действие, а предлагаю вам готовый вариант в исходнике. Если возникнут вопросы — пишите в комментариях. Будем разбираться :)

Ajax форма обратной связи

Сегодня начнем не с jQuery, а с верстки кнопки и формы. Все скрипты подключим в конце страницы.

Кнопка, по нажатию на которую будет открываться модальное окно:

<a class="mainButton" href="#modal">Оставить заявку</a>

Класс можете задать любой, а вот в href напишите #modal — это будет id у контейнера с затенением и контактной формой.

Теперь приведу код формы и блока, на котором будет располагаться форма:


<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">

<div class="remodalBorder">

<img src="img/sendico.png">

  <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>

<form id="form">

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

        <input type="text" class="putName" name="name" placeholder="Ваше ваше имя" required>
        <input name="phone" type="tel" class="putPhone" placeholder="Введите номер телефона" required>
        <input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ">
        <input type="hidden" name="formData" value="Заявка с сайта">

<a style="font-size:12px; text-align:center; color:rgba(255, 255, 255, .3);" href="#">Хочу такую форму на свой сайт</a>

    </form>

</div>

</div>

Добавив стили, выглядеть это стало так:

простая форма обратной связи на ajax
Для создания модального окна, использовалась библиотека Remodal. Это набор из css и js файлов, как раз для создания анимированных модальных окон. Можете скачать по ссылке или уже с моими правками в конце статьи.

Между тегами head подключаем стили:

 <link rel="stylesheet" href="css/remodal.css">
 <link rel="stylesheet" href="css/remodal-default-theme.css">

А перед закрывающимся тегом body — добавляем скрипты:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="dist/remodal.min.js"></script>
<script src="js/script.js"></script>

Script.js — это скрипт для обработки формы. Тот самый Ajax, который позволяет нам осуществить всю процедуру без перезагрузки страницы:

$(document).ready(function () {
 $("form").submit(function () {
 // Получение ID формы
 var formID = $(this).attr('id');
 // Добавление решётки к имени ID
 var formNm = $('#' + formID);
 $.ajax({
 type: "POST",
 url: 'mail.php',
 data: formNm.serialize(),
 success: function (data) {
 // Вывод текста результата отправки
 $(formNm).html(data);
 },
 error: function (jqXHR, text, error) {
 // Вывод текста ошибки отправки
 $(formNm).html(error);
 }
 });
 return false;
 });
});

Не буду приводить исходный код css и js из файлов, отвечающих за модальное окно и форму, так как они достаточно объемы. Если что, смотрите в исходнике. А вот php обработчик во многом стандартный (если можно так сказать):

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST['name'])) {$name = $_POST['name'];}
    if (isset($_POST['phone'])) {$phone = $_POST['phone'];}
    // if (isset($_POST['email'])) {$email = $_POST['email'];}
    if (isset($_POST['formData'])) {$formData = $_POST['formData'];}

    $to = "site@sitename.com"; /*Укажите адрес, га который должно приходить письмо*/
    $sendfrom   = "support@sitename.ru"; /*Укажите адрес, с которого будет приходить письмо, можно не настоящий, нужно для формирования заголовка письма*/
    $headers  = "From: " . strip_tags($sendfrom) . "\r\n";
    $headers .= "Reply-To: ". strip_tags($sendfrom) . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
    $subject = "$formData";
    $message = "$formData
 <b>Имя пославшего:</b> $name
<b>Телефон:</b> $phone";
    $send = mail ($to, $subject, $message, $headers);
    if ($send == 'true')
    {
    echo '<center>

Спасибо за отправку вашего сообщения!

</center>';
    }
    else
    {
    echo '<center>

<b>Ошибка. Сообщение не отправлено!</b>

</center>';
    }
} else {
    http_response_code(403);
    echo "Попробуйте еще раз";
}?>

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

Вот такая ajax форма получилась. Извините, что не пытался объяснить подробно, как делался каждый элемент. Просто хотелось дать готовый результат, а описывать все анимации, появления — нет никакого смысла. Качайте исходник и внедряйте на свой сайт. А на сегодня — все. Всем удачи!


Скачать исходник

Ребята, настоятельно прошу тестировать форму на реальном или виртуальном сервере (хостинге). Убедитесь пожалуйста, что ваш сервер поддерживает php, у вас платный тариф и не тестовый период.  В противном случае, в 90% случаев форма работать не будет.

 

Не ждите письма у себя в почтовом ящике, если вы просто открыли индексный файл в браузере и нажали кнопку «Отправить». Php — это серверный язык!

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

Обновленная версия статьи находится тут

149 комментариев

  • Сергей Смирнов

    Ребят а как сделать так , что бы сия форма не влияла на все стили страницы сайта? Ставлю на главной у меня вся страница меняется в стиль формы.

    вот эти стили ставлю перед хэдом

    Ответить
  • dimadv7

    Она и не должна влиять, проверь классы, чтоб не совпадали. В чем проблема-то?

    Ответить
  • Дмитрий

    От чего может быть при отправке вот так
    name=pp&phone=oi&submit=ОТПРАВИТЬ&formData=Обратная+связь#modal

    в адресной строке это появляется ну и форма конечно не отправляется

    Ответить
  • dimadv7

    От того, что GET запрос посылается, а не POST, наверное.

    Ответить
  • Дмитрий

    Но я просто скопировал и вставил себе на сайт…
    Не отсылается, просто обновляется страница и передаются данные в строку.

    Ответить
  • dimadv7

    А php вообще работает?

    Ответить
  • Vektor

    Появился такой вопрос.
    Как сделать что-бы форма после отправки не сворачивалась ?
    Нужно так что -бы эта форма работала как форма без перезагрузки страницы.

    Ответить
  • Евгений

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

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

    Здравствуйте . Спасибо за форма ! ) все хорошо встало , письма приходят . Но есть одна загвоздка . когда появляется сообщение от успешной отправки ,мы закрываем окно . Потом нажимаем на кнопку что бы опять вызвать форму . а вместо формы — остается сообщение об успешной отправки . Подскажите как это можно исправить ? Спасибо

    Ответить
  • Катя

    Опять — 25. Зачем, зачем пользователю опять показывать поля, в место того, чтобы сказать,что он уже отправлял форму? Ты рассчитываешь, что этот процесс так понравиться ему и он будет делать это снова и снова? Ну если очень надо то выводи сообщение об успехе или провале в другом месте. Сейчас оно заменяет форму, а ты выводи выше или ниже.

    Ответить
  • Карл

    добрый день, письма приходят, но нет текста, просто пишет телефон: имя: а самого текста нет, как исправить?

    Ответить
  • dimadv7

    Привет. Изменения делал какие-нибудь в атрибутах name?

    Ответить
  • Карл

    привет, нет, никаких изменений кроме мейла не делал

    Ответить
  • dimadv7

    А другие формы есть на странице? Хотя — это и не важно, должно работать, если ничего не менял. Но все таки, поставь вот тут id своей формы:

    $("#айдиФормы").submit(function () {
    Ответить
  • Артём

    Добрый день. Ничего не происходит при нажатии кнопки оставить заявку. По инструкции и коментам прошелся уже раза 2. Единственная разница в том что у меня привязан jquery 1.9.1 вместо 1.11.2. В чем может быть проблема?

    Ответить
  • dimadv7

    Тестируете на сервере? он не бесплатный? Не тестовый период? Ошибок в консоли нет? PHP вообще отрабатывает?

    Ответить
  • Артём

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

    Ответить
  • Артём

    И причем тут php? Сама форма не появляется.

    Ответить
  • Артём

    Жму на кнопу «заказать». В адресной строке добавляется #modal и ничего не происходит

    Ответить
  • Артём

    Дело было в прокладке XD. А файл лежал в папке js.
    Поправил на js/remodal.min.js Заработало. Вот бы теперь узнать как модифицировать эту форму чтобы можно было делать вложение в письмо

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

    Добрый вечер, Дмитрий. Подскажи, пожалуйста, как сделать чтобы после нажатия кнопки «Отправить» посетителю открывалась новая страница «Спасибо» с расширением .html или .php? В данном варианте сообщение «Спасибо» появляется в том же модальном окне.

    Ответить
  • Руслан

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

    Ответить
  • ITшник

    Здравствуйте.
    Ставить ссылку на кнопку или на любое другое активное действие на сайте — плохое решение с точки зрения СЕО. Прошу опубликовать вариант со скриптом…

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

    +1 к вопросу. Если нашли решение, подскажите

    Ответить
  • Анатолий

    Подскажите как исправить зависания формы ? Все работает, отправляется и т.д, только при нажатии на кнопку заказать, открывается ококшо, и когда после заполнения данных жмешь на отправить, форма подвисает на 2-5 секунд, а потом аж появляется окно с Спасибо
    Подскажите как сделать, чтоб форма не подвисала

    Ответить
  • Евгения

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

    Ответить
  • Денис

    А почему игнорируется вопрос о сбросе формы после отправки? это так тяжело? скрипт крутой, но во если доработать сбросом благодарности что бы открылась чистая форма — будет прелесть!

    Ответить
  • Анатолий

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

    Ответить
  • Анатолий

    Денис, прочитай комментарии выше, уже давали ответ, почему не идет сброс

    Ответить
  • Денис

    Я извиняюсь, но не могу найти, подскажете где прочитать?

    Ответить
  • dimadv7

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

    Ответить
  • dimadv7

    Ясно, здорово, что удалось исправить, так в чем ошибка то была, если не секрет?)

    Ответить
  • Денис

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

    Ответить
  • Анатолий

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

    <a href="stranica.html" rel="nofollow">Политика конфиденциальности</a>

    И да, поправь путь к скрипту , вместо dist, должно быть js

    Ответить
  • Анатолий

    style=»font-size:12px; text-align:center; color:rgba(255, 255, 255, .3);» href=»#»>Хочу такую форму на свой сайт

    Ответить
  • Анатолий

    Правильно тебя поняли. Я с ответа понял, что перенесут форму вывода Спасибо над формой, тогда когда посетитель захочет снов ввести данные, форма будет снов оправлять, а не выводится сообщения Спасибо, поскольку его перенесут и форма для отправки не будет закрываться выводом успешной отправки. То есть, будет форма и вывод отправки каждое в своем окне, тогда пользователи смогут спокойно отправлять сколько нужно заявок.

    Ответить
  • Денис

    Ну это понятно, спасибо, а как сделать эстетично и красиво? как я описал выше, ведь костыли они и в африке костыли

    Ответить
  • Edward

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

    Ответить
  • dimadv7

    Посмотреть в инспекторе какой класс влияет и переопределить его

    Ответить
  • Edward

    Извините за глупый вопрос, я только учусь, а как переопределить класс?

    Ответить
  • dimadv7

    Значить найти тот, который мешает (тот, который встречается 2 раза) и одному из них задать другое имя.

    Ответить
  • Дмитрий

    Когда нажимаю на «Отправить» перекидывает на папку со всеми документами сайта. Оставить заявку Что здесь нужно вместо #moda написать,не понимаю.

    Ответить
  • dimadv7

    Не понимаю о чем вы…

    Ответить
  • Дмитрий

    Кнопка, по нажатию на которую будет открываться модальное окно:

    1
    a class=»mainButton» href=»#modal»Оставить заявку/a
    Класс можете задать любой, а вот в href напишите #modal — это будет id у контейнера с затенением и контактной формой. Что нужно вставить в #modal?

    Ответить
  • Дмитрий

    на написанное сверху забей.У меня проблема вот какая:я все вставил и при нажатии на «отправить» ,вот что http://s017.radikal.ru/i402/1606/83/964094fef0ac.png

    Ответить
  • Дмитрий

    После нажатия на Оставить заявку выскакивает ошибся.

    Ответить
  • dimadv7

    Ты же на сервере тестируешь верно? Если да, то похоже, что в php.ini не правильно настроен путь к сайту. Скачай исходник, проверь просто его на сервере. Работает?

    Ответить
  • Дмитрий

    Здравствуйте, такой вопрос, форма открывается во всплывающем окне, после отправки я ее очищаю, далее выводится сообщение «Спасибо за вашу заявку», после этого если еще раз попробовать открыть форму то снова выводится сообщение «Спасибо за вашу заявку», хотелось бы чтобы при нажатии открывалась снова чистая форма а не данное сообщение, выше читал комментарии про то что необходимо сменить место вывода сообщения, можно на конкретном примере или коде это показать, заранее спасибо

    Ответить
  • dimadv7

    На следующей неделе сделаю статью, в которой учту эту «проблему», хотя я не понимаю, зачем вам всем по несколько раз получать сообщения от одного пользователя)) Сделаю, чтобы можно было повторно отправлять. Постараюсь объяснить, что имел ввиду, когда говорил о том, что выводить сообщение нужно в другом месте, возможно, сразу покажу, как сделать несколько форм на одной странице, еще рекапчу от гугл подключим, или это уже отдельной статьей…

    Ответить

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