WPForms динамические поля с построением зависимых списков в WordPress

Что такое динамические зависимые списки в WPForms и зачем они нужны

В ряде случаев при создании форм с помощью WPForms возникает необходимость сделать поля формы зависимыми друг от друга. Например, при выборе категории товара в первом выпадающем списке второй список должен автоматически подстраиваться и показывать только те подкатегории, которые относятся к выбранной категории. Это называется построением зависимых выпадающих списков или динамических полей.

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

Такое решение поможет сделать формы более удобными и логичными, уменьшит ошибки при заполнении и улучшит пользовательский опыт.

Подготовка формы WPForms с полями для зависимых списков

Для примера создадим форму с двумя выпадающими списками:

Категории — первый список с фиксированными значениями;
Подкатегории — второй список, значения которого меняются в зависимости от выбранной категории.

В конструкторе WPForms добавьте два поля «Выпадающий список» (Dropdown). Для первого поля укажите варианты, например:

Техника
Одежда
Книги

Для второго поля заполните произвольными значениями (они будут заменяться динамически через JavaScript), например:

Выберите категорию выше

Важно: Задайте уникальные CSS классы или ID для обоих полей, чтобы можно было легко их идентифицировать в коде. Для этого в настройках поля в разделе «Дополнительные опции» введите класс, например:

Для категории: wpform-cat-select
Для подкатегории: wpform-subcat-select

Это понадобится для подключения скриптов и управления списками.

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

Основной механизм — слушать событие изменения значения в первом dropdown и на основе выбранного значения обновлять второй список подкатегорий.

Примерный код JavaScript, который можно добавить в файл темы или подключить через wp_enqueue_script:

document.addEventListener('DOMContentLoaded', function() {
  const catSelect = document.querySelector('.wpform-cat-select select');
  const subcatSelect = document.querySelector('.wpform-subcat-select select');

  if (!catSelect || !subcatSelect) return;

  const optionsMap = {
    'Техника': ['Ноутбуки', 'Смартфоны', 'Телевизоры'],
    'Одежда': ['Футболки', 'Джинсы', 'Куртки'],
    'Книги': ['Фантастика', 'Научная литература', 'Биографии']
  };

  function wpform_updateSubcat() {
    const selectedCat = catSelect.value;
    const subcats = optionsMap[selectedCat] || [];

    // Очистка текущих опций
    subcatSelect.innerHTML = '';

    if (subcats.length === 0) {
      const option = document.createElement('option');
      option.text = 'Выберите категорию выше';
      option.value = '';
      subcatSelect.add(option);
      return;
    }

    // Добавление новых опций
    subcats.forEach(function(subcat) {
      const option = document.createElement('option');
      option.text = subcat;
      option.value = subcat.toLowerCase();
      subcatSelect.add(option);
    });
  }

  catSelect.addEventListener('change', wpform_updateSubcat);
  wpform_updateSubcat(); // инициализация при загрузке
});

Этот скрипт получает элементы select по классам, определённым в форме, и при изменении категории обновляет список подкатегорий. Если категория не выбрана, выводится подсказка.

Как подключить JavaScript в WordPress корректно

Чтобы добавить этот код на сайт, лучше создать отдельный JS-файл и подключить его через функцию в functions.php темы или плагина:

function wpform_enqueue_dynamic_select_script() {
  if (is_page('forma-s-zavisimymi-spiskami')) { // замените на ID или условие для нужной страницы
    wp_enqueue_script('wpform-dynamic-select', get_stylesheet_directory_uri() . '/js/wpform-dynamic-select.js', array('jquery'), '1.0', true);
  }
}
add_action('wp_enqueue_scripts', 'wpform_enqueue_dynamic_select_script');

Этот подход гарантирует, что скрипт загрузится только там, где есть нужная форма, и не будет лишней нагрузки.

Расширение — получение списков из базы WordPress через AJAX

Если списки категорий и подкатегорий динамические и хранятся в базе, можно сделать полноценный AJAX-запрос к серверу для получения подкатегорий.

Пример PHP-функции в functions.php, которая возвращает подкатегории по категории:

function wpform_get_subcategories_ajax() {
  $category = sanitize_text_field($_POST['category'] ?? '');
  $response = [];

  if (!$category) {
    wp_send_json_error('Категория не указана');
  }

  // Пример: получаем записи из пользовательской таблицы или таксономии
  // Здесь просто имитация данных
  $data = [
    'техника' => ['ноутбуки', 'смартфоны', 'телевизоры'],
    'одежда' => ['футболки', 'джинсы', 'куртки'],
    'книги' => ['фантастика', 'научная литература', 'биографии']
  ];

  $key = mb_strtolower($category);
  if (isset($data[$key])) {
    $response = $data[$key];
    wp_send_json_success($response);
  } else {
    wp_send_json_error('Подкатегории не найдены');
  }
}
add_action('wp_ajax_wpform_get_subcategories', 'wpform_get_subcategories_ajax');
add_action('wp_ajax_nopriv_wpform_get_subcategories', 'wpform_get_subcategories_ajax');

Клиентский JS для вызова AJAX:

jQuery(document).ready(function($) {
  const catSelect = $('.wpform-cat-select select');
  const subcatSelect = $('.wpform-subcat-select select');

  function wpform_updateSubcatAjax() {
    const selectedCat = catSelect.val();
    subcatSelect.html('<option>Загрузка...</option>');

    $.post(wpform_ajax_object.ajax_url, {
      action: 'wpform_get_subcategories',
      category: selectedCat
    }, function(response) {
      subcatSelect.empty();
      if (response.success) {
        response.data.forEach(function(subcat) {
          subcatSelect.append($('<option></option>').val(subcat).text(subcat));
        });
      } else {
        subcatSelect.append($('<option></option>').val('').text('Подкатегории не найдены'));
      }
    });
  }

  catSelect.on('change', wpform_updateSubcatAjax);
  wpform_updateSubcatAjax();
});

И не забудьте в functions.php локализовать скрипт, чтобы передать ajax_url:

function wpform_localize_script() {
  wp_localize_script('wpform-dynamic-select', 'wpform_ajax_object', array(
    'ajax_url' => admin_url('admin-ajax.php')
  ));
}
add_action('wp_enqueue_scripts', 'wpform_localize_script');

Заключение по построению динамических зависимых списков в WPForms

Создание динамических зависимых полей в WPForms — задача вполне решаемая с помощью кастомного JavaScript и при необходимости AJAX-запросов к серверу. Это позволяет значительно расширить функциональность форм, сделать их более интерактивными и удобными для пользователей.

Главное — правильно идентифицировать поля, подключить скрипт корректно и грамотно обрабатывать данные на сервере для безопасности.

Данный пример можно адаптировать под любые типы зависимостей и более сложные сценарии, например, с несколькими уровнями вложенности или с динамическим получением данных из базы WordPress.