WPForms: динамические поля в зависимости от выбора пользователя

Автор: Константин Крылов | Опубликовано: 17.02.2026

WPForms – один из самых популярных плагинов для создания форм в WordPress, который позволяет гибко настраивать формы без глубоких знаний программирования. Однако часто возникает задача сделать форму интерактивной, чтобы одни поля появлялись или изменялись в зависимости от выбора пользователя в других полях. В этой статье мы подробно разберём, как реализовать динамическое отображение и изменение полей в WPForms, используя JavaScript и PHP, с примерами кода и описанием.

Почему важны динамические поля в формах WPForms

Динамические поля повышают удобство пользователя, снижая количество ненужных данных и ускоряя заполнение формы. Например, если в форме есть поле «Тип услуги», то в зависимости от выбранного варианта можно показать дополнительные настройки или уточняющие поля. Это улучшает UX и помогает собрать более точную информацию.

В стандартном функционале WPForms нет встроенного конструктора условного отображения полей, кроме базового логического показа с Pro-версией, но с помощью кастомного кода и JavaScript можно реализовать гораздо более гибкие сценарии.

Создание формы с базовыми полями в WPForms

Для начала создадим простую форму с несколькими полями:

Выпадающий список (select) с выбором услуги;
Текстовое поле, которое будет показываться или скрываться в зависимости от выбора;
Поле комментариев.

Добавьте стандартные поля через интерфейс WPForms, и запомните ID формы и ID полей (их можно увидеть в HTML разметке страницы с формой).

Пример HTML-структуры (упрощённо)

<select id="wpforms-123-field_1" name="wpforms[fields][1]">
  <option value="">Выберите услугу</option>
  <option value="service1">Услуга 1</option>
  <option value="service2">Услуга 2</option>
</select>

<div id="wpforms-123-field_2-container" style="display:none;">
  <label for="wpforms-123-field_2">Дополнительная информация</label>
  <input type="text" id="wpforms-123-field_2" name="wpforms[fields][2]" />
</div>

Реализация динамического показа поля через JavaScript

Чтобы скрывать или показывать поле «Дополнительная информация» в зависимости от выбора услуги, добавим кастомный JS-код в шаблон темы или через плагин для пользовательских скриптов.

Пример кода JavaScript для WPForms

document.addEventListener('DOMContentLoaded', function() {
  const serviceSelect = document.querySelector('#wpforms-123-field_1');
  const extraField = document.querySelector('#wpforms-123-field_2-container');

  if (!serviceSelect || !extraField) return;

  serviceSelect.addEventListener('change', function() {
    if (this.value === 'service2') {
      extraField.style.display = 'block';
    } else {
      extraField.style.display = 'none';
      document.querySelector('#wpforms-123-field_2').value = '';
    }
  });

  // Инициализация при загрузке страницы
  if (serviceSelect.value === 'service2') {
    extraField.style.display = 'block';
  }
});

Этот скрипт отслеживает выбор пользователя и показывает поле только если выбрана «Услуга 2».

Динамические поля с помощью PHP: предзаполнение и изменение параметров

Иногда необходимо не только показать или скрыть поля, но и менять их значения или атрибуты до рендера формы. Для этого используем фильтры WPForms.

Фильтр для динамического изменения меток и значений полей

add_filter('wpforms_fields_show', 'wpformsru_dynamic_fields_labels', 10, 3);
function wpformsru_dynamic_fields_labels($fields, $form_data, $form_id) {
  if ($form_id !== 123) return $fields; // ID вашей формы

  foreach ($fields as &$field) {
    if ($field['id'] === 2) { // ID поля
      $field['label'] = 'Введите дополнительную информацию для выбранной услуги';
      $field['placeholder'] = 'Например, детали заказа';
    }
  }
  return $fields;
}

Этот код изменит метку и подсказку поля перед выводом формы, что повышает юзабилити при динамических формах.

Подключение WPForms к внешним сервисам с динамическими данными

В некоторых проектах есть необходимость отправлять данные из динамических полей в CRM, Google Sheets или другие сервисы. WPForms позволяет это делать через хуки и вебхуки.

Пример отправки данных из динамического поля через webhook

add_action('wpforms_process_complete', 'wpformsru_send_dynamic_data_webhook', 10, 4);
function wpformsru_send_dynamic_data_webhook($fields, $entry, $form_data, $entry_id) {
  if ($form_data['id'] !== 123) return;

  $extra_info = '';
  foreach ($fields as $field) {
    if ($field['id'] === 2) {
      $extra_info = sanitize_text_field($field['value']);
      break;
    }
  }

  $webhook_url = 'https://example.com/api/receive';
  $response = wp_remote_post($webhook_url, [
    'body' => json_encode(['extra_info' => $extra_info]),
    'headers' => ['Content-Type' => 'application/json'],
  ]);
}

Этот код отправляет значение дополнительного поля на внешний сервер после отправки формы.

Практические советы и рекомендации для динамических полей в WPForms

Всегда проверяйте ID формы и полей в HTML, чтобы точно указать их в коде.
Используйте document.addEventListener('DOMContentLoaded', ...) для загрузки JS после полной загрузки DOM.
Для сложной логики показа можно использовать сторонние библиотеки JavaScript, но не забывайте о производительности.
Тестируйте формы на разных устройствах и браузерах, чтобы избежать проблем с отображением.
Если используете WPForms Pro, изучите встроенную условную логику, она может упростить задачи без кода.

Заключение

Динамические поля в WPForms позволяют сделать формы гораздо более удобными и адаптивными под нужды пользователей. Комбинируя JavaScript для интерактивности и PHP для серверной логики и предзаполнения, вы сможете создавать сложные формы с индивидуальным поведением. Используйте приведённые в статье примеры кода как отправную точку для своих проектов.

Если вы хотите расширить функционал WPForms без сложного программирования, обратите внимание на плагины и инструменты от WPGPT и Clearfy Pro, которые помогают автоматизировать многие задачи.

Динамические поля в зависимости от выбора пользователя