Главная
Web-дизайн
Анимированная кнопка обратного звонка

Анимированная кнопка обратного звонка

Анимированная кнопка

Доброго времени суток. 🙂

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

Подключать себе такой функционал заказчик не хотел. Ему просто надо была кнопка, после нажатия на которую, появлялось бы модальное окно с формой заказа. Кнопки обратного звонка - это очень полезная вещь. Благодаря им, человек может заказать звонок себе не тратя свои деньги, что есть важным для нашего человека :). По сути, такую кнопку можно сделать и для возвращения наверх страницы и для кнопки помощи и тд. Главный элемент тут будет - анимация, пульсирующий эффект.

09.09.2016 Добавлена новая кнопка, на старой не работал эффект пульсации в новом Хроме.



Пример



Скачать иконку

Установить анимированную кнопку себе на сайт очень легко. Вся анимация выполнена с помощью CSS, без подключения дополнительных скриптов и плагинов. Хоть кода и много, но все довольно просто.

УВАЖАЕМЫЕ МАСТЕРА! Имейте совесть, если используете данную кнопку, то хотя бы картинку трубки телефонной заливайте себе на хостинг, а не тупо копируете ссылку на мой сайт. Таких умельцев и их сайты прославлю на весь интернет 🙂

Сначала нужно добавить HTML разметку. У нас это будет обычная ссылка. В нужном месте у себя на сайте, в шапке или подвале вставляем такую строку.

<a href="#" id="popup_toggle" onclick="return false;"><div class="circlephone" style="transform-origin: center;"></div><div class="circle-fill" style="transform-origin: center;"></div><div class="img-circle" style="transform-origin: center;"><div class="img-circleblock" style="transform-origin: center;"></div></div></a>

Теперь в файл стилей надо добавить сами стили CSS.

#popup_toggle{bottom:25px;right:10px;position:fixed;}
.img-circle{background-color:#29AEE3;box-sizing:content-box;-webkit-box-sizing:content-box;}
.circlephone{box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #29AEE3;width:150px;height:150px;bottom:-25px;right:10px;position:absolute;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacity: .5;-webkit-animation: circle-anim 2.4s infinite ease-in-out !important;-moz-animation: circle-anim 2.4s infinite ease-in-out !important;-ms-animation: circle-anim 2.4s infinite ease-in-out !important;-o-animation: circle-anim 2.4s infinite ease-in-out !important;animation: circle-anim 2.4s infinite ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;}
.circle-fill{box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#29AEE3;width:100px;height:100px;bottom:0px;right:35px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3s infinite ease-in-out;-o-animation: circle-fill-anim 2.3s infinite ease-in-out;animation: circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;}
.img-circle{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;bottom: 14px;right: 49px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;opacity: .7;}
.img-circleblock{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;background-image:url(images/mini.png);background-position: center center;background-repeat:no-repeat;animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;}
.img-circle:hover{opacity: 1;}
@keyframes pulse {0% {transform: scale(0.9);opacity: 1;}
  50% {transform: scale(1); opacity: 1; }   
  100% {transform: scale(0.9);opacity: 1;}}
 @-webkit-keyframes pulse {0% {-webkit-transform: scale(0.95);opacity: 1;}
  50% {-webkit-transform: scale(1);opacity: 1;}   
  100% {-webkit-transform: scale(0.95);opacity: 1;}}
@keyframes tossing {
  0% {transform: rotate(-8deg);}
  50% {transform: rotate(8deg);}
  100% {transform: rotate(-8deg);}}
@-webkit-keyframes tossing {
  0% {-webkit-transform: rotate(-8deg);}
  50% {-webkit-transform: rotate(8deg);}
  100% {-webkit-transform: rotate(-8deg);}}
@-moz-keyframes circle-anim {
  0% {-moz-transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;-moz-opacity: .1;-webkit-opacity: .1;-o-opacity: .1;}
  30% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;-moz-opacity: .5;-webkit-opacity: .5;-o-opacity: .5;}
  100% {-moz-transform: rotate(0deg) scale(1) skew(1deg);opacity: .6;-moz-opacity: .6;-webkit-opacity: .6;-o-opacity: .1;}}
@-webkit-keyframes circle-anim {
  0% {-webkit-transform: rotate(0deg) scale(0.5) skew(1deg);-webkit-opacity: .1;}
  30% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);-webkit-opacity: .5;}
  100% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);-webkit-opacity: .1;}}
