Как сделать форму "Заказать звонок" на webform

28 May, 2014

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

Базовая настройка

Понадобятся модули Webform, Ctools и Modal Forms.

Включаем модули, добавлем новый материал типа 'Webform', на вкладке 'Опросник > поля формы' добавляем два поля 'Имя' и 'Телефон', тип 'Строка текста'.
Webform fields

В 'Настройках оповещений' указываем свой адрес почты, куда слать уведомления о новых запросах.
Webform email
В 'Настройках формы' отмечаем роли, которые могут отправлять запросы, а также настраиваем текст кнопки отправки в разделе 'Advanced settings'
Weform settings

Всплывающее окно формы с помощью Modal Forms

С помощью модуля Modal Forms можно легко показать формы в всплывающем окне, достаточно вставить в шаблон ссылку с определенным классом и путем.
Webform Modal Form
Чтобы показать нашу форму, добавляем в нужное место ссылку. Можно просто на html:

<a class="ctools-use-modal ctools-modal-modal-popup-small" href="/modal_forms/nojs/webform/%node">Заказать звонок</a>

с помощью функции l():

<?php
print l('Заказать звонок', 'modal_forms/nojs/webform/%node', array('attributes' => array('class' => array('ctools-use-modal', 'ctools-modal-modal-popup-small'))));
?>

или функцией ctools_modal_text_button():

<?php
print ctools_modal_text_button('Заказать звонок', 'modal_forms/nojs/webform/%node', 'Заказать звонок''ctools-modal-modal-popup-small');
?>

При нажатии на ссылку увидим нашу форму. По умолчанию окно имеет размеры 80%х80%. Добавляя к ссылке классы, можно менять его размер:

  • ctools-modal-modal-popup-small (300x300 px)
  • ctools-modal-modal-popup-medium (550x450 px)
  • ctools-modal-modal-popup-large (80%x80%)

На странице настроек модуля (Configuration > Development > Modal Forms) в разделе 'Styles and Options' размеры окон можно настроить на свой вкус.

Защита от спама без каптчи

Для защиты формы от ботов можно использовать модуль Honeypot, он добавляет к формам скрытое средствами css текстовое поле с 'вкусной' для ботов меткой типа site, url и т.д. Если это поле оказывается заполненным, форма не отправляется. Хотя этот способ выглядит примитивным, он реально работает, в чем я убедился лично, используя данный модуль на нескольких сайтах. Модуль можно использовать для любых форм, в том числе для форм регистрации, логина, комментариев и т.д.

После установки модуля идем в его настройки (Конфигурация > Honeypot configuration) и в разделе 'Формы с включенной защитой Honeypot' ставим чекбокс 'Webforms (all)'
Honyepot config

Теги: 

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

by Евгений on вт, 29/07/2014 - 15:55

Хорошая статья. Очень полезная. Спасибо

by Довран on чт, 30/10/2014 - 15:33

Спасибо автору. 2 часа потратил чтобы найти эту статью.

by Довран on чт, 30/10/2014 - 18:03

Все сделал как на уроке. Дошел до места вставки кода HTML, сохранил блок. Нажимаю на ссылку "Заказать звонок" и всплывает окошко с предупреждением AJAX.

Что делать подскажите автор!

by Довран on чт, 30/10/2014 - 22:52

Все нормально работает, вместо %node неправильно прописал путь

by Гость on ср, 12/11/2014 - 12:55

Сорри конечно,
я немного новичёк, поэтому такой вопрос, что конкретно прописывается вместо %node?

Заранее спасибо

by DreamR1der on ср, 12/11/2014 - 15:29

id ноды вебформы

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

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.