Как расширить возможности поля выбора с помощью каскадных списков

Диагностика проблемы: почему стандартное поле выбора в WPForms не всегда подходит

Стандартные поля выбора в WPForms отлично справляются с простыми списками опций. Однако, когда требуется реализовать каскадный выбор — например, сначала выбрать категорию, а в зависимости от неё подкатегорию — стандартный функционал ограничен. Без кастомизации невозможно динамически менять набор опций второго списка на основе выбора в первом.

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

Пошаговое решение: создание каскадного выбора в WPForms с помощью JavaScript и хуков

1. Создайте форму с двумя полями выбора

В редакторе WPForms добавьте два поля Dropdown (выпадающий список). Назовите первое, например, category, второе — subcategory. Заполните первое поле основными категориями, а второе — пустым или с заглушкой.

2. Добавьте кастомный JavaScript для динамического обновления подкатегорий

Вставьте следующий код в файл темы functions.php или через плагин для добавления пользовательских скриптов (например, Insert Headers and Footers):

add_action('wp_footer', 'wpforms_cascade_dropdown_script');
function wpforms_cascade_dropdown_script() {
    if (!is_page()) return; // Ограничьте добавление скрипта на нужных страницах
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const categoryField = document.querySelector('select[name="wpforms[fields][1]"]');
        const subcategoryField = document.querySelector('select[name="wpforms[fields][2]"]');

        if (!categoryField || !subcategoryField) return;

        // Объект с данными подкатегорий
        const subcategories = {
            'Фрукты': ['Яблоко', 'Банан', 'Апельсин'],
            'Овощи': ['Морковь', 'Картофель', 'Томаты'],
            'Напитки': ['Вода', 'Сок', 'Чай']
        };

        function updateSubcategories() {
            const selectedCategory = categoryField.value;
            const options = subcategories[selectedCategory] || [];

            // Очистить текущие опции
            subcategoryField.innerHTML = '';

            if (options.length === 0) {
                const option = document.createElement('option');
                option.text = 'Выберите сначала категорию';
                option.value = '';
                subcategoryField.add(option);
                subcategoryField.disabled = true;
            } else {
                subcategoryField.disabled = false;
                options.forEach(function(subcat) {
                    const option = document.createElement('option');
                    option.text = subcat;
                    option.value = subcat;
                    subcategoryField.add(option);
                });
            }
        }

        // Обновить подкатегории при загрузке и при изменении
        updateSubcategories();
        categoryField.addEventListener('change', updateSubcategories);
    });
    </script>
    <?php
}

3. Настройте обработку данных на сервере (по необходимости)

Если вы хотите использовать выбранные значения в уведомлениях или сохранять в базе, убедитесь, что поля имеют правильные ID и имена. В WPForms поля с выбором доступны в обработчиках как $_POST['wpforms']['fields'][ID].

Проверка результата после внедрения

• Откройте страницу с формой.
• Выберите категорию в первом списке.
• Во втором списке должны появиться соответствующие опции, которые меняются при выборе другой категории.
• Если подкатегории не появляются или поле отключено — проверьте консоль браузера на ошибки.

Частые ошибки и как их исправить

• Неправильные селекторы в JavaScript: Убедитесь, что select[name="wpforms[fields][1]"] и select[name="wpforms[fields][2]"] соответствуют ID ваших полей в форме. Можно посмотреть исходный код страницы для проверки.
• Скрипт не загружается на странице: Проверьте условия в wpforms_cascade_dropdown_script(). Возможно, стоит убрать или изменить is_page() на конкретные ID страниц.
• Подкатегории не обновляются: Проверьте, что объект с подкатегориями заполнен корректно и совпадает с опциями первого списка.

Практические советы по безопасности и производительности

• Для улучшения производительности ограничьте загрузку JS только на страницах, где есть нужная форма.
• Если список категорий большой, рассмотрите загрузку подкатегорий через AJAX, чтобы не перегружать страницу.
• Обязательно проверяйте и фильтруйте входящие данные при обработке формы на сервере, чтобы избежать инъекций и XSS.

Сравнение подходов реализации каскадных списков в WPForms

Метод	Описание	Плюсы	Минусы
JavaScript + хуки WPForms	Динамическое обновление опций на клиенте с помощью JS	Быстро, просто, без плагинов, полная кастомизация	Не подходит для очень больших списков, требует JS
Многоэтапная форма WPForms	Разделение выбора по шагам	Встроенный функционал, прост в настройке	Менее удобен для пользователя, больше кликов
Плагины каскадных списков	Использование сторонних плагинов для зависимых полей	Готовое решение, поддержка	Часто платные, возможны конфликты с WPForms