@-o-keyframes circle-anim {
  0% {-o-transform: rotate(0deg) kscale(0.5) skew(1deg);-o-opacity: .1;}
  30% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);-o-opacity: .5;}
  100% {-o-transform: rotate(0deg) scale(1) skew(1deg);-o-opacity: .1;}}
@keyframes circle-anim {
  0% {transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;}
  30% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;}
  100% {transform: rotate(0deg) scale(1) skew(1deg);
opacity: .1;}}
@-moz-keyframes circle-fill-anim {
  0% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}
  50% {-moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);opacity: .2;}
  100% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
@-webkit-keyframes circle-fill-anim {
  0% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;  }
  50% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;  }
  100% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
@-o-keyframes circle-fill-anim {
  0% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}
  50% {-o-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;}
  100% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
@keyframes circle-fill-anim {
  0% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}
  50% {transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;}
  100% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}

Первые 7 строк отвечают за внешний вид кнопки, далее уже анимация. В первой строке можно настроить расположение кнопки, а в шестой строке указываете путь к изображению в параметре background-image:url(mini.png).

Вот и все что нужно для установки такой кнопки. Если Вы разбираетесь в CSS, то сможете настроить кнопку и по нужде полностью ее изменить под свои нужды и стиль сайта.

Чтобы привязать к этой кнопке модальное окно, Вам поможет статья - Модальное окно с помощью CSS и Java. Если все сделаете согласно инструкции, проблем у Вас не возникнет.

На этом все, спасибо за внимание. 🙂

P.S.
Я решил создать плагин, который поможет Вам без проблем получить нужный результат. Можете перейти и посмотреть:

Плагин заказа обратного звонка

Форма ввода




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(62 голоса, в среднем: 5 из 5)

