1. Главная

Drupal 8/9: webform/node в модальном окне

Главные вкладки

ivnish 27 ноября 2018 в 9:29
5

Задача: быстро сделать форму "заказать звонок" для сайта

Можно использовать контактную форму, но мне больше нравится webform

1) Создаем вебформу с нужными полями

2) Задаем ей алиас, например /call_me

3) Делаем ссылку вида

<a class="use-ajax" data-dialog-type="modal" href="/call_me">Обратный звонок</a>

4) Выбираем тип "подтверждения" у вебформы. Мне больше понравился вариант с редиректом на главную и выводом сообщения в регион сообщений.

Проверяем, работает. Всё? Нет, не всё. Работает для зарегистрированных пользователей, а для анонимов нет. Чтобы работало для анонимов

5) Добавляем в THEMENAME.libraries.yml

dependencies:
  - core/jquery.ui.dialog
  - core/drupal.dialog.ajax

6) Сбрасываем кэш

Теперь работает для всех.

Автор

ivnish Drupal FullStack Developer
  • Drupal9
  • Drupal8
    • Частые вопросы

    Комментарии

    Аватар пользователя gun_dose gun_dose 28 ноября 2018 в 11:47

    Кстати, clientside validation должен быть полезен, если вебформа аяксовая, т.к. на аясковых формах стандартная HTML5-валидация не работает, ибо события submit для формы не происходит.

    Аватар пользователя azzis azzis 1 декабря 2018 в 17:04

    Есть вариант на мой взгляд более интересный и без необходимости в WebForm. Есть модуль от Никлана ContactTools. Дает возможность прикручивать раличный няшки к контактным формам )

    Аватар пользователя ferrim ferrim 7 июля 2021 в 22:13

    Не работает в хроме... просто переходит на страницу контактной формы.
    включение всплывающих окон в настройках хрома не помогает

    Аватар пользователя chelwolf chelwolf 8 мая 2023 в 22:15
    1

    Урок от автора модуля Webform на тему их показа в модальном окне: https://youtu.be/zmRxyUHWczw

    Я не знал, что такой функционал есть уже из коробки и начал решать эту задачу через модальные окна Bootstrap 5 - получается также не плохо. В шаблоне ноды настраиваю модальное окно согласно документации (https://getbootstrap.com/docs/5.0/components/modal/) и внутри окна вывожу поле, через которое привязываю нужную вебформу к ноде. В настройках формы включаю ajax