Как создать динамические поля в WPForms с помощью хуков и PHP

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

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

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

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

Например, с помощью хука wpforms_fields_show_{form_id} можно изменять поля перед отображением формы пользователю, а с помощью wpforms_process_filter — работать с данными после отправки.

Добавление динамического выпадающего списка с данными из базы WordPress

Частая задача — добавить в форму выпадающий список, варианты которого подтягиваются из базы WordPress, например, список категорий или пользователей. Рассмотрим пример, как это сделать через фильтр wpforms_fields_show_{form_id}.

Для начала создайте форму в WPForms с пустым полем Dropdown (Выпадающий список). Запомните ID формы (например, 123) и ID поля (например, 4).

Далее добавьте в файл functions.php вашей темы или в site-specific плагин следующий код:

function wpformsru_dynamic_dropdown_fields( $fields, $form_data ) {
    // Проверяем ID формы
    if ( $form_data['id'] !== 123 ) {
        return $fields;
    }

    // Получаем список категорий
    $categories = get_categories( array('hide_empty' => false) );

    $options = array();
    foreach ( $categories as $category ) {
        $options[] = array(
            'label' => $category->name,
            'value' => $category->term_id,
        );
    }

    // Находим нужное поле по ID
    foreach ( $fields as &$field ) {
        if ( $field['id'] === 4 && $field['type'] === 'select' ) {
            $field['options'] = $options;
        }
    }

    return $fields;
}
add_filter( 'wpforms_fields_show_123', 'wpformsru_dynamic_dropdown_fields', 10, 2 );

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

Пояснения к коду

• Функция проверяет, что обрабатывается именно нужная форма.
• Получаем категории через стандартную функцию get_categories().
• Формируем массив вариантов в формате, понятном для WPForms.
• Заменяем опции нужного поля.

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

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

Например, добавим в форму поле с выбором «Тип обращения», а в зависимости от выбранного типа покажем дополнительное текстовое поле.

Для этого используем JavaScript вместе с PHP-хуками для вывода нужных элементов.

Добавьте в форму два поля: select с ID 5 и текстовое поле с ID 6. Текстовое поле по умолчанию скрываем через CSS в настройках формы.

В functions.php вставьте следующий код для подключения скрипта:

function wpformsru_enqueue_dynamic_script() {
    if ( ! is_page() ) {
        return;
    }
    wp_enqueue_script( 'wpformsru-dynamic-fields', get_stylesheet_directory_uri() . '/js/wpformsru-dynamic-fields.js', array( 'jquery' ), null, true );
}
add_action( 'wp_enqueue_scripts', 'wpformsru_enqueue_dynamic_script' );

Создайте файл wpformsru-dynamic-fields.js в папке js вашей темы с таким содержанием:

jQuery(document).ready(function($) {
    $('#wpforms-123-field_5').on('change', function() {
        var val = $(this).val();
        if ( val === 'special' ) {
            $('#wpforms-123-field_6-container').show();
        } else {
            $('#wpforms-123-field_6-container').hide();
            $('#wpforms-123-field_6').val('');
        }
    });
});

В этом скрипте мы отслеживаем изменение выбора в поле с ID 5 (замените 123 на ваш ID формы). Если пользователь выбирает значение special, показываем текстовое поле с ID 6. В противном случае скрываем его и очищаем значение.

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

Важно не только показывать поля динамически, но и корректно проверять их при отправке формы. Для этого используем хук wpforms_process_validate.

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

function wpformsru_validate_dynamic_fields( $fields, $entry, $form_data ) {
    if ( $form_data['id'] !== 123 ) {
        return;
    }

    $type = isset( $fields[5]['value'] ) ? $fields[5]['value'] : '';
    $text  = isset( $fields[6]['value'] ) ? trim( $fields[6]['value'] ) : '';

    if ( $type === 'special' && empty( $text ) ) {
        wpforms()->process->errors[ $form_data['id'] ][6] = 'Пожалуйста, заполните это поле.';
    }
}
add_action( 'wpforms_process_validate_123', 'wpformsru_validate_dynamic_fields', 10, 3 );

Этот код добавляет ошибку валидации для поля 6, если выбран тип special, а поле пустое. Пользователь увидит сообщение и не сможет отправить форму.

Заключение и полезные советы

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

• Используйте фильтр wpforms_fields_show_{form_id} для изменения полей перед выводом.
• Для динамического показа/скрытия полей используйте JavaScript, подключаемый через wp_enqueue_scripts.
• Обязательно проверяйте динамические поля на серверной стороне через хук wpforms_process_validate_{form_id}.
• Помните про безопасность: фильтруйте и валидируйте данные, не доверяйте только клиентскому коду.

Если хотите расширить функционал своих форм, обратите внимание на плагины из коллекции WPSHOP, которые могут помочь в автоматизации и кастомизации.