Опубликовано 87 комментариев

  • Andrey
    Комментариев: 1

    Спасибо, единственный пример который работоспособный нашел за сутки!

  • Вениамин
    Комментариев: 2

    Здравствуйте!
    Подскажите, пожалуйста по форме (я не программист)
    1) Куда конкретно нужно вставлять код HTML? http://joxi.ru/EA4nzV4f5MOymb (скриншот HTML) Так можно?
    2) Стиль CSS в документ "Таблица стилей (style.css)" можно вставить в самом низу после отступа или как?
    3) Я так понимаю, что в разметке HTML "#" вместо решетки, можно, например, вставить шорткод для всплывающей формы, верно?

    • Виталий
      Комментариев: 267

      Здравствуйте Вениамин.
      1) Вставлять код (весь и всегда) нужно - не позже тега BODY. Перенесите код выше на несколько строк перед строкой BODY
      2) Да вставляйте в самом низу или где удобно. Каждый параметр стилей кончается фигурной скобкой - } Так что по сути можно вставлять где угодно, главное после параметра. Но если не знаете вставляйте в конце.
      3) Если у Вас такое окно, то да. Окна бывают разные. Одни вызываются просто по нажатию по ссылке с определенным ID. Или с помощью Java и его события onclick. Ну и тд.

  • Михаил
    Комментариев: 1

    Здравствуйте! А не подскажите как установить такую кнопку на CMS Joomla?

    • Виталий
      Комментариев: 267

      Так же как описано в данной статье. Просто нужно определится с местом, куда вставлять код кнопки. Стили CSS прописывать в файл стилей. Если Вы еще плохо разбираетесь в Вашей CMS, то пока лучше подтянуть знания. Сама кнопка Вам особо не поможет, к ней надо подключить модальное окно, скрипт которого немного сложнее подключить чем саму кнопку. Ну или подключить какой-то модуль к кнопке, что тоже требует определенных навыков.

      • THNS
        Комментариев: 1

        Здравствуйте! Спасибо Вам огромное за кнопку, подключила - анимация работает, давно искала, не хотела плагин ставить. СПАСИБИЩЕ!!!

  • Иван
    Комментариев: 3

    Подскажите народ в чем дело, все включил вроде бы верно, анимация работает, но не видно белой трубки в центре круга?

    • Иван
      Комментариев: 3

      Так, эту проблему решил) появилась другая
      при анимации получается не круг, а квадрат, с чем может быть связанно?

      • Светлана
        Комментариев: 4

        Иван подскажите как решиил проблему что трубку видно, у меня не видно, может не туда путь к рисунку указываю

        • Виталий
          Комментариев: 267

          Света, скачайте сначала картинку. У меня она по ссылке http://gnatkovsky.com.ua/files/pulseknop/mini.png (она белого цвета, так что когда перейдете по ссылке, если фон браузера белого цвета, то все сольется и Вы подумаете что ничего нет, но если нажать правой кнопкой мыши в центре экрана. то появится контекстное меню в котором нужно нажать на "Сохранить изображение" ) Скачайте, скопируйте в нужную папку и укажите путь к этой папке. Например если это папка images, то путь будет примерно такой images/mini.png. В коде, это шестая строка в стилях.

  • Иван
    Комментариев: 3

    я нашел такой выход, в общем взял эту картинку с сайта, обрезав её оставил только трубку на пустом фоне= анимация есть, трубка есть, квадратности по кругу не наблюдается) сам с собой поговорил, сам все решил

    • Виталий
      Комментариев: 267

      Можно было в примере взять путь к картинке и просто сохранить ее к себе указав к ней путь 🙂 http://gnatkovsky.com.ua/files/pulseknop/mini.png

      • Светлана
        Комментариев: 4

        Виталий, помогите понять, кнопку скачала, путь указала, строка 6 выглядит так: #uptocall-mini .uptocall-mini-phone:before {content: "";position: absolute;width: 100%;height: 100%;top:0;left:0;background-image:url(http://www.valuehost.ru/ru/hosting/service/manage/mini.png);background-repeat:no-repeat;background-position:center center;
        анимацтя работает, а трубки нет

        • Виталий
          Комментариев: 267

          Где у вас лежит файл стилей?

          • Светлана
            Комментариев: 4

            на хостинге в папке images

            • Виталий
              Комментариев: 267

              Если Файл стилей лежит рядом с папкой images то путь images/mini.png если в той папке что и картинка то просто mini.png
              Еще, когда указываете полный путь, то нужно указывать путь своего сайта, а не путь хостинга, как Вы показали выше.

              • Светлана
                Комментариев: 4

                спасибо, буду пытаться разобраться))

  • Игорь
    Комментариев: 1

    Ссылка на картинку, не работает ((( пере залейте ещё раз, зарание спасибо ...

    • Виталий
      Комментариев: 267

      Ссылка работает, просто трубка белого цвета на прозрачном фоне, если открываете в Хроме, то перед Вами просто белый экран. В центре окна нажмите правую кнопку и в меню - Сохранить как и увидите, что сохраняет файл mini.png. (в мозилле фон серый поэтому все четко видно)

  • Игорь
    Комментариев: 1

    Добрый день!
    Если вставил всё как нужно, но ничего не работает. В чём может быть проблема?

    • Виталий
      Комментариев: 267

      Значить, что-то вставили не так как нужно :). Тут всего лишь два кода. Код кнопки нужно вставить, например в шапке. А стили в Ваш файл стилей, вот и все. Потом уже подключить модальное окно по нужде. 🙂

  • Илья
    Комментариев: 1

    Всё работает. Супер! Спасибо.

  • Алексей
    Комментариев: 3

    почему то не работает в IE и в Мозиле... а гугл хроме работает великолепно... не подскажешь, что можно сделать?

    • Виталий
      Комментариев: 267

      Смотри внимательно, все ли правильно сделал. Пользуюсь Мозиллой и в ней эта кнопка была создана и проверена. В ИЕ у меня тоже все гуд 🙂

      • Алексей
        Комментариев: 3

        я просто скопировал ссылку:
        http://gnatkovsky.com.ua/files/pulseknop/index.html

        с мозилой разобрался... на ноуте была не обновленная... а ИЕ так и не работает... ИЕ 8...

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

        • Виталий
          Комментариев: 267

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

      • Алексей
        Комментариев: 3

        http://s32-temporary-files.radikal.ru/38248278bac84df7946debbffd4dfdd7/-88693455.png

  • Александра
    Комментариев: 3

    спасибо большое за статью)) а не поможете разобраться - вставляю в нужное мне место код, а кнопка все равно упорно отображается в нижнем правом углу...что не так делаю?

    • Виталий
      Комментариев: 267

      Она там будет всегда 🙂 Пока Вы не укажите ее расположение в стилях, а именно в первой строке стилей -

      position:fixed;bottom:120px;right:100px; Тут указано, что кнопка фиксированная и располагается 120 пикселей от низа и 100 пикселей от правого края. Измените эти значения и добьетесь нужного результата.

      • Александра
        Комментариев: 3

        большое спасибо!! все работает и вот теперь на месте своем))

  • Александра
    Комментариев: 3

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

  • алексей
    Комментариев: 1

    Доброе. Подскажи как сделать чтобы при нажатии на трубку мышкой или на сеносрном экране происходил набор номера или появлялась почтовая форма, вот сайт http://rem22.ru/#. Т.е сделать кнопку как бы ссылкой

    • Виталий
      Комментариев: 267

      Доброе, Алексей. Чтобы был набор номера - в коде кнопки вместо решетки - href="#" пропишите - tel:+1234567890
      Номер, конечно же, замените на свой 🙂
      Чтобы появлялась почтовая форма, нужно прикрутить модальное окно.

  • алексей
    Комментариев: 3

    вот посмотрите

  • алексей
    Комментариев: 3

    почтовый скрипт туда можно вставить?

  • Олег
    Комментариев: 1

    Виталий, спасибо большое за кнопку) Я испытываю слабость к красивым добротным вещам, так вот дизайн вашей кнопки - великолепен!

    Не в пример большинству келлбек сервисов, у которых видимо дизайн делали Джамшут с Равшаном, где все вровень выпирает)) Я до сих пор не могу понять - люди вроде делают сервис, рекламируются за деньги - а дизайн страшный хоть выколи глаз.. Зачем так жить)

  • Евгений
    Комментариев: 1

    Огромное вам спасибо! Очень качественно

  • Алексей
    Комментариев: 1

    Благодарю аффтара!!! Все работает и настраивается. Применил на ucoz сайте совмесно с почтовой формой для обратного звонка.
    Мож кому полезно будет куда вставлять ссылку почтовой формы ucoz в html код:

  • Женя
    Комментариев: 1

    Виталий, спасибо за такую подробную инструкцию. Но для меня это сильно сложно 🙁 Поставила готовый функционал от pozvonim. Там попроще получилось. Еще раз спасибо!

  • Юлия
    Комментариев: 2

    Добрый вечер, Виталий.
    Вы не представляете сколько пришлось перелопатить сайтов, чтобы найти ваш и решить проблему.
    Теперь по кнопке - она прекрасна!
    Но вот у меня проблема небольшая - мне нужен определенный цвет этой кнопки, помогите пожалуйста решить проблему, я к сожалению в первых 7 кода (как и в остальных) не нашла параметров настройки именно цвета.
    Спасите меня, пожалуйста.

    • Виталий
      Комментариев: 267

      Здравствуйте. В 3 строке background-color:rgba(26,255,179, .5); - это цвет центрального круга.
      Цвет анимации начинается с 31 строки кода это все встречающиеся в коде - #1affb3
      И все - rgba(23,167,167, 0) это тот же цвет только в формате rgb (первые 3 цифры 23,167,167 четвертая цифра - ноль в конце, это прозрачность. ). Если подбирать цвет в фотошопе, то там есть все эти цифры

      • Юлия
        Комментариев: 2

        Да, Виталий, я разобралась, просто смотрела код, а он отражается на странице не в полную ширину из-за верстки, извините за невнимательность. Но ваша кнопочка служит мне альтернативным методом решения задачи, которая состоит вот в чем. Мне необходимо свести видео в вегасе (это итог, формат видео для ютуба), у меня имеется подложка в виде файла фотошоп, и эффект визуализации голоса, уже сделанный в After Effects. но еще мне нужно, чтобы в видео как раз пульсировала вот такая телефонная трубка и я ума не приложу как ее сделать. В данный момент додумалась лишь до захвата экрана вашей страницы и каким-то образом вшить в вегасе этот кусок видео. Если вы знаете как мне помочь - напишите пожалуйста на почту. Много денег не обещаю - их нет, но отдам все, что есть, чтобы решить этот вопрос. Заранее благодарна.

  • Инна
    Комментариев: 2

    Здравствуйте. Скажите, а можно ли сделать так, что бы при наведении на трубку менялась картинка на другую как в Вашем плагине . Меняется на "Заказать звонок." Спасибо

    • Виталий
      Комментариев: 267

      Здравствуйте. Конечно можно 🙂 Картинка присвоена элементу, а вернее псевдоэлементу #uptocall-mini .uptocall-mini-phone:before

      Присвойте новый background для этого псевдоэлемента, но только при наведении на родительский элемент, то есть - #uptocall-mini .uptocall-mini-phone:hover:before И дальше уже новые параметры 🙂

  • Вася
    Комментариев: 2

    Так и не понял где скачать картинку трубы? По ссылке выше - рожица

  • Вася
    Комментариев: 2

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

    Спасибо за кнопку

    • Виталий
      Комментариев: 267

      Уважаемый, в примере все отлично там трубка и чтобы ее скачать нужно просто правой кнопочкой мыши нажать и сохранить изображение на своем компьютере, а потом залить себе на сайт. А рожицы получили, хитроумные, вернее слабоумные мастера, которые вместо того чтобы скачать картинку себе на сайт подключили с моего сайта. Вот я про них тут и написал http://gnatkovsky.com.ua/vorovstvo-kontenta-ili-kak-ne-uvazhat-chuzhoj-trud.html 🙂

      • Вася
        Комментариев: 1

        Если уж даёте что-то, до давайте до конца. Чтобы избавиться от тех и подобных недоразумений, иконку трубки можно просто положить в зип архив и выложить к статье в аттаче. Ведь каждому дорого время и мы приходим к вам (вебмастерам) за помощью и с какими-то надеждами, за что и говорим вам спасибо или поддерживаем финансово (кто, на что горазд))). Конечно сейчас я услышу что-то типа: дай нахаляву, а им еще не нравится, но всё же так было бы правильнее. Не обижайтесь. Еще раз спасибо за шикарный кнопарь)). И да, по правому щелчку мыши на саму кнопку у меня в контекстном меню нет функций, которые обычно бывают у картинок.

  • Александр
    Комментариев: 1

    Приветствую Всех! Установил данный плагин на сайт, доволен как слон.
    Автору огромное спасибо за оперативность, все вопросы разрешили в течении 5 минут, установка мгновенная.

  • Евгений
    Комментариев: 1

    Здравствуйте не получается подключить окно не поможете?

  • Buj
    Комментариев: 1

    Вы писали:

    "УВАЖАЕМЫЕ МАСТЕРА! Имейте совесть, если используете данную кнопку, то хотя бы картинку трубки телефонной заливайте себе на хостинг, а не тупо копируете ссылку на мой сайт. Таких умельцев и их сайты прославлю на весь интернет ?"

    "Можно было в примере взять путь к картинке и просто сохранить ее к себе указав к ней путь ? http://gnatkovsky.com.ua/files/pulseknop/mini.png"

    При переходе по ссылке непонятное лицо! Перезалейте картинку плз

    • Виталий
      Комментариев: 267

      От куда вы вообще взяли путь http://gnatkovsky.com.ua/files/pulseknop/mini.png ? Под примером есть ссылка на скачивание иконки. Скачайте и залейте себе на сайт

  • Женча
    Комментариев: 2

    Подскажите, пожалуйста, пытаюсь через кнопку открыть окно формы в связке с fancy box
    Через стандартные кнопки темы работает, через вашу никак не реагирует. Думал, что 2 кнопки конфликтуют между собой, пробовал убирать стандартную - не помогло. Сама кнопка отлично отображается и при нажатии в строке браузера отражается ссылка, но действие не выполняется.

    Пример стандартной кнопки
    <a href="#contact_form_pop" class="btn-shortcode dt-btn-m dt-btn custom-btn-color custom-btn-hover-color ico-right-side fancybox" target="_blank" id="dt-btn-1"><span>Заказать обратный звонок</span><i class="fa icon-mobile"></i></a>

    Вот так я вставляю вашу
    <a href="#contact_form_pop" id="uptocall-mini"><div class="uptocall-mini-phone fancybox"></div></a>

    Внизу прописан сам вызов формы
    <div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
    <div role="form" class="wpcf7" id="wpcf7-f14917-o1" lang="ru-RU" dir="ltr">
    <div class="screen-reader-response"></div>
    <form action="/services.html#wpcf7-f14917-o1" method="post" class="wpcf7-form" novalidate="novalidate">
    <div style="display: none;">
    <input type="hidden" name="_wpcf7" value="14917" />
    <input type="hidden" name="_wpcf7_version" value="4.4.1" />
    <input type="hidden" name="_wpcf7_locale" value="ru_RU" />
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f14917-o1" />
    <input type="hidden" name="_wpnonce" value="b8605d5172" />
    </div>
    <p>Ваше имя (обязательно)<br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </p>
    <p>Ваш телефон (обязательно)<br />
    <span class="wpcf7-form-control-wrap tel-5"><input type="tel" name="tel-5" value="+380" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" /></span></p>
    <p>Сообщение<br />
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </p>
    <p><input type="submit" value="Отправить" class="wpcf7-form-control wpcf7-submit" /></p>
    <div class="wpcf7-response-output wpcf7-display-none"></div></form></div> </div>
    </div>

    • ED
      Комментариев: 2

      Не понимаю только где вводить адрес почты на которую будет приходить сам номер!?

  • Виталий
    Комментариев: 267

    Возможно проблема с айди. У стандартной кнопки он id=dt-btn-1 , а у моей id=uptocall-mini.
    Вам нужно или моей поменять название айди и переименовать его в стилях, или в скрипте который вызывает fancybox указать нужный айди кнопки, тоесть uptocall-mini

  • Женча
    Комментариев: 2

    Огромное спасибо за помощь! разобрался
    Вызов в футере определяется верхней строчкой в коде внизу
    <a href="#contact_form_pop" class="fancybox">заказать звонок</a>
    <div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
    [ contact-form-7 id="420" title="Заказать звонок" ]
    </div>
    </div>

    т.е она должна соответствовать с вашей

  • Ольга
    Комментариев: 1

    спасибо автору поста. процветания ресурсу.

  • Павел
    Комментариев: 2

    Спасибо, очень хорошая кнопка.
    Не подскажите, как можно сделать крестик для закрытия кнопки при наведении на неё?

    • Виталий
      Комментариев: 267

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

      • Павел
        Комментариев: 2

        Хотел сразу купить Ваш плагин, даже просто чтобы поддержать.
        Но у меня сайты на joomla а не wordpress.
        Еще раз спасибо, крестик прикрутил.

        • Виталий
          Комментариев: 267

          Для joomla я даю просто скрипты, которые нужно интегрировать вручную. Если навыками верстки владеете, проблем не должно возникнуть. Залить папку, подключить скрипты и стили, добавить код кнопки и указать почту 🙂

  • Руслан
    Комментариев: 1

    А каков алгортим вызова модального окна, если уже есть на сайте кнопка (из вашей темы)!?
    Она вставлена в подвал и имеет

    Какие дальнейшие действия?
    И что надо в этом коде поменять или добавить, что бы вызвать модальное окно?
    Очень интересует пошаговая инструкция)
    Спасибо!..
    п.с. я вообще не программист) только учусь)

  • София
    Комментариев: 1

    Здравствуйте. В хроме и в опере пульсирующая тень вокруг кнопки приобретает квадратную форму через 1-3 сек.. Как исправить ? Спасибо.

  • Алексей
    Комментариев: 1

    Добрый день. Пытаюсь с помощью Modals вывести всплывающее окошко с формой... Никак.. :((

  • Сергей
    Комментариев: 2

    Здравствуйте.
    Подскажите как убрать границы? Что бы анимация сразу же была во всей своей красе а не заключенная в рамку?

    • Виталий
      Комментариев: 267

      Добавил новую кнопку. Границы были только в хроме.

      • Сергей
        Комментариев: 2

        Границы есть абсолютно везде.
        Сам уже решил проблему.
        .uptocall-mini{
        padding:40px
        }
        Может кому пригодится

  • Александр
    Комментариев: 1

    Вставил кнопку на друпал. Объединил с всплывающим окном. Спасибо.
    Результат (klinika-1.com сайт в разработке, рекламировать не пытаюсь)

  • Дима
    Комментариев: 1

    только позицию лучше fixed сделать - чтобы всегда в правом нижнем углу трубка висела 😉

  • Эдуард
    Комментариев: 2

    Добрый день!
    Сделал все как написано, но не совсем все понятно. Сайт на WordPress
    1. Анимированный голубой кружек без трубки!
    2. Где указывать на какую почту отправлять запрос о звонке?

  • SanaPo
    Комментариев: 1

    С П А С И Б О !
    весь день ковырял инет, пытался угнать с бесплатных и платных сервисов дизайн и анимацию кнопки, но т.к. сайт у меня с нуля написан мной что можно сказать в блокнотике, не хочу использовать громоздкие коды и скрипты подгружаемые с гуглов и тп а без этого работают те кнопки наполовину. Уже нумал тупо гифк рисовать или мучаться - создавать свою анимацию на голом javascript... короч все решено, осталось подключить к написанной уже форме заявки

  • Сергей
    Комментариев: 1

    Добрый день Виталий,подскажите пожалуйста куда установить "eModal-1" в код HTML?

  • Глеб
    Комментариев: 1

    Огромное спасибо!
    Зверски отличный способ!

  • Денис
    Комментариев: 2

    Витай подскажите как привязать окно отправки емаил к вашей кнопке чтобы оно было не большого размера ? дайте скрипт код сайт на юкозе

  • Александр
    Комментариев: 1

    Спасибо.

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий