Всем привет. Засыпали вопросами о том, как реализовать форму, которая появляется в модальном окне после нажатия на кнопку, а после отправки, выводилось бы сообщение об успехе или провале.
Думаю, полно уже подобного в интернете, но раз народ просит, то решил сделать. Тем более, подобный функционал должен присутствовать почти на каждом лендинге для реализации кнопки обратного звонка. И действительно, сейчас все больше появляется результатов АБ - тестирования, которые говорят, что открытые формы работают хуже, чем те, что спрятаны в модальное окно и открываются после нажатия на кнопу.
Некоторые утверждают, что это из-за того, что у людей потихоньку "вырабатывается иммунитет" и открытая форма - это агрессивная продажа. Якобы сейчас настало то время, когда пользователь при виде открытой формы считает, что ему пытаются что-то "впарить". Не совсем согласен с этой теорией, но зерно истины - присутствует. Может быть в некоторых видах бизнеса это и так. Ну а сейчас давайте займемся реализацией формы.
Примечание! Я не буду подробно описывать каждое действие, а предлагаю вам готовый вариант в исходнике. Если возникнут вопросы - пишите в комментариях. Будем разбираться :)
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>
Добавив стили, выглядеть это стало так:
Для создания модального окна, использовалась библиотека 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 - это серверный язык!
Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на конструктор форм обратной связи.
Обновленная версия статьи находится тут