Потрібна форма зворотного зв’язку, яка підлаштовується під вибір користувача: техпідтримка, показуємо одні поля, відділ продажів, зовсім інші. Стандартний Contact Form 7 такого не вміє. Без умовної логіки на сторінці висить простирадло з усіх полів одразу, половина з яких відвідувачу не потрібна. Виглядає неохайно і збиває з пантелику.

Плагін Conditional Fields** for Contact Form 7** вирішує цю проблему: поля з’являються і зникають залежно від того, що обрав користувач. Далі, покрокове складання реальної форми підтримки: від встановлення плагіна до персоналізованих email-відповідей. Той самий підхід масштабується на калькулятори, опитувальники та багатокрокові заявки.

💡 Швидкий огляд:

• Встановлюємо CF7 і Conditional Fields, створюємо базову форму з типом звернення
• Огортаємо групи полів у [group]…[/group], налаштовуємо умови показу через вкладку «Conditional fields»
• Збираємо фінальну форму з вкладеними групами, динамічними підписами та кастомною гілкою «Інше»
• Налаштовуємо персоналізований email: різний текст і різний набір полів для техпідтримки та продажів

Що дають умовні поля

Contact Form 7, найпопулярніший конструктор форм для WordPress: 10+ мільйонів активних встановлень, мінімум накладних витрат. Але з коробки він статичний: усі поля видно завжди. Якщо у формі три гілки логіки (техпідтримка, продажі, партнерство), відвідувач бачить дев’ять зайвих полів, які не стосуються його запиту.

Conditional Fields for Contact Form 7 додає логіку «якщо, то» прямо в редактор форм. Плагін безкоштовний, з рейтингом 4,8 на WordPress.org і 100 000+ активних встановлень. Автор, Jules Colle, він же розвиває Pro-версію з повторюваними полями, багатокроковими формами та обчислюваними значеннями.

Важливо: плагін не видаляє приховані поля з розмітки, а лише ховає їх через JavaScript. Тому всі поля всередині прихованих груп однаково надсилаються на сервер. Імена полів (field names) мають бути унікальними навіть у різних групах, інакше значення перезапишуться. Це правило номер один, і на практиці об нього спотикаються найчастіше.

Встановлення та початкова форма

Встановіть обидва плагіни через Plugins → Add New:

• Contact Form 7, сам конструктор форм
• Conditional Fields for Contact Form 7, рушій умовної логіки

Після активації зайдіть у Contact → Add New і вставте заготовку форми. Поки без умовних груп, просто всі поля разом:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
8
 
9
In case you selected Technical support:
10
Please specify your OS version: [text version]
11
 
