Как создавать поля выбора в зависимости от введённых данных

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

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

Если в форме есть поле выбора (select), которое должно зависеть от другого поля, например, сначала пользователь выбирает категорию, а потом — подкатегорию, то статический список не подходит. Нужно подгружать варианты подкатегорий динамически, чтобы не захламлять форму и не запутывать пользователя.

WPForms не поддерживает такую логику из коробки, но благодаря хукам и API JavaScript это можно легко реализовать. Это улучшит UX, уменьшит количество ошибок и повысит конверсию форм.

Общая схема реализации динамических выборов в WPForms

Основная идея — слушать изменения в первом поле, отправлять AJAX-запрос на сервер с выбранным значением и получать список опций для второго поля. После этого обновлять поле выбора на клиенте без перезагрузки страницы.

Для этого понадобится:

• Добавить обработчик JavaScript, который реагирует на изменение поля.
• Создать AJAX-обработчик на стороне WordPress, который вернёт нужные варианты.
• Обновить поле выбора на странице динамически.

Шаг 1. Добавляем JavaScript для отслеживания изменения поля

Предположим, у нас есть форма с двумя полями: category и subcategory. В WPForms вы можете написать кастомный скрипт, который будет слушать выбор категории и обновлять подкатегории.

document.addEventListener('DOMContentLoaded', function() {
  const categoryField = document.querySelector('select[name="wpforms[fields][category]"]');
  const subcategoryField = document.querySelector('select[name="wpforms[fields][subcategory]"]');

  if (!categoryField || !subcategoryField) return;

  categoryField.addEventListener('change', function() {
    const selectedCategory = this.value;
    // Очистим подкатегории
    subcategoryField.innerHTML = '<option value="">Загрузка...</option>';

    // AJAX-запрос на сервер
    fetch(wpforms_dynamic_select.ajax_url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams({
        action: 'wpforms_dynamic_select_get_subcategories',
        category: selectedCategory,
        security: wpforms_dynamic_select.nonce
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        subcategoryField.innerHTML = '';
        data.data.forEach(option => {
          const opt = document.createElement('option');
          opt.value = option.value;
          opt.textContent = option.label;
          subcategoryField.appendChild(opt);
        });
      } else {
        subcategoryField.innerHTML = '<option value="">Нет данных</option>';
      }
    })
    .catch(() => {
      subcategoryField.innerHTML = '<option value="">Ошибка загрузки</option>';
    });
  });
});

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

Шаг 2. Создаём PHP-обработчик AJAX-запроса

Теперь напишем PHP-функцию, которая будет принимать параметр категории и возвращать массив подкатегорий. Для безопасности используем nonce.

add_action('wp_ajax_wpforms_dynamic_select_get_subcategories', 'wpforms_dynamic_select_get_subcategories');
add_action('wp_ajax_nopriv_wpforms_dynamic_select_get_subcategories', 'wpforms_dynamic_select_get_subcategories');

function wpforms_dynamic_select_get_subcategories() {
  check_ajax_referer('wpforms_dynamic_select_nonce', 'security');

  $category = sanitize_text_field($_POST['category'] ?? '');

  // Пример данных - в реальности можно брать из БД или API
  $data = [
    'fruit' => [
      ['value' => 'apple', 'label' => 'Яблоко'],
      ['value' => 'banana', 'label' => 'Банан'],
      ['value' => 'orange', 'label' => 'Апельсин'],
    ],
    'vehicle' => [
      ['value' => 'car', 'label' => 'Машина'],
      ['value' => 'bike', 'label' => 'Велосипед'],
      ['value' => 'plane', 'label' => 'Самолёт'],
    ],
  ];

  if (!isset($data[$category])) {
    wp_send_json_error('Категория не найдена');
  }

  wp_send_json_success($data[$category]);
}

Эту функцию нужно разместить в файле functions.php вашей темы или в отдельном плагине.

Шаг 3. Подключаем скрипт и передаём переменные из PHP в JS

Важно подключить скрипт и передать в него URL для AJAX и nonce для безопасности.

add_action('wp_enqueue_scripts', 'wpforms_dynamic_select_enqueue_scripts');
function wpforms_dynamic_select_enqueue_scripts() {
  wp_enqueue_script('wpforms-dynamic-select', get_template_directory_uri() . '/js/wpforms-dynamic-select.js', ['jquery'], null, true);

  wp_localize_script('wpforms-dynamic-select', 'wpforms_dynamic_select', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wpforms_dynamic_select_nonce'),
  ]);
}

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

Обработка ошибок и fallback

Всегда обрабатывайте ситуации, когда данные не пришли, сервер недоступен или пользователь выбрал пустой вариант. Можно показывать сообщение «Данные не найдены» или отключать поле выбора.

Использование кастомных полей и атрибутов WPForms

Для удобства можно назначить полям уникальные CSS-классы или атрибуты, чтобы проще находить их в JS и настраивать логику. Это особенно полезно при больших формах с похожими полями.

Интеграция с плагинами из WPSHOP

Если вы используете на сайте плагин My Popup, то динамические поля можно показывать внутри всплывающих окон, делая форму ещё более интерактивной и удобной.

Итоги и пример на сайте

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

Для примера вы можете скачать готовый скрипт и PHP-код в нашем репозитории на wpshop.ru.