Закрыть ... [X]

Как сделать кнопку звонок с сайта

Закрыть ... [X]

Создать форму

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

Мы разработали 2 варианта пульсирующей кнопки.

1. Статичная, та что слева внизу страницы. При пролистывании контента страницы, она всегда находится на одном месте.

2. Подпрыгивающая, та, что внизу справа страницы. При пролистывании страницы, кнопка также начинает перемещаться вместе с контентом, но через некоторое время, возвращается на своё положенное место.

Скачайте архив CallMe.zip и распакуйте в папку tbForm на Вашем сайте.

В архиве 2 файла:CallMe.css и CallMe.js

1. Подключаем CSS и JavaScript:

<head>
...
<!--Подключаем JQuery, если он не подключен -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
...
<link rel="stylesheet" type="text/css" href="/tbForm/CallMe.css" media="screen" />
<script type="text/javascript" src="/tbForm/CallMe.js"></script>
...
</head>

2. Создаем кнопку

Перед закрывающим тегом </body> добавьте
для статичной кнопки:
<div  class="tbForm_CallMe" data-tbform="M-XXX" style="position:fixed; left: 50px; bottom: 50px;" >
   <div class="tbForm_shadow"></div>
   <div class="tbForm_fone"><span>Заказать звонок</span></div>
</div>
для подпрыгивающей:
<div  class="tbForm_CallMe jump" data-tbform="M-XXX">
   <div class="tbForm_shadow"></div>
   <div class="tbForm_fone"><span>Заказать звонок</span></div>
</div>

3. Настройка цвета кнопки 

Заказать звонок

Выберете цвет кнопки:

По умолчанию, цвет кнопки красный (#C01F22) и параметр непрозрачности выставлен на 70% (opacity: .7).

Чтобы изменить цвет кнопки, необходимо открыть файл стилей CallMe.css и найти вот такие строчки (они в самом начале):
.tbForm_CallMe .tbForm_shadow {border-color: #C01F22;}
.tbForm_CallMe .tbForm_fone {background-color:#C01F22;}
заменив цвет #C01F22 на нужный Вам.

Если Вас не устраивает прозрачность кнопки, измените в строке:
.tbForm_CallMe {z-index: 99998; width:60px; height:60px; opacity: .7;}
параметр "opacity: .7" на  "; opacity: 1", что бы кнопка стала полностью непрозрачной

 

 

 

 


Источник: http://tbform.ru/Demo/Knopka-Zakazat-zvonok-dlya-sayta.html


Поделись с друзьями



Рекомендуем посмотреть ещё:



Похожие новости


Вечерний макияж для глаз пошаговое фото
Из пластинки своими рука
Как можно сделать грушу в домашних
Как сделать брелок из ниток своими руками
Как сделать порчу на соседку


Как сделать кнопку звонок с сайта
Как сделать кнопку звонок с сайта


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



ШОКИРУЮЩИЕ НОВОСТИ