12
In case you selected Sales:
13
Where is your business located? [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
14
 
15
[textarea comments]
16
 
17
[submit "Send"]

Ось так виглядає форма без логіки: вибір операційної системи та поля техпідтримки видно завжди, навіть якщо відвідувач обрав «Sales». Варіанта «Інша ОС» немає взагалі, а підпис до поля версії не змінюється під обрану систему. Виправляємо це групами.

Створення груп полів

Група — це пара тегів [group имя-группы] ... [/group]. Усе, що між ними, за замовчуванням приховане і показується лише при спрацюванні умови. Групи можна вкладати одна в одну — це знадобиться для каскадної логіки.

У редакторі форми натисніть кнопку Conditional group над текстовим полем, вона додає теги автоматично.

У вікні, що з’явилося, задайте ім’я групи та опції:

• Clear on hide, очищає всі поля всередині групи, коли та приховується. Корисно, щоб в email не потрапляли значення з невидимих полів.
• Inline, відображає групу як рядковий елемент. Стає в пригоді, коли потрібно вбудувати шматок тексту прямо в речення (пізніше покажу як).

Створіть першу групу technical-support-selected і перенесіть у неї поля операційної системи та версії:

1
[group technical-support-selected]
2
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
3
  [group os-selected]
4
    Please specify your OS version: [text version]
5
  [/group]
6
[/group]

Тут уже дві групи, одна всередині іншої. Зовнішня (technical-support-selected), сам факт техпідтримки. Внутрішня (os-selected), уточнення версії ОС, яке з’явиться ТІЛЬКИ тоді, коли користувач вибрав конкретну операційну систему. Без умови обидві групи поки що невидимі.

Те саме для відділу продажів:

1
[group sales-support-selected]
2
  Where is your business located?
3
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
4
[/group]

Збережіть форму, і групи зникнуть із фронтенду. Це нормально: умов іще немає.

Налаштування умовної логіки

Зберігши форму, перейдіть на вкладку Conditional fields. Тут є два режими: візуальний (випадні списки) і текстовий (пишете правила вручну). Текстовий швидший для складних форм, його й візьмемо.

Натисніть Add new conditional rule і впишіть перше правило:

1
show [technical-support-selected] if [support-type] equals "Technical support"

Синтаксис прямий: show <группа> if <поле> equals "<значение>". Після збереження правила група technical-support-selected стане видимою, щойно користувач вибере «Technical support» у випадному списку.

Додайте правило для продажів:

1
show [sales-support-selected] if [support-type] equals "Sales"

Тепер форма перемикається між двома гілками, але всередині техпідтримки поле версії досі показується завжди. Потрібно, щоб воно з’являлося тільки після вибору конкретної ОС:

1
show [os-selected] if [operating-system] not equals ""

Перевірка not equals "" працює тому, що ми використовуємо first_as_label, і значення -- Choose your operating system -- не вважається вибраним. Поле operating-system порожнє, поки відвідувач реально не клікнув по варіанту.

Ідемо далі: у випадний список ОС варто додати пункт «Other». Якщо користувач вибирає «Іншу», ми не знаємо, що то за ОС, тож дамо два текстових поля: назву системи та версію. Потрібна нова група os-other-selected і правило з оператором AND:

1
show [os-selected] if [operating-system] not equals ""
2
               and if [operating-system] not equals "Other"
3
show [os-other-selected] if [operating-system] equals "Other"

Два правила на одну групу: перше, показувати os-selected для будь-якої ОС, крім «Other», друге, показувати os-other-selected тільки для «Other». Логіка взаємовиключна, конфліктів не буде.

Фінальна форма: динамічні підписи та гілка «Інше»

Тепер зберемо все разом. Додамо inline-групи, які змінюють підпис до поля версії залежно від вибраної ОС: Android, iOS, Linux або Windows. Текст підпису «вшивається» прямо в групу й з’являється тільки при збігу умови:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
[group technical-support-selected]
8
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows" "Other"]
9
 
10
  [group os-selected]
11
    Please specify your [group os-android inline]Android[/group][group os-ios inline]iOS[/group][group os-linux inline]Linux[/group][group os-windows inline]Windows[/group] version:
12
    [text version]
13
  [/group]
14
 
15
  [group os-other-selected]
16
    Please specify your OS and version.
17
    [text other-os "Operating System"][text other-version "Version"]
18
  [/group]
19
[/group]
20
 
21
[group sales-support-selected]
22
  Where is your business located?
23
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
24
[/group]
25
 
26
[textarea comments]
27
 
28
[submit "Send"]

Ключовий момент: inline-групи з назвами ОС ([group os-android inline]Android[/group]). Атрибут inline робить групу рядковим елементом, і текст підпису не розбивається на абзаци. Умови для цих груп на вкладці Conditional fields:

1
show [technical-support-selected] if [support-type] equals "Technical support"
2
show [sales-support-selected] if [support-type] equals "Sales"
3
show [os-selected] if [operating-system] not equals ""
4
               and if [operating-system] not equals "Other"
5
show [os-android] if [operating-system] equals "Android"
6
show [os-ios] if [operating-system] equals "iOS"
7
show [os-linux] if [operating-system] equals "Linux"
8
show [os-windows] if [operating-system] equals "Windows"
9
show [os-other-selected] if [operating-system] equals "Other"

Натисніть Save conditions, потім збережіть форму. Скопіюйте шорткод [contact-form-7 id="..." title="..."] на сторінку й перевірте на фронтенді. Перемикання між гілками має працювати миттєво, без перезавантаження сторінки.

Персоналізація email-відповіді

Умовні групи працюють не тільки у формі, а й у шаблоні листа. Це означає, що користувач може отримати різний email залежно від того, що вибрав.

Відкрийте вкладку Mail у редакторі форми. У полі Message body обгорніть текст у ті самі групи, що використовували у формі:

1
[technical-support-selected]
2
Thank you for submitting your technical support question
3
[/technical-support-selected][sales-support-selected]
4
Thank you for your sales question
5
[/sales-support-selected]

Закривний тег [/technical-support-selected] і відкривний [sales-support-selected] ідуть впритул, без пробілу, інакше в листі з’явиться зайвий відступ.

Тепер додамо таблицю із заповненими полями. Усередині кожної групи перелічимо ТІЛЬКИ релевантні поля:

1
<table>
2
<tr><td>your-name</td><td>[your-name]</td></tr>
3
<tr><td>your-email</td><td>[your-email]</td></tr>
4
<tr><td>support-type</td><td>[support-type]</td></tr>
5
[technical-support-selected]
6
  <tr><td>operating-system</td><td>[operating-system]</td></tr>
7
  [os-selected]
8
    <tr><td>version</td><td>[version]</td></tr>
9
  [/os-selected]
10
  [os-other-selected]
11
    <tr><td>other-os</td><td>[other-os]</td></tr>
12
    <tr><td>other-version</td><td>[other-version]</td></tr>
13
  [/os-other-selected]
14
[/technical-support-selected]
15
[sales-support-selected]
16
  <tr><td>continent</td><td>[continent]</td></tr>
17
[/sales-support-selected]
18
<tr><td>comments</td><td>[comments]</td></tr>
19
</table>

Коли форма надсилається, плагін виріже з листа все, що стосується прихованих груп. Техпідтримка отримає рядки з ОС і версією, продажі, лише континент. Чисто й без плутанини.

Якщо потрібно збирати листи вручну та виправляти розмітку, автор плагіна зробив вебконвертер коду CF7 у тіло листа. Вставляєте код форми, отримуєте заготовку таблиці для email.

⁉️🤔 Часті запитання

Чому всі групи видно, умови не працюють?

По-перше, перевірте консоль браузера (F12) на помилки JavaScript. Conditional Fields завантажує свій скрипт останнім, і будь-яка помилка JS до нього ламає всю логіку. По-друге, тема повинна викликати wp_footer() у footer.php. Без цього хука скрипт не підключиться. Найчастіше винен конфлікт плагінів: вимкніть усе, крім CF7 і Conditional Fields, і перевірте форму. Запрацювало, вмикайте плагіни по одному, поки не знайдете винуватця.

Поля в email приходять із неправильними або порожніми значеннями.

Імена всіх полів у формі мають бути унікальними, навіть якщо поля знаходяться в різних групах і ніколи не видимі одночасно. Плагін НЕ видаляє приховані поля під час надсилання, а лише ховає їх візуально. Два поля з іменем a в різних групах — це два значення для одного ключа, і переможе одне з них. Переконайтеся, що кожне поле має своє ім’я.

Як зробити форму з кроками та повторюваними полями?

Безплатна версія цього не вміє, потрібен Conditional Fields Pro. Він додає мультистеп (розбивка на кроки з кнопками «Далі»), повторювані блоки полів (repeater) та обчислювані значення (calculated fields). Вартість, на сайті розробника, залежить від кількості сайтів. Якщо форма проста й без повторювачів, безплатної версії вистачає із запасом.

Що робити, якщо плагін конфліктує з темою?

Увімкніть стандартну тему WordPress (Twenty Twenty-Five) і перевірте форму на ній. Працює, проблема в темі. Зазвичай допомагає ручний виклик wp_footer() або перенесення форми на іншу сторінку, де немає важких скриптів теми. Якщо тема кастомна, попросіть розробника переконатися, що хук wp_footer() викликається на всіх сторінках із формами.

Чи можна використовувати умовні поля для калькулятора вартості?

Так, і це один із найчастіших сценаріїв. Набір розкривних списків (тип послуги, обсяг, терміновість) з умовними групами під кожен варіант. Pro-версія додає повноцінні обчислювані поля, якщо потрібно множити й підсумовувати значення прямо у формі,, зверніть увагу на неї.

Що робити далі: від прототипу до бойової форми

Ми зібрали форму підтримки з двома гілками логіки, вкладеними групами та персоналізованим email. Цей самий підхід працює для будь-якого сценарію з умовами: опитувальники з розгалуженням, калькулятори, реєстрації з різними ролями.

На що звернути увагу перед запуском у бій:

• Перевірте унікальність імен УСІХ полів, повторимося — це правило номер один.
• Протестуйте форму на мобільному: довгі списки варіантів і вкладені групи можуть гальмувати на слабких пристроях.
• Налаштуйте захист від спаму, Contact Form 7 товаришує з reCAPTCHA v3, Akismet і Turnstile.

Якщо логіка форми виходить за межі «показати/сховати» і потрібні повторювачі, обчислення або кілька кроків, придивіться до Conditional Fields Pro. А для більшості завдань безплатної версії достатньо: вона стабільна, оновлюється кожні кілька тижнів і працює з Contact Form 7 версії 6.1.6 та WordPress 7.0.

Подивіться відеодемонстрацію всього ланцюжка від встановлення до готової форми — це закріпить кожен крок на живому прикладі: