Оновлений модуль Webform в Drupal 8 для створення форм

13.02.2019
Оновлений модуль Webform в Drupal 8 для створення форм
Автор:

Різноманітні форми — основа співпраці сайту з користувачем. Вони важливі для юзабіліті, конверсій, маркетингу і так далі. Тож інструменти для створення форм завжди користуються популярністю — Drupal-модуль Webform посідає 7-е місце у списку 42000 контрібних модулів, що робить його одним з найважливіших у Drupal-розробці. Ми зробимо його огляд, а також покажемо простий приклад створення форми з модулем Webform.

Модуль Webform в Drupal 8: коротко про головне

Модуль Webform дозволяє створювати будь-які форми — від простих до багатосторінкових. Він також додає такі налаштування та фічі, як:

  • збір статистики
  • сповіщення на електронну пошту
  • підтвердження
  • експорт даних у різноманітних форматах
  • доступи, умовна логіка
  • фільтрування і сортування
  • передача результатів у CRM
  • збереження в CSV
  • та багато інших.

Стабільна версія модуля Webform для Drupal 8 з’явилася у 25 грудня 2018 року. Засновник Друпала Дріс Байтаерт привітав творця Webform, Джейкоба Роковіца, у Твіттері, назвавши реліз великим досягненням.

Екосистема модуля Webform у Drupal 8

Модуль Webform у Drupal 8 — це складний модуль, до складу якого входить 20 підмодулів. Для роботи мінімально потрібно увімкнути Webform і Webform UI.

Також є ряд контрібних модулів, які працюють разом з Webform і розширюють його можливості ще далі: Webform Views, Webform REST, Webform Analysis, Webform Encrypt, Webform Composite Tools, Webform Invitation, CAPTCHA, Honeypot, MailSystem, SMTP та інші.

Особливі потужні можливості модуля Webform у Drupal 8

Опис форм у YAML-файлі або створення в адмінпанелі

Одна з найвизначніших рис модуля Webform у Drupal 8 — можливість описувати форми в YAML-файлі. Адже автор модуля Джейкоб Роковіц також створив модуль YAML Form спеціально для Drupal 8. І, починаючи з версії Webform 8.x-5.x, YAML Form увійшов до складу Webform. Тож девелопери тепер можуть перейти до YAML-файлу, обравши вкладку “Source”.

Однак, модуль також має зручний користувацький інтерфейс для створення форм, що доступний для адміністраторів сайтів. Адмін-панель містить приклади та відео, а також вбудовану форму “Contact”.

Підтримка лімітів щодо надсилання даних та опцій

Модуль Webform підтримує ліміти щодо надсилання даних у формі. Розробник модуля Джейкоб Роковіц присвятив цій темі блог.

  • Тепер можна обмежити надсилання даних за однією формою, одному користувачу, і так далі. Коли перевищується цей ліміт, з’являється кастомне повідомлення.

Webform module supports submission and option limits

  • Webform також дозволяє лімітувати надсилання даних в опцію елемента (у селект-меню, в чекбокс і так далі).

Webform module allows to limit the number of allowed submissions per element

Підтримка HTML5 і SVG

  • Модуль Webform також підтримує створення елементів із використанням HTML5 і SVG. Як пояснив Джейкоб Роковіц у пості, іноді кінцевим користувачам потрібний інтерактивний візуальний механізм, який би дозволив їм обирати складну опцію (наприклад, локацію на карті). І саме тут стають в пригоді HTML5 і SVG, дозволяючи розробникам створювати візуально привабливі та інтерактивні елементи.

Інтеграція з модулем Group

  • Найновіша (поки що) можливість — інтеграція модуля Webform із модулем Group. Модуль Group дозволяє створювати групи користувачів із різними рівнями доступу. Тож тепер на вкладках “access” кожної вебформи можна надавати дозволи групам користувачів — і всі учасники групи отримають їх.

Integration of Webform module with the Group module

Приклад: створення простої форми з модулем Webform 8.x-5.1

Ми створимо форму зворотнього зв’язку для клієнтів з нуля. Увімкнувши модулі Webform і Webform UI, ми переходимо до розділу Structure — Webforms. Клікаємо “Add webform”, даємо формі назву “Let us know your thoughts” і зберігаємо.

Тепер форму потрібно наповнити полями, які у Webform називаються «елементи». Кнопка “Add element” веде до списку 60+ доступних елементів, серед яких є прості і комплексні.

Нам потрібне поле для імені клієнта. Для цього є елемент типу “name”, який містить під-елементи (ім’я, прізвище і так далі), на яких можна поставити або зняти галочку, щоб вони відображались у формі або ні. Якщо немає потреби в складній структурі імен, можна обійтися простим елементом типу “Text field”. Назвемо його “Your name (optional)” в “Title.”

Для поля з електронною адресою ми обираємо елемент типу “Email”. Також можна додати автозаповнювач (placeholder) для формату електронної адреси

Елемент типу “Checkboxes” дозволить клієнтам позначати певні опції. Для нашої форми зворотнього зв’язку ми вписуємо назви послуг компанії у “option values”.

Елемент типу “Rating”, де ми задаємо спектр від 1 до 10, дасть клієнтам можливість дати свою оцінку.

Елемент “Text area” служитиме для їхніх коментарів.

У переліку всіх полів нашої форми їх можна міняти місцями за допомогою мишки або швидко робити обов’язковими/необов’язковими.

Тепер оберемо, куди йтимуть надіслані форми. В основних налаштуваннях форми обираємо вкладку Settings — Emails/Handlers і натискаємо “Add email.” Там налаштовуємо адресу в пункті “sent to” (в нашому випадку підійде дефолтне значення пошти адміністратора сайту — [site:mail]). Далі можна додати кастомну тему, з якою нам приходитимуть листи — “You received a new form submission.”

Вкладка “View” дозволяє переглядати форму на сайті. Відправивши щось через нашу форму, ми бачимо сповіщення про це на пошті адміністратора.

Створимо будь-які форми для вашого Drupal-сайту

Це був лише простий приклад форми, в якому ми навіть не торкнулися складних опцій — умовної логіки, доступів, JS-ефектів і так далі. А можливості модуля Webform безмежні, і наша Drupal-команда може створити для вас форми в точності з вашими вимогами.

Голосів: 1 Рейтинг: 5

Також по темі

1

Усім подобаються привабливі шаблони веб-сторінок. На щастя, Drupal пропонує безліч чудових інструментів для їх створення. Наша Drupal-команда любить обирати найкращі інструменти з арсеналу, при...

2

Що перше привертає вашу увагу, коли ви відвідуєте інтернет-магазин? Без сумніву, це дизайн сайту та його зовнішній вигляд. Виникає питання, які найкращі теми для електронної торгівлі? Не...

3

Нещодавно були оголошені дати майбутнього релізу Drupal 9 і припинення підтримки Drupal 8 та 7. Давайте детальніше дізнаємося, що це все означає для власників сайтів на Drupal 8 і 7 та які дії від...

4

Наша команда розробників InternetDevels надає перевагу Друпал 8 CMS (система керування контентом), коли мова йде про створення багатомовного вебсайту. Багато хто думає, що достатньо просто...

5

Контент-редакторам та власникам сайтів просто перехопить подих від захвату, коли вони дізнаються про новий редактор Ґутенберг в Drupal 8! У восьмій версії Друпала і так уже є чудові можливості з...

Subscribe to our blog updates