Нужна форма обратной связи, которая подстраивается под выбор пользователя: техподдержка, покажи одни поля, отдел продаж, совсем другие. Стандартный 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.

Посмотрите видео-демонстрацию всей цепочки от установки до готовой формы, это закрепит каждый шаг на живом примере: