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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  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. В случае успешной отправки, нужно вызвать модальное окно. То есть тут:

      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. Пути к файлам неправильно прописаны.

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

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

  27. нет, gmail.ru

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

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

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

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

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

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

    2. Отлично)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности