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. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности