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 — это серверный язык!

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

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

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

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

  • Влад

    Здравствуйте, Дмитрий.
    Очень понравилась ваша форма и решил адаптировать ее под свои нужды. Мне необходимо привязать эту форму к любой странице, а не как сейчас фома выводится на определенной html странице. К примеру я подключил вашу форму к CMS. Стили подключил в хедер до тега , скрипты в футер. Вывод кнопки сделал в статье CMS. Сама форма работает, но при нажатии на кнопку вызывающей форму меня перекидывает на главную страницу сайта, так как в коде для этой кнопки указан путь (href) — #modal. Не могли бы вы подсказать как исправить вашу форму так, чтобы при ее появлении меня не кидало на главную, то есть чтобы я оставался на текущей странице.
    И еще хотел узнать если мне нужно выводить две формы на одной странице. То мне необходимо добавить в код саму форму html(другую), обработчик mail.php для нее и добавить код в script.js?
    Спасибо.

    Ответить
  • dimadv7

    Здравствуйте, если на странице есть id=»modal», то при клике на ссылку с #modal, переход должен осуществляться туда. Что-то не так делаете. А насчет двух форм, то можете сделать и так, главное в айдишниках не запутаться.

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

    Все отлично, но как обычно есть одно маленькое но, после удачной отправки , сообщение о удачной отправки почты в неправильной кодировке? Кодировку файла mail.php менял но все тоже самое!

    Ответить
  • dimadv7

    Когда все файлы в одной кодировке, то все работает отлично. И на почту приходят без проблем, сообщение после отправки выводиться нормально и т.д. Для того, чтобы в этом убедиться, достаточно скачать исходник. Проверь, везде ли изменил, все ли файлы сохранены в нужной кодировке (именно сохранены в редакторе)

    Ответить
  • Роман

    Доброго времени суток. Очень понравилась форма, но… есть пара вопросов:
    имею такую кнопку в шаблоне :

    <a href="#" rel="nofollow">more</a>

    ( к ней хочу подключить форму),
    так же есть файл script.js (Ваш нужно дописать в дефолтный?) и index.html (здесь вообще мало понятно, как это все совместить), и внедрить Вашу замечательную форму?
    Я немного новичек, пытаюсь сам разобраться.
    Буду признателен за подсказку.

    Ответить
  • dimadv7

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

    Ответить
  • Шухер

    1. Не получается сделать две формы на одной странице. Вторая форма после нажатия сабмит выводит окно первого.
    2. Чтобы вы наглядно посмотрели, как вам отправить переделанные ваши исходники?

    Ответить
  • dimadv7

    Просто у форм должен быть разный id. Кроме того, использование двух и более одинаковых id на странице запрещено спецификацией.

    Ответить
  • Шухер

    Как это сделать?

    Ответить
  • Шухер

    И нужно ли редактировать для второй формы файлы яваскрипт?
    Для второй формы скопировал файлы яваскрипт в новую папку и в файле скрипт изменил mail.php на mail2.php. Что нужно еще в скрипте менять?

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

    Ну вам же сказали, id менять в форме и в скрипте. Если формы одинаковые, то создавать второй обработчик — не имеет смысла. То есть mail2.php — не нужен. Все, что нужно поменять id, если не редактировать сам скрипт, то да, создавать 2 скрипта.

    Ответить
  • Шухер

    Вторая форма после нажатия сабмит выводит окно первого.
    Ну так как же правильно поменять id в форме и в скрипте?

    Ответить
  • Шухер

    В первой форме при успешной отправке выводит окошко например — Спасибо. Вторая форма отличная от первой выводит тоже самое Спасибо, а должно Пожалуйста. Получается так, что везде срабатывает mail.php, а должен срабатывать отправщик mail2.php

    Ответить
  • dimadv7

    у первой формы id=form, а у второй формы делаем id=form1, при подключении скриптов, просто меняем все form, на form1, если формы одинаковые, обработчик можно не менять

    Ответить
  • Шухер

    Во второй форме поменял id на form2, в скрипте script.js тоже, все по одному, Нашел только две! Вы говорите меняем все form, а сколько их?

    Ответить
  • Шухер

    Пожалуйста сделайте пост на два Ajax форма обратной связи в модальном окне с разными формами на одной странице! Многим бы пригодилось. Спасибо!!!

    Ответить
  • Шухер

    Вместо второй формы установил модуль Обратного звонока от http://www.ext-joom.com/. После нажатия отправить — выводит надпись успешной отправки вашей формы. Не пойму почему срабатывает ваш скрипт. Как отвязать ваш скрипт?

    Ответить
  • Шухер

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

    Ответить
  • dimadv7

    Здравствуй, давай на «ТЫ», не понимаю, что вызвало у тебя столько сложностей… На почту отправил файл с 2 формами.

    Ответить
  • Шухер

    Здравствуй, не получается. Ну вот никак. Что-то со скриптом он срабатывает на все формы, где не надо, а именно mail.php.

    Ответить
  • dimadv7

    id=»form» — нигде больше не используется? У сторонних сервисов тоже?

    Ответить
  • Шухер

    Нет не используется (срабатывает оба отравщика — «твой» и другого разработчика, твой отпращик присылает пустые сообщения с полями имени и телефона и тд, родной отправляет все одекватно, также твой скрипт после успешной отравки выводит свое сообщение поверх родного)! Отправил обратно тебе переделанные формы, где id form и form1, там же mail.php и mail1.php (срабатывает всегда только mail.php), посмотри пожалуйста братец наглядно, может у тебя получится.

    Ответить
  • Шухер

    Мне кажется ваш скрипт срабатывает на все методы post

    Ответить
  • dimadv7

    Ты почту проверял? Там 2 формы и работают корректно. Одна не мешает другой.

    Ответить
  • Шухер

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

    Ответить
  • Шухер

    Ты мне прислал две одинаковые формы под один отправщик, такое не* подходит.

    Ответить
  • Шухер

    На почту тебе отправил, попробуй его, наглядно увидишь проблему.

    Ответить
  • Шухер

    Вот что обнаружил:
    В форме id указал
    В script.js id оставил таким же — $(«form»)
    Итог форма обратной связи в модальном окне все равно работает. В форме , все равно будет все работать также отлично оставив без изменений .
    А если в script.js поменять $(«form») на $(«morf») и также указать в форме или на что нибудь другое то ничего не пашет.
    Люди шарящие помогите!!!!!!!!!!

    Ответить
  • Шухер

    В форме id указал morf
    В script.js id оставил таким же — $(«form»)
    Итог форма обратной связи в модальном окне все равно работает.
    А если в script.js поменять $(«form») на $(«morf») и также указать в форме id morf или на что нибудь другое то ничего не пашет.
    Люди шарящие помогите!!!!!!!!!!

    Ответить
  • dimadv7

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

    Ответить
  • dimadv7

    сейчас выслал, работают 2 формы с разными обработчиками

    Ответить
  • dimadv7

    Просто раньше мы брали не id=»form», а тег form (в скрипте).

    Ответить
  • dimadv7

    Вот смотри, в скрипте мы говорим, возьми тег form

    $("form").submit(function () {

    именно тег, не id. А ты сделай так:

    $("#form").submit(function () {

    Ну и не удивительно, что когда ты менял тут form на morf, то формы переставали работать, так как таких тегов нет. А id в твоем случае ни на что не влиял.

    Ответить
  • Игорь

    Привет! У меня такой вопрос! после отправки выдает сообщение об успешной отправке! я закрываю окно… еще раз нажимаю на кнопку вызова и вместо формы я вижу опять окно об успешной отправке! как сделать так, чтобы при повторном нажатии вызывалась опять чистая форма

    Ответить
  • Шухер

    Спасибо большое! Дело было не в бобине#!

    Ответить
  • Шухер

    Может для следующих мучеников стоит поправить(#) исходник. Еще раз большое спасибо!!!

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

    Привет! У меня аналогичный вопрос! после отправки выдает сообщение об успешной отправке! я закрываю окно… еще раз нажимаю на кнопку вызова и вместо формы я вижу опять окно об успешной отправке! как сделать так, чтобы при повторном нажатии вызывалась опять чистая форма

    Ответить
  • Роман

    Добрый день!
    Хочу прикрутить к opencart 2.0.
    Подключил все исходники. После всех описанных выше действий #modal кидает на главную.

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

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

    Ответить
  • dimadv7

    Я не работал с opencart. Не в курсе как там все устроено, но перекидовать на главную — не должно.

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

    Добрый день. Большое спасибо за такую вещь. И как всегда вопрос: 1)после отправки нельзя ввести еще раз номер и имя, только после обновления страницы можно вводить- как устранить. 2) Когда выходит окно экран становится темным, можно сделать светлее чтоб другая информация на сайте бросалась в глаза.

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

    1. — Зачем?
    2. Можно. Как? Поменять прозрачность на нужную у класса

    .remodal-overlay
    Ответить
  • Римма

    Здравствуйте! Форма просто замечательная! Но у меня тоже возник вопрос, когда я сделала две одинаковые. Как из различать? Например, у меня это заявка в один кружок, а , я прописала им разное value в строчке , но в заголовке всегда value первой.

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

    Если не хотите модифицировать javascript код, то придется подключить его 2 раза, при это нужно изменить:

    $("#айдиформы").submit(function () {

    То есть указывать свой id формы

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

    Спасибо! Это я тоже сделала. Пробовала прописать 2 id через запятую и пробовала продублировать её, заменив id, оба вариант почему-то присылают заголовок от первой формы.

    Ответить
  • dimadv7

    Отправил вам на почту архив с 2 работающими формами)

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

    Спасибо! Я сглупила и не меняла там, где modal и то, что с ним связано, поэтому отправляло с первым заголовком чтобы я не делала, с Вашими всё отлично работает :)

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

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

    Ответить
  • dimadv7

    А как вы уже пробовали? Какие ошибки выскакивают?

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

    Отличный скрипт, спасибо.
    Но есть одна досадная вещь. — «явное указание пути к php-файлу». Вот здесь http://site-on.net/create/php/6-callback-and-feedback-for-site-joomla
    Приводится пример формы, которая маскирует путь к php -файлу (метод post, в Аяксе url). Сутки копаюсь, но не могу подойти к решению (маскировка php-файла) . Есть ли возможность в ЭТОМ скрипте не указывать явно (для пользователя) путь к php-файлу ?

    Ответить

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