Настройка функции "Заказать обратный звонок". Html форма заказа обратного звонка для сайта


Кнопка "Заказать обратный звонок"

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

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

Конечно, в большинстве случаев модальные окна делают с применением javascript, но сегодня мы попробуем обойтись только средствами css, и не будем нагружать наш landing page лишним скриптом.

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

О том, как настроить контактную форму можно почитать в этих статьях:

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

Будем реализовывать такой функционал: :)

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

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

Первое, что нужно сделать,  это подключить таблицу стилей (less), представленную в исходнике. Я очень подробно описал его комментариями, посмотрите и внесите правки.

Html структура очень проста. Размещаем эту ссылку в нужное место на сайте. Туда, где вы планируете вывести кнопку «заказать обратный звонок»:

<a href="#modal">Заказать обратный звонок</a>

Теперь нужно создать контейнер модального окна:

<div>     <div>        <div> содержимое модального окна </div>         <a href="#close" title="Закрыть"></a>     </div>         </div>

Я добавил небольшую контактную форму, получилось так:

<div> <div> <p>Оставьте ваш телефон<br/>и наш консультант свяжется с вами</p> <form name="backPhone"> <input name="telephone" type="Tel" maxlength="20" placeholder="Введите ваш телефон" required=”required” /> <button type="submit" form="backPhone">Получить прайс </button> </form> <a href="#close" title="Закрыть"></a> </div> </div>

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

Скачать исходник

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

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

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

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

smartlanding.biz

Opencart - Скрипт Обратного Звонка Для Сайта | Модули, Шаблоны, Движки

Это бесплатный скрипт обратного звонка (контактная форма, которая вызывается при клике на кнопку и достаточно легко подключается к любому сайту).

Идея создания это скрипта пришла после того, как появилось сотни разных вопросов в комментариях к статьям о формах обратной связи, ведь многим не хочется разбираться с версткой, программированием и подобными вещами, а нужен готовый инструмент которой работает и решает поставленные задачи.Кроме того, захотелось углубится в изучение javascript. А на реальном проекте это делать гораздо интереснее. По мере изучения, скрипт будет постоянно улучшаться и совершенствоваться. Если есть пожелания, критика и рекомендации, буду рад услышать ваше мнение в комментариях.

Что представляет из себя ?На данный момент - это кнопка, в левом нижнем углу экрана, при нажатии на которую появляется 2 дополнительные кнопки с иконками телефона и конверта. При клике на одну из них, в модальном окне появляется соответствующая форма (форма для заказа обратного звонка, и форма для отправки сообщения или заявки). Выглядит это следующим образом:Посмотреть вложение 2596 Посмотреть вложение 2597 Посмотреть вложение 2598 Как подключить к своему сайту?Чтобы подключить к своему сайту, достаточно скачать и распаковать архив в корень вашего сайта. В результате у вас появится папка script.

После этого, между тегами head необходимо подключить таблицу стилей:

Код:

<!-- Таблица стилей --> <link href="script/css/style.css" type="text/css" rel="stylesheet"> А ниже и сам скрипт.

Код:

<script src="scritp/script.js"></script> Но скрипты, обычно, стараются подключать в конце сайта, поэтому я рекомендую подключать его перед закрывающимся тегом /body.

Теперь, нужно указать адрес почты, на который будет приходить письмо. Делается это в файле mail.php, который находится по пути scritp/php/mail.php. Ищем строки:

Код:

$to = "[email protected]"; /*Укажите адрес, на который должно приходить письмо*/ $sendfrom = "[email protected]"; /*Укажите адрес, с которого будет приходить письмо */ И меняем адреса, на свои.

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

Не стоит подключать несколько раз jQuery к сайту. Это может вызвать ошибки и повредить работу некоторых плагинов. JQurey подключается 1 раз и располагается до вызова остальных скриптов, которые его используют.

