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

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

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

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

  • Никита

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

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

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

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

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

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

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

    Ответить
  • Александр

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

    Ответить
  • dimadv7

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

    Ответить
  • Алекс

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

    Ответить
  • dimadv7

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

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

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

    Ответить
  • dimadv7

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

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

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

    Ответить
  • dimadv7

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

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

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

    Ответить
  • dimadv7

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

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

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

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

    Решили вопрос? У меня та же беда

    Ответить
  • Александр

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

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

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

    Ответить
  • dimadv7

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

    Ответить
  • basseinomskru

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

    Ответить
  • Константин

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

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

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

    Ответить
  • dimadv7

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

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

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

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

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

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

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

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

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

    Ответить
  • Олег

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

    Ответить
  • dimadv7

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

    Ответить
  • данил

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

    Ответить
  • dimadv7

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

    Ответить
  • данил

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

    $("#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;
         });
    

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

    Ответить
  • Владислав

    Добрый день подскажите как закрыть окно 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

    Ответить
  • Владислав

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

    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;
    	});
    Ответить
  • dimadv7

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

    success: function (data) {
    //вызов
    }
    
    Ответить
  • Александр

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

    Ответить
  • dimadv7

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

    Ответить
  • Александр

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

    Ответить
  • dimadv7

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

    Ответить
  • Александр

    нет, gmail.ru

    Ответить
  • Александр

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

    Ответить
  • dimadv7

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

    Ответить
  • Александр

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

    Ответить
  • dimadv7

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

    Ответить
  • Александр

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

    Ответить
  • Александр

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

    Ответить
  • dimadv7

    Отлично)

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

    Добрый день!
    Форма работает, но только со страниц типа 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

    Ответить
  • dimadv7

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

    Ответить
  • WahaWaher

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

    Ответить

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

 

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