Привет друзья! Сегодня хочу поделиться тем, как сделать кнопку обратного звонка на сайт с всплывающим модальным окном, формой обратной связи, маской для телефона в инпуте формы, возможностью выбрать дату и время обратного звонка.
Кнопка обратного звонка – это неотъемлемый элемент коммерческого сайта. Она улучшает поведенческие характеристики веб-ресурса, с её помощью можно быстро связаться с клиентом. Весь этот несложный интерфейс коммуникации состоит из двух элементов: самой кнопки с текстом «Заказать звонок» и всплывающей формы обратной связи в модальном окне.
Форма состоит из трёх текстовых полей (инпутов), куда пользователь вводит своё имя и телефон. В поле input с type=”tel” будет маска с выводимым по умолчанию кодом страны по определённому формату.
Нажав на кнопку «Заказать звонок», пользователь увидит вот такую аккуратную форму с полями для заполнения.
Так же я сделаю ещё один input с тайпом “datetime–local” для отображения выпадающего календаря с выбором даты и времени. Таким образом можно предоставить клиенту возможность выбрать удобное для него время звонка. Однако в html коде я закомментирую этот input, а если кому то он будет нужен, то может раскомментировать строку кода и пользоваться этим функционалом. В файлах php обработчика и в таблице стилей это поле будет подключёно.
Выглядеть это будет вот так.
Разбиваем работу над кнопкой вызова на этапы
Создание кнопки обратного звонка можно разделить на семь этапов.
- Выбор java script плагина, отвечающего за вызов модального окна.
- Подключение и редактирование html и js кода.
- Оформление внешнего вида кнопки и формы обратной связи с помощью css стилей.
- Подключение php кода обработчика формы.
- Подключение маски для телефона.
- Настройка ajax – будем отправлять данные с формы без перезагрузки страницы.
- Подключение или отключение поля с календарём (датой и временем).
Выбираем плагин js
В интернете сейчас есть много решений, с помощью которых можно сделать вызов модального окна. Например, в библиотеке фреймворка bootstrap встроен плагин Modal. Чтобы его подключить нужно скачать фреймворк bootstrap. Он будет встроен в минифицированный файл bootstrap.min.js. Или скачать можно сам плагин, найдя его в разделе Настройки – Компоненты java script.
Так же модальное окно вызывается с помощью плагина fancybox,
или Remodal.
Существует ещё много скриптов, вызывающих всплывающее окно на сайте. На нескольких своих проектах я использовал плагин remodal, но недавно, когда делал сайт визитку, плагины remodal и fancybox вступили в конфликт с другими js скриптами. В частности после их установки перестал работать плавный скролл на сайте.
После поисков различных решений я нашёл плагин Magnific Popup. Установив его я понял, что всё работает отлично и никаких конфликтов с другими скриптами нет. Следовательно скачиваем данный плагин с гитхаба https://github.com/dimsemenov/Magnific-Popup и в папку js своего сайта вставляем минифицированный файл jquery.magnific-popup.min.js, а в папку с css вставляем файл со стилями magnific-popup.css. Затем подключем их в html коде. Всё, файлы подключены.
Адаптируем html код плагина под свой проект
HTML код плагина берём с примеров на главной странице magnific popup http://dimsemenov.com/plugins/magnific-popup/. Можно скопировать код с раздела Popup with form или Modal Popup. Я решил взять только часть кода для «обёртки» с образца в Modal Popup потому, что контактную форму сделаю простую сам.
Форма, что приводится в разделе Popup with form имеет много лишнего кода и перегружена всякими филдсетами, тегами ol, li и лейблами, которые занимают только лишнее место. Зачем писать «Ваше имя» в теге lable, если это можно сделать прямо в атрибуте placeholder input?
Итак, копируем здесь же javascript код, создаём файл main.js и вставляем его сюда.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function () { $('.popup-modal').magnificPopup({ type: 'inline', preloader: false, focus: '#username', modal: true }); $(document).on('click', '.popup-modal-dismiss', function (e) { e.preventDefault(); $.magnificPopup.close(); }); }); |
Чтобы в форме обратной связи показывалась кнопка крестик, для её закрытия нужно строку modal: true переделать на modal: false,
и под ней вставить эту showCloseBtn: true
В общем должен получиться такой код
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function () { $('.popup-modal').magnificPopup({ type: 'inline', preloader: false, focus: '#username', modal: false, showCloseBtn: true }); $(document).on('click', '.popup-modal-dismiss', function (e) { e.preventDefault(); $.magnificPopup.close(); }); }); |
Далее подключаем файл main.js внизу страницы с помощью тега script. А в html коде берём только код ссылки и обёртку, остальное удаляем.
Получилcя такой код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!-- это код кнопки --> <a class="popup-modal button" href="#form">Обратный звонок</a> <!-- А это код формы в «обёртке» --> <div id="magnific-modal" class="white-popup-block mfp-hide clearfix"> <div class="mfpcontentBorder"> <a class="popup-modal-dismiss" href="#"><i class="fa fa-times" aria-hidden="true"></i></a> <form id="form"> <p class="title">Оставьте ваш номер<br> и я перезвоню вам</p> <input type="text" class="putName" name="name" placeholder="Ваше имя" required> <input type="tel" class="putPhone" name="phone" placeholder="Ваш телефон" required> <!--<input type="datetime-local" class="putNumber" name="date" value="2017-12-09">--> <input type="submit" name="submit" class="btn" value="ЗАКАЗАТЬ ЗВОНОК"> <input type="hidden" name="formData" value="Заявка с сайта"> </form> </div> </div> |
Сюда я вставил ещё три тега input: один будет функционировать в качестве кнопки, другой будет скрытым, а третий закомментированный – это инпут с выводом даты и времени. Атрибут ссылки href=”#form” нацелен на id=”form” формы обратной связи. Css класс popup-modal связует форму с ajax. Здесь всё.
Оформляем кнопку и форму стилями css
Далее привожу пример css стилей с помощью которых я оформил внешний вид формы. Бекграундом для формы я сделал фотографию, а инпуты и кнопку в ней немного прозрачными.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 |
@import url("font-awesome.min.css"); @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600"); body { background-color: #191515; background: radial-gradient(white, #FFA9A1) repeat-y; height: 700px; } .button { display: inline-block; position: relative; min-width: 178px; margin: 6px 28px; padding: 15px 40px; font-weight: 800; font-family: sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #AB274F; transition: .15s ease-out; box-sizing: border-box; text-decoration: none; font-family: Alice, serif; text-shadow: #a58383 2px 2px 2px; letter-spacing: 2px; } .button:hover { color: #ec1355!important; } .button:last-of-type {margin: 6px 28px;} .button:before { content:""; position: absolute; top: -6px; left: 0; height: calc(100% + 12px); width: 100%; border: 2px solid #AB274F; box-sizing: border-box; transition: .2s ease-in-out; } .button:after { content:""; position: absolute; top: 0; left: -8px; height: 100%; width: calc(100% + 16px); border: 1px solid #AB274F; box-sizing: border-box; transition: .2s ease-in-out; } .button:hover:before { top: 0; left: -8px; height: 100%; width: calc(100% + 16px); } .button:hover:after { top: -6px; left: 0; height: calc(100% + 12px); width: 100%; } .button:hover{ color:#AB274F; } .panel-grid-cell section { padding: 80px 0; z-index: 999; text-align: center; } input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover, .btn:hover { background-color: #9ececc; } .mfp-close-btn-in .mfp-close { color: #999!important; } /* modal windows */ div > a.popup-modal.button[href="#form"] { text-transform: uppercase; padding: 0.75em 2em 0.75em 2em; text-decoration: none; margin-top: 100px; } .mfp-content { background-image: url("../images/callback_bg.jpg")!important; position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: center!important; background: #2f3847; max-width: 280px; z-index: 1045; height: auto; padding: .8%; border-radius: 4px; } a.popup-modal-dismiss { position: absolute; top: 0; left: 0; overflow: visible; cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; text-decoration: none; color: #95979c; border: 0; background: transparent; } .mfpcontentBorder { max-width: 310px; border: 1px solid #e1e1e1; padding: 4% 5% 0.8%; } .fa-times:hover { content: "\f00d"; color: #F7943C; } .fa-times{ padding: 15px 0px 0px 18px; display: inline-block; } .putNumber, .putName, .putPhone { width: 210px!important; padding: 9px 10px!important; height: 40px!important; background: rgba(255, 255, 255, 0.62)!important; margin-bottom: 15px; border-radius: 2px!important; border: none!important; outline: none!important; margin: 10px auto; font-family: Alice, serif; font-size: 18px; } input.putName:focus, input.putPhone:focus { box-shadow: 0 0 2px 1px #FFCC00!important; } #form > input.btn { margin-top: 10px; } p.title { margin: 15px 10px 2px!important; color: #e1e1e1!important; font-family: Marck Script, cursive!important; line-height: 1.4!important; font-size: 22px; } #form { border: 1px solid #e1e1e1; border-radius: 4px; } input.btn { width: 210px; height: 40px; background: rgba(229, 115, 115, 0.78); margin: 10px 0px 15px!important; border-radius: 2px; border: none; outline: none; color: #fff; cursor: pointer; line-height: 1; } input.btn:hover { color: #000; } |
Php обработчик формы
Php обработчик формы обратной связи будет называться mail.php. На него будет нацелен ajax.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php $recepient = "vashapochta@gmail.com"; /* почта получателя */ $sitename = "vashsaite.ru"; /* сайт с которого пришло письмо */ $name = trim($_POST["name"]); $phone = trim($_POST["phone"]); $date = trim($_POST["date"]); $pagetitle = "Заявка с формы обратного звонка на сайте \"$sitename\""; $message = "Имя: $name \nТелефон: $phone \nДата звонка: $date"; mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient"); |
Скрипт маски для телефона
В файл main.js вставьте этот код
$('input[name="phone"]').mask("+38 (099) 999-99-99");
По умолчанию здесь настроен телефонный код Украины, но если вы с России или другой страны, вы можете изменить первые цифры кода на свои. Так же, что бы маска работала нужно подключить к html файлу файл maskedinput.min.js. Я его выложу в конце статьи со всеми файлами.
Ajax
Код ajax можно вставить в файл, main.js, который уже подключен. Вставляем его ниже кода плагина magnific popup.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/E-mail Ajax Send $("#form").submit(function() { //Change var th = $(this); $.ajax({ type: "POST", url: "mail.php", //Change data: th.serialize() }).done(function() { alert("Спасибо за ваш отклик!"); setTimeout(function() { // Done Functions th.trigger("reset"); }, 1000); }); return false; }); |
Если вы всё правильно сделали, то должно всё работать. Кнопку, вызывающую форму обратной связи можно изменить, прописав ей свои стили. На всякий случай выложу zip файл для скачивания с кодом кнопки обратного звонка. Удачи вам!