Всплывающий обратный звонок html

 
Оставьте ваш телефон
и наш консультант свяжется с вами
 
 Получить прайс 
 
 

Не стал публиковать таблицу стилей, можете скачать исходник здесь:

А с html разметкой — все. Так вот просто. Преимущества этого способа в том, что модальное окно можно вызывать несколько раз на странице и в том, что не используются скрипты.

Как вы могли заметить, я написал, что использовал less. Посмотрите на структуру. Я не использовал и 5% от возможностей препроцессора (только вложенность), так как только начал изучать его, но планирую в будущем чаще применять. Вот хотел спросить у вас, как лучше. Не против ли вы, если примеры кода будут не в CSS а less? У меня Google chrome и Яндекс браузер отказались компилировать less в css без открытия файла через Денвер или OpenServer. На Мазила и IE — проглотили. Так что, скорее всего, буду выкладывать обычные CSS стили.

А на сегодня — все! Всем пока!

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

60 комментариев

Добрый день
Когда, Нажимаю на скачать исходник появляется такая страница со знаками: gyazo.com/2aada13a1d4dbc076c78a28cb535774c
и не получается скачать..

Источник

Создаем бесплатный callback-виджет с SMS и Telegram-оповещением

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

Демонстрацию можно посмотреть по ссылке.

Зачем нужен callback-виджет?

Есть масса сервисов, которые предоставляют различные настраиваемые виджеты обратного звонка — с возможностью подключить АТС, интегрировать с CRM (amoCRM, Битрикс24), с оповещением в Telegram, по СМС и так далее. За такой богатый функционал нужно платить ежемесячно, покупать минуты или выбирать тариф по карману. Стоимость подобных виджетов стартует примерно от 200 рублей в месяц.

Используя виджет, о котором мы поговорим в этой статье, вы получите навечно бесплатное, независимое и настраиваемое под любые нужды решение — с возможностью отправки заявки на почту, в Telegram и по СМС. Также с помощью вебхуков можно подключить отправку данных в CRM (если есть такая возможность на стороне самой CRM).

Минус такого виджета – отсутствие возможности онлайн-звонка. Но, думаю, это не большой минус, а скорее плюс, так как часто менеджеры не успевают ответить на звонок, и компания получает негатив от потенциального клиента. А в случае с виджетом мы принимаем заявку, выводим сообщение о том, что перезвоним в течение определенного времени, и у клиента не возникает негатива. Поэтому минус виджета может быть и плюсом.

Итак, приступим к созданию виджета.

Разметка HTML + CSS

 
 
Вам перезвонить? 
 
 Оставьте свой телефон и мы свяжемся с вами  ">
 

Так как виджет «сквозной» и устанавливается на все страницы, нам необходимо понимать, с какой страницы был заказан обратный звонок, чтобы оперативно помочь клиенту. Для этого нам понадобится скрытое поле в форме, которое будет передавать эту страницу, значение поле должно быть таким:

Если у вас одностраничный сайт или несколько страниц на HTML, измените расширение файла с .html на .php. Если устанавливаете на CMS , то все в порядке.

Второе скрытое поле будет передавать тему заявки — в данном случае это «Обратный звонок».

Теперь добавим небольшой скрипт открытия формы по клику на кнопку. Для этого нам понадобится подключить библиотеку jQuery и написать небольшой скрипт отправки. Если у вас уже подключена библиотека, то этого делать не стоит.

Далее оформим все с помощью CSS. Вы можете добавить этот код в свой файл стилей или создать новый.

