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

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

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

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

  1. Дмитрий

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

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

  2. Дмитрий

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

    1. dimadv7

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

  3. Дмитрий

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

  4. Дмитрий

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

    1. dimadv7

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

  5. Никита

    Нет, ну серьезно. Отправил юзер данные, посомтрел на "Спасибо", закрыл. Открывает снова, видит "Спасибо". Нужно, что бы при повторном вызове формы выводилась форма, а не благодарность. Лично я пока не понял как этого добиться.

    1. Никита

      Нужно, что бы при закрытии формы, скрипт начинал работу по новой. Аякс же не зря прикручен. Что добавить в код?

  6. Руслан

    ошибка при отправке, использовал только исходники

  7. Руслан

    прошу прощения, все работает, была проблема с хостингом с отправкой через php mail

  8. Александр

    Здравствуйте. Дмитрий, вы могли бы сбросить мне на почту, архив с двумя работающими формами?
    Заранее благодарю!

    1. dimadv7

      У меня его уже не осталось, да и форма потеряла актуальность. Свежая версия - тут. Там и несколько форм в примере.

  9. Алекс

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

    1. dimadv7

      В конце статьи есть ссылка на актуальную версию статьи, там предусмотрена эта возможность.

  10. Сергей

    Добрый день! Что-то на счёт обнуления формы всё так же глухо. Я так понимаю все горазды только писать, как всё просто. Создал событие onclick c перезагрузкой страницы, но на какие-то доли секунды снова показывается благодарственное окно и только потом идёт полная перезагрузка. Думаю, многие будут благодарны, если кто-то всё же реализует обнуление формы. Спасибо.

    1. dimadv7

      Давно сделал форму, в которой все исправлено, а эту пометил как "Устаревшая". Новый вариант - тут. И сделать действительно просто, достаточно разобраться в переменных и получение/записи в тег.

  11. Сергей

    Спасибо за ответ. Я эту форму видел - это абсолютно другая форма, менять и возвращать заголовок, как по мне, совсем не то, чего хотели многие выше писавшие. Намного нагляднее, когда на действие (ввод и отправка данных) появляется действие с возможностью подтверждения (окно благодарности с кнопкой "ок"). Как это примерно и есть сейчас. Но вот проблема только одна - обнуление формы, возвращение ее после нажатия "ок". А так - форма отличная.

    1. dimadv7

      Так в этой форме суть была та же. Просто скрывалась форма и подставлялось сообщение. А назад не возвращалось ничего до перезагрузки страницы. В варианте, который предложил, сама форма не скрывается, а просто выводится сообщение, об успешной отправке и очищаются поля.

  12. Денис

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

    1. dimadv7

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

  13. Игорь

    Добрый вечер.
    Столкнулся с такой проблемой, на главной странице форма работает у меня ухожу в корень, форма перестаёт работать Not Found при отправке. Возможно проблема с шаблоном(джумла 2.5)
    Помогите, буду очень признателен
    studio-marketing.ru

  14. Александр

    Аналогично, не могу сделать 2 формы уже все перепробовал.
    Буду благодарен в помощи.
    Иды меня и тд, все полностью.
    Если у кого-то есть 2 формы на 2 обработчика, буду очень признателен

  15. Максим

    Добрый день Дима, спасибо за форму. Я новичок, хочу использовать механику формы для модального окна bootstrap3. На сколько реально это реализовать? И с какой стороны подойти?

    1. dimadv7

      Да вполне реально. Просто вырезать форму и вставить в модальное окно бутстрапа. Не понял в чем собственно проблема?

  16. basseinomskru

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

  17. Константин

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

  18. Кирилл

    Подскажите плизь как прикрутить отправку файла к такой форме
    input type="file" не работает

    1. dimadv7

      используя serialize не получится передать файл, посмотрите в сторону formdata

  19. Максим

    Здравствуйте.
    Почему то не работает отправка. Посылает на перезагрузку. Дело в расположении mail.php, я так понимаю? Я и в корень его ложил, и указывал полный путь, все равно страница перезагружается. Можете подсказать, в чем может быть подвох?

  20. Руслан

    Отличная форма. Так и не смог разобраться как делать 2 формы на одной страницы. Вышлите пожалуйста на почту вариант с 2-мя формами. Новый вариант формы смотрел, он не совсем подходит, нужен именно этот вариант формы. Спасибо

    1. Руслан

      Нужна только подстановка Темы письмат (разная тема для каждой формы)

    2. Руслан

      Большое спасибо за форму - Разобрался сам

  21. Олег

    помогите пожалуйста!
    как мне добавить еще поля?
    я добавляю : поле - емейл
    поле: список
    как мне их прописать в php файле
    что бы заполненная информация в этих полях приходила мне на почту?
    очень прошу, спасайте

    1. dimadv7

      а как вы уже пробовали? что не получилось? какая ошибка вылазит? по аналогии с другими полями пробовали? понимаете как обработчик получает данные из формы?

  22. данил

    А как мне сделать так, чтобы "спасибо" выводилось не вместо формы, а во всплывающем окне? Чтобы форма как была на своем месте, так и оставалась, но чтобы после нажатия "отправить сообщение" прост овсплыло окно "Спасибо" Но не браузерное (alert) , а обычное со стилями.

    1. dimadv7

      А как вы уже пробовали? Какая ошибка выскакивала? На каком этапе загвоздка?

  23. данил

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

    $("#form , #form-1, #form-2, #form-3, #form-4").submit(function () {
         var formID = $(this).attr('id');
         var formNm = $('#' + formID);
         $.ajax({
             type: "POST",
             url: '/wp-content/themes/el1t-landing/mail.php',
             data: formNm.serialize(),
             success: function (data) {
             $(formNm).html(data);
             },
             error: function (jqXHR, text, error) {
             $(formNm).html(error);
             }
         });
         return false;
         });
    

    У меня сейчас вот такой код стоит, но выводит сообщение "спасибо" вместо полей инпут, то есть между тегами

    1. dimadv7

      В случае успешной отправки, нужно вызвать модальное окно. То есть тут:

      success: function (data) {
      //вызов
      }
      
  24. Владислав

    Добрый день подскажите как закрыть окно remodal автоматически после отправки и показа сообщения Спасибо за заявку!. Использовал скрипт Unimail для формы.
    Вот код

     	<div class="remodalBorder">
    
    		<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
    
    	<form class="popup-1">
    
    		<div class="success"><span>Спасибо за заявку!</span></div>
    
    		<!-- Hidden Required Fields -->
    		<input type="hidden" name="project_name" value="project_name">
    		<input type="hidden" name="admin_email" value="admin_email">
    		<input type="hidden" name="form_subject" value="Тема">
    		<!-- END Hidden Required Fields -->
    
    		<div class="formhead"><strong>Обратный звонок</strong></div>
    		<p>Оставьте ваши контактные данные.</p>
    
    		<input type="text" name="Имя" placeholder="Ваше имя..." required>
    		<input type="text" name="Телефон" placeholder="Ваш телефон..." required>
    
    			<button class="button button-white">Отправить</button>
    
    
    			
    		</form>
    
    	</div>
    
    </div>

    javascript ( //Popup-1
    $("form.popup-1").submit(function() { //Change
    var th = $(this);
    $.ajax({
    type: "POST",
    url: "mail.php", //Change
    data: th.serialize()
    }).done(function() {
    $(th).find('.success').addClass('active').css("display", "flex").hide().fadeIn();
    setTimeout(function() {
    $(th).find('.success').removeClass('active').fadeOut();
    th.trigger("reset");
    }, 1000);
    });
    return false;
    }); ) //javascript

    Все работает нормально но после отправки данные в поля сбрасываются и показывается сообщение спасибо, буду благодарен если дополните код js что бы после после показа сообщения спасибо окно remodal закрывалось.
    Ссылка на unimail: __https://github.com/agragregra/uniMail

    1. Владислав

      Помог этот код)

      setTimeout(function() {
      			var inst = $.remodal.lookup[$('[data-remodal-id=modal]').data('remodal')];
      				inst.close();
      			}, 3000);

      Полная версия

       	//Popup-1
      	$("form.popup-1").submit(function() { //Change
      		var th = $(this);
      		$.ajax({
      			type: "POST",
      			url: "mail.php", //Change
      			data: th.serialize()
      		}).done(function() {
      			$(th).find('.success').addClass('active').css("display", "flex").hide().fadeIn();
      			setTimeout(function() {
      				$(th).find('.success').removeClass('active').fadeOut();
      				th.trigger("reset");
      			}, 1000);
      			setTimeout(function() {
      			var inst = $.remodal.lookup[$('[data-remodal-id=modal]').data('remodal')];
      				inst.close();
      			}, 3000);
      		});
      		return false;
      	});
  25. Александр

    Добрый день. После нажатия отправить выдает ошибку Not Found.что не так)

    1. dimadv7

      Пути к файлам неправильно прописаны.

  26. Александр

    Пути поправил, Спасибо за отправку вашего сообщения!
    Но, письма мне на почту не приходят. Почту проверил, указана верная

    1. dimadv7

      Не с mail.ru работаете?

  27. Александр

    нет, gmail.ru

    1. Александр

      на yandex то же не шлет

    2. dimadv7

      Спам проверяли?

  28. Александр

    Все проверил. на почту не шлет, 3 ящика уже)

    1. dimadv7

      Тестируете на реальном сервере, не тестовый период, не бесплатный?

  29. Александр

    Реальный сервер с рабочим сайтом.

    1. Александр

      Заработало, как ни странно само по себе, видимо глюк на стороне хостера)

    2. dimadv7

      Отлично)

  30. Денис

    Добрый день!
    Форма работает, но только со страниц типа site.ru/post.html. Если добавляется категория, например site.ru/category/post.html, то выдается ошибка:
    Warning: require_once(/var/www/u0343288/data/www/acconting-service.ru/libraries/joomla/document/html/renderer/head.php): failed to open stream: No such file or directory in /var/www/u0343288/data/www/acconting-service.ru/templates/carservice/error.php on line 28

    Fatal error: require_once(): Failed opening required '/var/www/u0343288/data/www/acconting-service.ru/libraries/joomla/document/html/renderer/head.php' (include_path='.:') in /var/www/u0343288/data/www/acconting-service.ru/templates/carservice/error.php on line 28

    1. dimadv7

      Для CMS есть же соответствующие плагины, которые прекрасно работают с конкретной cms. А у вас путь, видимо, нарушается, задайте его динамически.

  31. WahaWaher

    Кому интересно. Универсальный плаг обратной связи https://github.com/WahaWaher/sendmail-js
    Любые поля форм + файлы, авто оформление в таблицу и отправка на почту. jq php phpmailer ajax

  32. дмитрий

    Спасибо за отличное решение, несколько перепробовал, но это самое удачное!

    1. dimadv7

      И вам спасибо, за отзыв)

  33. Вячеслав

    Здраствуйте,, данная форма не плохая действительно. Добавил на сайт и все хорошо работало. Но только как включил протокол https:// оно перестало работать, точнее отправлять форму на почту. А потос переносило данные с формы в адресную строку

    1. dimadv7

      Вячеслав, проверял на https, в том числе и на этом блоге, все отлично работает. Сделайте вывод ошибок php, посмотрите что в консоли, нет ли там ошибок?

  34. Andrey

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

  35. Максим

    Всё работает но после отправки в окне появляется: Not Fond, а не сообщение об успешной отправки

    1. dimadv7

      Максим, в консоли ошибки есть?

    2. Максим

      dimadv7, нет нету, но в общем я решил проблему, в ссылке (в файле js) где "mail.php" я просто вставил ссылку полностью вместе с __https://site.ru/..../mail.php и всё заработало) Спасибо!

    3. dimadv7

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

  36. Evgeniya

    Доброго дня! Можно ли подружить данное модальное окно с django? Что надо добавить в script.js в строке "url:" вместо mail.php, чтобы подхватывался код из view?

    1. dimadv7

      Evgeniya, здравствуйте. К сожалению, я никогда не работал с django и не знаю как там все устроено.

  37. Максим

    Один раз отправляется и пишет "Ошибка!"

    1. dimadv7

      Максим, вот тут обновленный вариант. Воспользуйтесь, пожалуйста им.

  38. biper

    форма ajax вызывается в модальном окне bootstrape… как сделать, чтобы после того, как нажимаю кнопку «отправить» модальное окно НЕ ЗАКРЫВАЛОСЬ вместе со всеми сообщениями об ошибках или результате отправки?

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