WPForms: как создать собственный тип поля с автоматической валидацией в WordPress

Автор: Виктория Ширяева | Опубликовано: 23.03.2026

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

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

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

Добавить уникальный пользовательский интерфейс для поля;
Реализовать специфическую валидацию, недоступную из коробки;
Интегрировать поле с внешними API или базами данных;
Обеспечить лучшую UX для конечных пользователей.

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

Добавление собственного типа поля в WPForms: регистрация и отрисовка

Для начала создадим базовую структуру нового поля. Основная задача — зарегистрировать поле и определить, как оно будет отображаться в редакторе форм и на фронтенде.

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

function wpform_ru_register_custom_field( $fields ) {
    $fields['custom_code'] = array(
        'name'        => esc_html__( 'Код продукта (Custom)', 'wpform-ru' ),
        'type'        => 'text',
        'icon'        => 'fa-barcode',
        'template'    => 'custom_code',
        'label'       => esc_html__( 'Код продукта', 'wpform-ru' ),
        'description' => esc_html__( 'Введите уникальный код продукта.', 'wpform-ru' ),
    );
    return $fields;
}
add_filter( 'wpforms_fields_show', 'wpform_ru_register_custom_field' );

В этом фильтре мы регистрируем новое поле с типом custom_code. Обратите внимание на параметр template — он указывает WPForms, какой шаблон использовать для отрисовки поля.

Теперь нам нужно создать шаблон для этого поля. В папке вашей темы создайте каталог /wpforms/templates/fields/ и внутри создайте файл custom_code.php с таким содержимым:

<input type="text" name="{field_id}" id="{field_id}" class="wpforms-field-large wpforms-field-required" placeholder="Введите код продукта" value="{default_value}" />

WPForms автоматически заменит плейсхолдеры {field_id} и {default_value} на реальные значения.

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

Чтобы поле работало корректно, нужна валидация. Для этого используем хук wpforms_process_validate_{type} для нашего типа поля.

function wpform_ru_validate_custom_code( $field_id, $field_submit, $form_data ) {
    if ( empty( $field_submit ) ) {
        wpforms()->process->errors[ $form_data['id'] ][ $field_id ] = esc_html__( 'Поле обязательно для заполнения.', 'wpform-ru' );
        return;
    }

    // Пример простой проверки: код должен быть длиной от 5 до 10 символов и содержать только буквы и цифры
    if ( ! preg_match( '/^[a-zA-Z0-9]{5,10}$/', $field_submit ) ) {
        wpforms()->process->errors[ $form_data['id'] ][ $field_id ] = esc_html__( 'Код продукта должен содержать от 5 до 10 буквенно-цифровых символов.', 'wpform-ru' );
    }
}
add_action( 'wpforms_process_validate_custom_code', 'wpform_ru_validate_custom_code', 10, 3 );

Этот код проверит поле на пустоту и на соответствие регулярному выражению. При ошибке пользователь увидит понятное сообщение.

Валидация на стороне клиента с помощью JavaScript

Для улучшения UX хорошо, когда пользователь видит ошибки сразу, без перезагрузки страницы. Добавим простую JS-валидацию.

В functions.php подключим скрипт:

function wpform_ru_enqueue_custom_scripts() {
    wp_enqueue_script( 'wpform-ru-custom-validation', get_template_directory_uri() . '/js/wpform-ru-custom-validation.js', array( 'jquery' ), null, true );
}
add_action( 'wpforms_frontend_enqueue_scripts', 'wpform_ru_enqueue_custom_scripts' );

Создайте файл wpform-ru-custom-validation.js в папке js вашей темы:

jQuery(document).ready(function($) {
    $(document).on('input', 'input[name^="custom_code"]', function() {
        var val = $(this).val();
        var errorMsg = '';
        if (val.length < 5 || val.length > 10) {
            errorMsg = 'Код продукта должен содержать от 5 до 10 символов.';
        } else if (!/^[a-zA-Z0-9]+$/.test(val)) {
            errorMsg = 'Допускаются только буквы и цифры.';
        }

        var errorElem = $(this).next('.wpforms-error');
        if (!errorElem.length) {
            errorElem = $('<div class="wpforms-error" style="color: red; font-size: 0.9em;"></div>').insertAfter($(this));
        }

        if (errorMsg) {
            errorElem.text(errorMsg).show();
        } else {
            errorElem.hide();
        }
    });
});

Этот скрипт выводит сообщение об ошибке сразу при вводе, если значение не соответствует требованиям.

Пример использования: интеграция с базой данных для проверки уникальности

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

Для этого в серверной валидации дополним функцию:

function wpform_ru_validate_custom_code_unique( $field_id, $field_submit, $form_data ) {
    global $wpdb;

    // Проверяем формат
    if ( ! preg_match( '/^[a-zA-Z0-9]{5,10}$/', $field_submit ) ) {
        wpforms()->process->errors[ $form_data['id'] ][ $field_id ] = esc_html__( 'Код продукта должен содержать от 5 до 10 буквенно-цифровых символов.', 'wpform-ru' );
        return;
    }

    // Проверяем уникальность в таблице wp_products (пример)
    $exists = $wpdb->get_var( $wpdb->prepare( "SELECT COUNT(*) FROM wp_products WHERE product_code = %s", $field_submit ) );
    if ( $exists ) {
        wpforms()->process->errors[ $form_data['id'] ][ $field_id ] = esc_html__( 'Такой код продукта уже существует.', 'wpform-ru' );
    }
}
add_action( 'wpforms_process_validate_custom_code', 'wpform_ru_validate_custom_code_unique', 20, 3 );

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

Заключение по добавлению собственного типа поля с валидацией

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

Если вы хотите упростить работу с формами, обратите внимание на продукты WPGPT для автоматизации и Clearfy Pro для оптимизации WordPress.