С помощью нашего сервиса Вы сможете создавать практически любые, как статические, так и всплывающие формы для вашего сайта, получать e-mail и sms сообщения с введенными пользователями данными.
Задать вопрос
Заказать установку
Ваши пожелания

Новости

23.01.2016
Реферальная программа
Заработок для веб-мастров, веб-студий и не только.
Подробнее
23.01.2016
Открытие сервиса
Завершены все тесты. Все работает как часы. Ура!
Подробнее
Все новости

Анимированная кнопка «Заказать звонок»

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

 

 

 

 

Яндекс.Метрика
Заказать звонок
Заказать звонок