body < margin: 0; padding: 0; >.widget-callback < font-family: sans-serif; font-size: 14px; >.widget-callback>div < -webkit-tap-highlight-color: rgba(0, 0, 0, 0); >.widget-callback input < outline: none !important >.widget-callback .callback-button < position: absolute; right: 60px; bottom: 30px; >.widget-callback .callback-button-title < position: absolute; left: -150px; top: 16px; background: rgba(41, 41, 41, 0.75); color: #fff; padding: 6px 10px; border-radius: 3px; >.widget-callback.widget-callback-form-open .callback-button-title < display: none; >.widget-callback .callback-button-title:before < content: ''; position: absolute; width: 0; height: 0; border: solid transparent; border-width: 6px; top: 50%; right: -12px; transform: translateY(-50%); border-left-color: rgba(41, 41, 41, 0.75); >.widget-callback .callback-button-phone < width: 60px; height: 60px; display: block; background: #199c68; border-radius: 50%; position: relative; cursor: pointer; animation: 1200ms ease 0s normal none 1 running shake; animation-iteration-count: infinite; -webkit-animation: 1200ms ease 0s normal none 1 running shake; -webkit-animation-iteration-count: infinite; >.widget-callback.widget-callback-form-open .callback-button-phone < animation: unset; -webkit-animation: unset; background: #ddd; >.widget-callback .callback-button-phone:before < content: ''; background: url(call.svg); background-size: contain; position: absolute; display: block; width: 24px; height: 24px; left: 50%; top: 50%; margin: -12px 0 0 -12px; transform: scale(1); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; >.widget-callback .callback-button-phone:after < content: ''; background: url(cancel.svg); background-size: contain; position: absolute; display: block; width: 24px; height: 24px; left: 50%; top: 50%; margin: -12px 0 0 -12px; transform: scale(0); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; >.widget-callback.widget-callback-form-open .callback-button-phone:before < content: ''; transform: scale(0); >.widget-callback.widget-callback-form-open .callback-button-phone:after < content: ''; transform: scale(1); >.widget-callback .callback-form < display: none; background: #fff; border: 1px solid #f9f9f9; width: 240px; border-radius: 5px; padding: 30px 15px; right: 60px; bottom: 110px; position: absolute; box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.08); >.widget-callback.widget-callback-form-open .callback-form < display: block; animation: formcbwg-in 0.1s ease; >@keyframes formcbwg-in < 0% < transform: translateY(15%); >100% < transform: translateY(0%); >> @keyframes formcbwg-out < 0% < transform: translateY(0%); >100% < transform: translateY(15%); >> .widget-callback .callback-form-title < text-align: center; display: block; margin: 0 0 30px; >.widget-callback input < width: 100%; box-sizing: border-box; padding: 15px; margin: 0 0 10px; border: 1px solid #ebebeb; border-radius: 3px; font-size: 16px; >.widget-callback input[type="submit"] < background: #199c68; color: #fff; text-transform: uppercase; font-size: 14px; border: none; cursor: pointer; >.widget-callback .success-send < text-align: center; >.widget-callback .success-send img < width: 60px; margin: 0 0 20px; >@media (max-width: 600px) < .widget-callback .callback-button < right: 30px; bottom: 30px; >.widget-callback .callback-form < width: 80%; right: 10%; box-sizing: border-box; >> @keyframes shake < 0% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >10% < transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg); >20% < transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); -webkit-transform: rotateZ(15deg); >30% < transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); -webkit-transform: rotateZ(-10deg); >40% < transform: rotateZ(7.5deg); -ms-transform: rotateZ(7.5deg); -webkit-transform: rotateZ(7.5deg); >50% < transform: rotateZ(-6deg); -ms-transform: rotateZ(-6deg); -webkit-transform: rotateZ(-6deg); >60% < transform: rotateZ(5deg); -ms-transform: rotateZ(5deg); -webkit-transform: rotateZ(5deg); >70% < transform: rotateZ(-4.28571deg); -ms-transform: rotateZ(-4.28571deg); -webkit-transform: rotateZ(-4.28571deg); >80% < transform: rotateZ(3.75deg); -ms-transform: rotateZ(3.75deg); -webkit-transform: rotateZ(3.75deg); >90% < transform: rotateZ(-3.33333deg); -ms-transform: rotateZ(-3.33333deg); -webkit-transform: rotateZ(-3.33333deg); >100% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >> @-webkit-keyframes shake < 0% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >10% < transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg); >20% < transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); -webkit-transform: rotateZ(15deg); >30% < transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); -webkit-transform: rotateZ(-10deg); >40% < transform: rotateZ(7.5deg); -ms-transform: rotateZ(7.5deg); -webkit-transform: rotateZ(7.5deg); >50% < transform: rotateZ(-6deg); -ms-transform: rotateZ(-6deg); -webkit-transform: rotateZ(-6deg); >60% < transform: rotateZ(5deg); -ms-transform: rotateZ(5deg); -webkit-transform: rotateZ(5deg); >70% < transform: rotateZ(-4.28571deg); -ms-transform: rotateZ(-4.28571deg); -webkit-transform: rotateZ(-4.28571deg); >80% < transform: rotateZ(3.75deg); -ms-transform: rotateZ(3.75deg); -webkit-transform: rotateZ(3.75deg); >90% < transform: rotateZ(-3.33333deg); -ms-transform: rotateZ(-3.33333deg); -webkit-transform: rotateZ(-3.33333deg); >100% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >>

