Как сделать кнопку «Заказать обратный звонок» на сайт?

2 коментарі / Від / 29.10.2019 /

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

Кнопка обратного звонка – это неотъемлемый элемент коммерческого сайта. Она улучшает поведенческие характеристики веб-ресурса, с её помощью можно быстро связаться с клиентом. Весь этот несложный интерфейс коммуникации состоит из двух элементов: самой кнопки с текстом «Заказать звонок» и всплывающей формы обратной связи в модальном окне.

Форма состоит из трёх текстовых полей (инпутов), куда пользователь вводит своё имя и телефон. В поле input с type=”tel” будет маска с выводимым по умолчанию кодом страны по определённому формату.

Нажав на кнопку «Заказать звонок», пользователь увидит вот такую аккуратную форму с полями для заполнения.

модальное окно с контактной формой

Так же я сделаю ещё один input с тайпом “datetime–local” для отображения выпадающего календаря с выбором даты и времени. Таким образом можно предоставить клиенту возможность выбрать удобное для него время звонка. Однако в html коде я закомментирую этот input, а если кому то он будет нужен, то может раскомментировать строку кода и пользоваться этим функционалом. В файлах php обработчика и в таблице стилей это поле будет подключёно.

Выглядеть это будет вот так.

модальная форма с выбором даты и времени обратного звонка

Разбиваем работу над кнопкой вызова на этапы

Создание кнопки обратного звонка можно разделить на семь этапов.

  1. Выбор java script плагина, отвечающего за вызов модального окна.
  2. Подключение и редактирование html и js кода.
  3. Оформление внешнего вида кнопки и формы обратной связи с помощью css стилей.
  4. Подключение php кода обработчика формы.
  5. Подключение маски для телефона.
  6. Настройка ajax – будем отправлять данные с формы без перезагрузки страницы.
  7. Подключение или отключение поля с календарём (датой и временем).

Выбираем плагин js

В интернете сейчас есть много решений, с помощью которых можно сделать вызов модального окна. Например, в библиотеке фреймворка bootstrap встроен плагин Modal. Чтобы его подключить нужно скачать фреймворк bootstrap. Он будет встроен в минифицированный файл bootstrap.min.js. Или скачать можно сам плагин, найдя его в разделе Настройки – Компоненты java script.

плагин bootstrap Modal

Так же модальное окно вызывается с помощью плагина fancybox, 

плагин для вызова модальных окон fancybox

или Remodal.

плагин для вызова модального окна 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 потому, что контактную форму сделаю простую сам.

адаптация html кода плагина

Форма, что приводится в разделе Popup with form имеет много лишнего кода и перегружена всякими филдсетами, тегами ol, li и лейблами, которые занимают только лишнее место. Зачем писать «Ваше имя» в теге lable, если это можно сделать прямо в атрибуте placeholder  input?

Итак, копируем здесь же javascript код, создаём файл main.js и вставляем его сюда.

$(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

В общем должен получиться такой код

$(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 коде берём только код ссылки и обёртку, остальное удаляем.

код из magnific popup

Получилcя такой код:

<!-- это код кнопки -->

<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 стилей с помощью которых я оформил внешний вид формы. Бекграундом для формы я сделал фотографию, а инпуты и кнопку в ней немного прозрачными.

@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.

<?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. 

/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 файл для скачивания с кодом кнопки обратного звонка. Удачи вам!

2 думки про “Как сделать кнопку «Заказать обратный звонок» на сайт?”

  1. Павел

    Спасибо вам огромное!!!Очень помогли,искал,наверное часа 2 такую готовую кнопку!Спасибо,друг!

    Відповіcти

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

2 × 3 =

Догори