После описанных выше действий, скрипт готов к использованию, осталось только указать свою почту в настройках.

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

  • Подключение до 3 кнопок.
  • Выбор, между использованием иконического шрифта FontAwesome или svg, png, jpg иконками.
  • Редактирование placeholder у полей.
  • Редактирование заголовков форм.
  • Редактирование иконок форм и кнопок, вызывающих форму.
  • Возможность вызова формы своей ссылкой, расположенной в любом месте на сайте.
  • 3 положения основной кнопки.
  • Настройка внешнего вида (несколько тем оформления).
  • Возможность сделать поля обязательными для заполнения.
  • Возможность подключения reCaptcha.
  • Передача utm меток.
  • Передача в сообщении города пользователя.
  • Настройка цели для Метрики.
  • Передача файла.
  • Отправка письма на несколько адресов.
  • Автоматическая отправка письма пользователю.
  • Редактирование сообщения текста об успешной отправке.
  • Автоматическое всплывание формы, через время.
  • Возможность подключения своих форм.
  • Связь с CRM Битрикс 24.
  • Подключение простой корзины для сайта.
Это не полный список будущих возможностей скрипта. Что-то сделать проще, а для реализации каких-то моментов, придется кардинально переработать логику. Но это все будет происходить с усовершенствованием самого скрипта. Еще раз повторюсь, что список будет расширятся с учетом ваших пожеланий и замечаний, который всегда будет содержать подробный комментарий для редактирования.

Какие настройки доступны и как ими пользоваться?Все настройки расположены в файле. В самом начале:

Код:

/ Опции // Подключен ли к сайту fontawesome - иконический шрифт. Если нет, то будут выводиться обычные картинки. // true - подключен, false - не подключен var fontAwesome = false; // Путь к картинкам, если не подключен к сайту fontawesome if (!fontAwesome){ var callFormIcon = '<img src="smartlid/img/phone.svg">'; var requestFormIcon = '<img src="smartlid/img/envelope.svg">'; var basketFormIcon = '<img src="smartlid/img/phone.svg">'; } // Подключение формы обратного звонка // true - выводить формы, false - не выводить var callForm = true; // Подключение формы с возможностью отправить сообщение // true - выводить формы, false - не выводить var requestForm = true; // Подключение корзины к landing page (пока не реализовано) // true - выводить формы, false - не выводить var basketForm = false; // Внешний вид форм (стилевое оформление) -- 'dark-space' -- 'orange-morning' -- 'blue-night' var styleForm = 'dark-space'; // Заголовок формы для заказа обратного звонка var callFormTitle = "Закажите обратный звонок, и наш консультант свяжется с вами"; // Путь к иконке формы для заказа обратного звонка var callFormImg = '<img src="smartlid/img/call.svg">'; // Заголовок формы для отправки заявки (сообщения) var requestFormTitle = "Оставьте заявку, и наш консультант свяжется с вами"; // Путь к иконке формы для отправки заявки (сообщения) var requestFormImg = '<img src="smartlid/img/mail.svg">'; // Заголовок формы с корзиной покупок (не реализовано) //var basketFormTitle = "Корзина"; // placeholder для ввода имени var placeHolderName = "Введите ваше имя"; // placeholder для ввода телефона var placeHolderTel = "Введите ваш телефон"; // placeholder для ввода почты var placeHolderMail = "Введите ваш email"; // placeholder для ввода сообщения var placeHolderText = "Введите сообщение"; // Конец настроек Это основные настройки, позже их количество будет расширятся, по мере развития скрипта. Может быть упакую их в отдельный файл. Над этим еще нужно подумать.

Нажмите, чтобы раскрыть...

lowenet.biz

Заказ обратного звонка на jquery

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

Вот так выглядит сама формочка:обратный звонок на jqueryСмотрите демо. При нажатии на кнопку “Заказать звонок” происходит затемнение всего экрана и появляется небольшая формочка, как на картинке выше.

Как подключить такую фичу к сайту?

1. Скачиваем исходники

2. Скрипт jquery.arcticmodal из папки js закачиваем в папку, например со всеми скриптами сайта

3. В начале страницы, между тегами head подключаем скрипт и jquery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="/js/jquery.arcticmodal.js" type="text/javascript"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="/js/jquery.arcticmodal.js" type="text/javascript"></script>

