WPForms: создание динамических зависимых полей с помощью JavaScript и PHP

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

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

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

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

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

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

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

Основная идея заключается в следующем:

При загрузке формы первое поле содержит базовый набор значений (например, список регионов).
При выборе значения в первом поле срабатывает обработчик JavaScript, который делает AJAX-запрос к серверу.
Сервер (на PHP) обрабатывает запрос, возвращает актуальный список опций для второго поля (например, список городов выбранного региона).
JavaScript получает ответ и обновляет второй элемент формы динамически, без перезагрузки.

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

Пример: зависимые выпадающие списки регион и город в WPForms

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

В WPForms создайте форму с двумя полями «Регион» и «Город». В «Регион» добавьте несколько вариантов (например, Москва, Санкт-Петербург, Новосибирск). В «Город» пока можно оставить пустым или заполнить заглушкой.

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

document.addEventListener('DOMContentLoaded', function() {
  const regionSelect = document.querySelector('select[name="wpforms[fields][REGION_FIELD_ID]"]');
  const citySelect = document.querySelector('select[name="wpforms[fields][CITY_FIELD_ID]"]');

  regionSelect.addEventListener('change', function() {
    const region = regionSelect.value;
    fetch('/wp-admin/admin-ajax.php?action=wpforms_ru_get_cities&region=' + encodeURIComponent(region))
      .then(response => response.json())
      .then(data => {
        citySelect.innerHTML = '';
        data.cities.forEach(function(city) {
          const option = document.createElement('option');
          option.value = city;
          option.textContent = city;
          citySelect.appendChild(option);
        });
      });
  });
});

Замените REGION_FIELD_ID и CITY_FIELD_ID на реальные ID ваших полей из WPForms.

3. Регистрируем AJAX-обработчик в functions.php

add_action('wp_ajax_wpforms_ru_get_cities', 'wpforms_ru_get_cities_callback');
add_action('wp_ajax_nopriv_wpforms_ru_get_cities', 'wpforms_ru_get_cities_callback');

function wpforms_ru_get_cities_callback() {
    $region = sanitize_text_field($_GET['region'] ?? '');
    $cities = [];

    // Пример данных, обычно возьмем из БД или API
    $data = [
        'Москва' => ['Москва', 'Зеленоград', 'Троицк'],
        'Санкт-Петербург' => ['Санкт-Петербург', 'Пушкин', 'Колпино'],
        'Новосибирск' => ['Новосибирск', 'Бердск', 'Обь']
    ];

    if (isset($data[$region])) {
        $cities = $data[$region];
    }

    wp_send_json(['cities' => $cities]);
    wp_die();
}

Этот код возвращает JSON с массивом городов для выбранного региона.

Как улучшить и расширить функционал зависимых полей в WPForms

1. Динамическая загрузка с сервера: если данных много, лучше делать AJAX-запросы к внешним API или собственной базе, а не хранить весь список в JS.

2. Кэширование ответов: чтобы снизить нагрузку, можно кешировать результаты на сервере или использовать transient в WordPress.

3. Использование хуков WPForms: для более глубокой интеграции можно применять фильтры и экшены WPForms, например, для модификации полей перед рендером.

4. Обработка ошибок и UX: добавьте индикатор загрузки, обработку ошибок AJAX и сообщения пользователю.

Подключение кастомного JavaScript и PHP к WPForms на практике

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

function wpforms_ru_enqueue_scripts() {
    if (is_page('contact')) { // или другая проверка нужной страницы
        wp_enqueue_script('wpforms-ru-dependent-fields', get_stylesheet_directory_uri() . '/js/wpforms-dependent-fields.js', ['jquery'], '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'wpforms_ru_enqueue_scripts');

Где wpforms-dependent-fields.js содержит JavaScript из примера выше.

PHP-обработчик AJAX должен быть зарегистрирован в functions.php и реализован, как показано выше.

Использование плагинов для упрощения создания зависимых полей

Хотя мы показали, как сделать зависимые поля вручную, существуют плагины, которые могут облегчить задачу:

Clearfy Pro — оптимизирует работу WordPress и имеет возможности для расширения форм.
Плагин WPForms Conditional Fields (если установлен) позволяет создавать условные поля, но для сложных зависимостей может быть недостаточно.

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

Заключение

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

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

Создание динамических зависимых полей с помощью JavaScript и PHP