Создание формы заказа звонка при помощи Webform

Очень часто народ спрашивает на drupal.ru, как же сделать кнопку с формой заказа обратного звона для посетителей. Делается это совсем не сложно, я даже засек, абсолютно с голой идеи для статьи до момента завершения я потратил 3 минуты (включая время на раздумье как делать).

В общем делается это ну вообще нисколько не сложно, всего-то надо модуль Webform и руки. Начнем пожалуй с простого, во что я вникать не буду. Создаем новую форму для обратного звонка. В неё добавляйте какие нужно поля, я думаю это не составит особого труда, а если вы не работали с вебформами, то рекомендую почитать гайд, а потом приступать. Я сделал такую форму:

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

 (function($) {
        $(document).ready(function () {
            // Укажите NID с формой.
            var nodeId = 2;
            // Селектор формы.
            var formSelector = ".node > .content";

            // Обрабатываем клик по кнопке "Заказать звонок".
            // Если хотите использовать on вместо live, ставьте модуль jQueryUpdate.
            $("#call-me").live("click", function(event){
                // Добавлям только один раз.
                if ($("#call-me-form").length == 0) {
                    $("body").append("<div id="call-me-form"></div>");
                }

                // Добавляем закрытие окна.
                $('#call-me-form').load('/node/' + nodeId + ' ' + formSelector, function() {
                    $("#call-me-form").append("<a href="#" id="call-me-close">Закрыть</a>");
                });
            });

            // Обработчик закрытия окна.
            $("#call-me-close").live("click", function(event){
                $("#call-me-form").remove();
            });
        });
    })(jQuery);

Не забудьте поменять NID на соответствующий форме заказа звонка. У меня стоит 2, так как форма находится по адресу: node/2. А также изменить селектор контента где находится форма. По умолчанию стоит для бартика, у вас же будет свой селектор под ту тему которую вы используете.

Далее создайте новый блок или просто где это необходимо, в котором разместим кнопку для вызова нашей формы:

<a href="#" id="call-me" class="button">Заказать звонок</a>

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

    #call-me-form {
      position: fixed;
      left: 40%;
      top: 200px;
      width: 390px;
      padding: 15px;
      background: rgb(250, 250, 250);
      border: 3px solid rgb(202, 202, 202);
      border-radius: 3px;
      box-shadow: 0 8px 30px 0 rgb(213, 213, 213);
    }

    #call-me-close {
      position: absolute;
      top: 5px;
      right: 10px;
      color: rgb(75, 75, 75);
      font-weight: bold;
    }

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

Оставайся на связи

Будь всегда в курсе новых материалов! Подписывайся на каналы\паблики\рассылки чтобы получать оперативные оповещения.

DrupalCamp Краснодар 2017

DrupalCamp — важная часть жизни Друпал-сообщества, способствующая его сплочению, привлекающая внимание IT-сообщества к Друпалу и общества в целом к разработке приложений и сайтов, а также к смежным сферам.

Разработчики, веб-мастера, дизайнеры, менеджеры проектов, владельцы бизнеса и работодатели — внимание большого количества людей будет привлечено нашим событием.

Интересно будет всем, ждем вас 16 декабря в Краснодаре!

Официальный сайт мероприятия

Комментарии

В
Вадим 27.06.2013 - 15:06

День добрый!

А как я узнаю, что кто-то заказал звонок? Мне придет уведомление на e-mail?

Ответ на от Вадим (не проверено)

N
Niklan 27.06.2013 - 16:06

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

В
Виктор 04.08.2013 - 17:08

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

В
Виктор 04.08.2013 - 18:08

Когда нажимаю на эти вопросы форма закрывается

В
Виктор 04.08.2013 - 18:08

В общем понятно с вопросами, у меня английская версия стоит. Но остальная форма все равно не выводится

Ответ на от Виктор (не проверено)

N
Niklan 05.08.2013 - 12:08

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

Ответ на от Niklan

В
Виктор 06.08.2013 - 16:08

Где эти ссылки можно включить?
Еще такой вопрос: как можно сделать такую же кнопку в другой теме, не создавая форму в теме заново? (я сделал свой шаблон, а как там подключить не знаю)

Ответ на от Виктор (не проверено)

N
Niklan 06.08.2013 - 20:08

?q=admin/config/search/clean-urls - чистые ссылки