При необходимости, путь до скрипта jquery.arcticmodal.js нужно будет поправить

4. В таблицу стилей добавляем, все стили формы из файла style.css

5. Все картинки из папки img закачиваем в папку со всеми картинками, например шаблона сайта. Затем в css стилях формы прописываем правильные пути до картинок

/******modal-form*******/ .modal-form { background:url(../путь/modal-form-bg.jpg) no-repeat; width:480px; height:393px; }

/******modal-form*******/

.modal-form {

    background:url(../путь/modal-form-bg.jpg) no-repeat;

    width:480px;

    height:393px;

}

6. В том месте, в котором хотим вывести кнопку заказа обратного звонка, вставляем код из файла “Кнопка и форма”

7. Все готово. Осталось только заставить отправлять все полученные данные с формы на нужный e-mail адрес. Для этого, открываем в редакторе файл options.php и находим такой код

/* Формируем сообщение */ $address = "[email protected]"; $sub = "Заказ обратного звонка"; $mes = "Имя: $name \nE-mail: $email \nУдобное время для звонка: $vopros \nТелефон: $number";

/* Формируем сообщение */

$address = "[email protected]";

$sub = "Заказ обратного звонка";

$mes = "Имя: $name \nE-mail: $email \nУдобное время для звонка: $vopros \nТелефон: $number";

В место [email protected] вписываем емайл адрес, на который будут отсылаться данный с формы. Имя, e-mail, телефон удобное время для звонка. Закачиваем файл options.php в корень сайта и проверяем.

Если нужно чтобы данные приходили сразу на несколько e-mail адресов, то для этого просто впишите адреса через запятую

$address = "[email protected],[email protected]";

$address = "[email protected],[email protected]";

 

P.S. Возможно вам пригодиться такой набор кнопочек, ибо желтенькая кнопочка была взята от туда. Кнопки сделаны с помощью css.

 

С уважением, Игорь Дулин

Cервис моментального приема платежей и партнерских программ Glopart.ru Понравился пост? Поделись с друзьями!

Метки записи

igordulin.com

Настройка функции "Заказать обратный звонок"

Функция “Обратный звонок” позволяет добавить к чату еще один способ связи - голосовое общение с клиентом. Узнать больше о звонках через чат вы можете из видеоинструкции:

Активация функции звонков:

“Обратный звонок” отображается у вас в Панели управления в Настройках сайта (для каждого сайта отдельно). При первом подключении звонков вы получите небольшую сумму на баланс для теста услуги.

Итак, в настройках сайта перейдите в раздел “Обратный звонок” и нажмите на кнопку “Подключить”.

Pic1

Далее необходимо пройти 4 шага для подключения звонков.

1. Общие настройки:

Pic2

  • Показывать отдельную кнопку обратного звонка - при включении данной опции на сайте в нижнем правом углу (положение не меняется) будет отображаться дополнительная кнопка заказа обратного звонка.

  • Отправка клиенту SMS визитки после разговора - по завершению разговора клиенту отправляется смс-уведомление с дополнительной информацией.

  • Начальное значение таймера - отсчет времени до звонка клиенту.

2. Время работы:

Pic3

Здесь вы можете задать дни недели и время, когда обратный звонок будет отображаться для клиентов вашего сайта.

3. Контакты операторов:

Pic4

В разделе “Контакты операторов” нужно назначить сотрудников, которые будут отвечать на звонки с сайта, и указать, куда будут поступать звонки: в приложение оператора JivoSite, на мобильный телефон или в программу SIP-телефонии.

4. Доступные страны:

Pic5

На этом этапе нужно выбрать страны, доступные для заказа звонков. По умолчанию - это Россия, но вы можете указать нужные вам страны, развернув список или введя название страны в строку поиска. Можно выбрать несколько стран.

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

Pic6

Настройка автоматического появления:

После того, как вы включили звонки, в разделе “Автоматические действия” появится новое действие: “Заказ звонка по таймеру”.

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

Cb6

Спасибо за использование нашего сервиса JivoSite и хорошей рабочей недели!

www.jivosite.ru