Источник

Обратный звонок для сайта

Зачастую бывает, что нет возможности использовать библиотеки jQuery или Mootools из за их несовместимости. При этом хочется, чтобы на сайте была всплывающая форма обратного звонка. Это вполне выполнимо по средствам HTML и CSS.

При необходимости форму можно дополнить полями, и придать любой дизайн по средствам CSS.

/* Контейнер */ .modal < /* Слой перекрытия */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; /* Трансформации прозрачности при открытии */ -webkit-transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in; /* Скрываем изначально */ opacity: 0; pointer-events: none; >/* Показываем модальное окно */ .modal:target < opacity: 1; pointer-events: auto; >/* Содержание */ .modal > div < width: 300px; background: #ffffff; position: relative; margin: 10% auto; /* По умолчанию минимизируем анимацию */ -webkit-animation: minimise 500ms linear; /* Придаем хороший вид */ padding: 30px; -moz-border-radius: 7px; border-radius: 7px; -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); -moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9); box-shadow: 0 3px 20px rgba(0,0,0,0.9); text-shadow: 0 1px 0 #fff; >/* Изменяем анимацию при открытии модального окна*/ .modal:target > div < -webkit-animation-name: bounce; >.modal h2 < font-size: 36px; padding: 0 0 20px; >@-webkit-keyframes bounce < 0% < -webkit-transform: scale3d(0.1,0.1,1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); >55% < -webkit-transform: scale3d(1.08,1.08,1); -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0); >75% < -webkit-transform: scale3d(0.95,0.95,1); -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9); >100% < -webkit-transform: scale3d(1,1,1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); >> @-webkit-keyframes minimise < 0% < -webkit-transform: scale3d(1,1,1); >100% < -webkit-transform: scale3d(0.1,0.1,1); >> /* Ссылка на кнопку Закрыть */ .modal a[href=»#close»] < position: absolute; right: 0; top: 0; color: transparent; >/* Сбрасываем изменения */ .modal a[href=»#close»]:focus < outline: none; >/* Создаем кнопку Закрыть */ .modal a[href=»#close»]:after < content: 'X'; display: block; /* Позиционируем */ position: absolute; right: -10px; top: -10px; width: 20px; padding: 1px 1px 1px 2px; /* Стили */ text-decoration: none; text-shadow: none; text-align: center; font-weight: bold; background: #000; color: #ffffff; border: 3px solid #ffffff; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.5); >.modal a[href=»#close»]:focus:after, .modal a[href=»#close»]:hover:after < -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); >.modal a[href=»#close»]:focus:after < outline: 0px solid #000; >/* Открываем модальное окно */ a.openModal < >a.openModal:hover, a.openModal:focus < >.modal .modal_title

Источник

Обратный звонок для сайта. Часть 1

От автора: приветствую Вас дорогой друг. В данное время интернет магазины очень популярны, ведь все больше и больше пользователей интернета, совершают покупки, не выходя из дома. Поэтому если у Вас есть свой собственный сайт-магазин, или же Вы планируете его создать, обязательно необходимо подумать о контактах с будущими посетителями.

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

Поэтому в данном уроке, мы с Вами поговорим о том, как создается форма обратного звонка для сайта, то есть мы создадим анимированную кнопку, клик по которой будет открывать специальную форму, заполнив которую пользователь отправит запрос на обратный звонок. При этом запрос – будет представлять собой простое сообщение для администратора сайта, которое будет отправляться c использованием специальной библиотеки, под названием SwiftMailer, но об этом мы с Вами поговорим позже. И конечно, платный сервис мы подключать не будем, но если это Вам потребуется, Вы всегда сможете доработать созданный функционал.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Итак, сервис обратный звонок, мы реализуем на следующем сайте, конечно — это не интернет-магазин, но в качестве примера он отлично подойдет.

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

Теперь, давайте создадим необходимую разметку Html, а значит, открываем в текстовом редакторе файл, в котором описана структура интересующей страницы, в моем случае — это index.html и перед футером добавим следующий код.

Источник