По поводу шаблона. Надо перенсти созданный JS и подключить его в своей теме. А также прописать стили в файл стилей и все. Все будет работать как и в стандартной.

М
Михаил 10.08.2013 - 23:08

Попробуйте не вбить телефон. Диалог сразу слетит. Вариант не рабочий совсем.

Ответ на от Михаил (не проверено)

N
Niklan 11.08.2013 - 08:08

То что он "не рабочий совсем" Вы преувеличиваете. То что Вы нашли проблему - хорошо, а если бы решили её и поделились как, то было бы еще лучше.

E
Errand 05.09.2013 - 13:09

Элегантно и лаконично! Хорошая работа. Благодарю! Полезная фича

F
Fil 27.01.2014 - 00:01

Как узнать idNode по Url.

И что такое селектор контента?

Ответ на от Fil (не проверено)

j
josgir 15.04.2014 - 01:04

Приблизительно так (код не проверял, могут быть ошибки)

$path = explode('/', current_path()); //берем текущий путь он для ноды должен быть вида /node/1 и отделяем 

$nid = $path[1]; // это и будет nid - id node 

Это всего лишь направление для размышления, а не готовый код, делайте, смотрите api

Селектор контента это тот класс или id который будет уникальный для данного элемента

пример, у блока  <div id="selector"> </div> будет селектор div#selector, или #selector

у <a class="new_selector"> </a> будет селектор .new_selector или a.selector

Селектор на по простому это класс или id (или еще какой-то атрибут) по которому будет определяться ваш элемент

S
SAM 12.02.2014 - 22:02

Допустим у меня в див в котором вебформа имеет class="blabla", то какой код на jquery меня надо написать чтобы после отправки формы, сама вебформа стала display: none; и вышло сообщение (хочу тоже дивом через FadeOut, ну в общем показать дивчик на 5 сек что всё ништяк и отправлено)
 

М
Мария 28.04.2014 - 12:04

Добрый день. Совсем новичек в этом деле. Создала форму в Webform, куда вставлять код?

Ж
Женя 09.05.2014 - 13:05

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

Вот с этим моментом непонятно. Подскажите пожалуйста где искать селектор в моей теме?

Д
Дарья 04.03.2015 - 11:03

Здравствуйте!
Спасибо большое за работу!
Есть 2 вопроса.
1. После отправки формы перенаправляет или на страницу формы обратного звонка или на страницу подтверждения. Как сделать так, чтобы никуда не перенаправляло, а пользователь мог остаться на текущей странице? В настройке веб-формы ставила No redirect (reload current page), но результата нет.
2. Не работает кнопка "Закрыть". Меняла live на on, но результата нет.
Заранее спасибо за ответы!

А
Андрей 21.04.2015 - 19:04

Добрый день!
2 вопроса:
1. Как сделать что бы после отправки формы не было редиректа на страницу формы?
2. Если пользователь не заполнил обязательного поля, то подсветка была в этот же всплывающем окне. Опять же без редиректа на страницу формы, как сейчас?
Спасибо!

А
Алексей 13.06.2016 - 21:06

"Далее создайте новый блок или просто где это необходимо, в котором разместим кнопку для вызова нашей формы:"

Не совсем понял как сделать этот пункт инструкции?

С
Сергей 24.06.2016 - 09:06

Добрый день. У вас напутано с двойными кавычками в скрипте. Например, строчку $("#call-me-form").append("Закрыть"); нужно исправить $("#call-me-form").append('Закрыть'); либо экранировать кавычки $("#call-me-form").append("Закрыть");

Ответ на от Сергей (не проверено)

С
Сергей 24.06.2016 - 09:06

<pre>

$("#call-me-form").append("<a href=\"#\" id=\"call-me-close\">Закрыть</a>");

$("#call-me-form").append('<a href="#" id="call-me-close">Закрыть</a>');

</pre>

А
Алиса 12.10.2017 - 14:10

Не получается настроить, хоть убейся. После танцев с бубном окошко все-таки увиделось, значит, скрипт работает. И кнопка "закрыть" его закрывает. Но содержимое веб-формы не выводит. Видимо, я неправильно указываю селектор, но как его узнать - не могу понять. Я уже devTools к поиску подключила, сижу перебираю варианты классов и идентификаторов, и все равно ничего. (Тема у меня - Corporateclean, если что). Подскажите, пожалуйста, что нужно поставить в качестве селектора.

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

Содержимое данного поля является приватным и не предназначено для показа.