Кнопка заказать обратный звонок для вашего сайта

В этом уроке вы узнаете как создать кнопку заказать звонок для своего сайта.

Немного теории.

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

Такой способ сбора контактов является белым, так как пользователь добровольно дает вам свои контакты.

demoСкачать

Кнопка заказать обратный звонок. Структура.

Код формы достаточно прост. Поле для ввода телефона, поле для вывода результата и кнопка отправить.
Простая html разметка

<div class="forma">

<form class="send" action="php/send.php" method="post"><input class="tel" name="tel" type="text" placeholder="Номер телефона" /> <button class="button">Заказать звонок</button></form>

</div>

<p class="res"><img src="img/lc.png" />Ваши данные останутся в безопасности. Заполнение формы ни к чему вас не обязывает.</p>

Стили оформления кнопки заказать обратный звонок

.forma { margin: 0 auto; width:60%; margin-top: 2em;}
.button { background-image:url(img/button.png); background-repeat:no-repeat; width:200px; height:40px;border: none;color: #fff;font-size: 14px; background-color: rgba(0, 0, 0, 0);}
.tel {width:250px; height:25px; padding:7px; font-size: 14px;border: 1px solid #565656; border-radius: 5px;}
.results {margin-top: 20px; text-align: center; font-size: 16px; font-weight: 100; font-family: helvetica,arial, sans-serif; width:97%; padding:10px; }
.res { text-align: center; font-size: 16px; font-weight: 100; font-family: helvetica,arial,sans-serif; width:97%; padding:10px;}

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

Кнопка заказать обратный звонок для сайта. Подключение скриптов.

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery.inputmask.js" type="text/javascript"></script>
<script src="js/viewportchecker.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/scripts.js" type="text/javascript"></script>

Эти скрипты нужно добавить перед закрывающим тегом body , а если ваш сайт сделан на какой-то платформе, то код нужно добавлять в шапку сайта, чаще всего это файл header.php

Также обратите внимание на подключение jquery, если оно уже есть на сайте, первую строку добавлять не нужно.
inputmask.js отвечает за маску в поле ввода телефона. Если она вам не нужна, файл также можно не подключать.

Остался финальный штрих, нужно настроить код обработчика.

<?php $title = "Заявка c сайта"; $to = 'Ваша почта куда будут падать письма';
$from='с какого сайта';
$tel = 'Номер телефона: '.$_POST['tel'];
$message = "Заявка c cайта:\n\n $hide $tel; ";
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";
$headers .= "From: " . $from . "\r\n"; mail($to, $title, $message, $headers);
echo 'Ваше сообщение успешно отправлено! Спасибо.'; ?>

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

Поделиться в социальных сетях: