WPForms: как создать уникальный тип поля для форм в WordPress

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

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

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

Создание собственного поля позволяет:

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

Основные шаги создания кастомного поля в WPForms

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

Зарегистрировать новый тип поля и добавить его в список доступных в редакторе форм.
Создать HTML-разметку и стили поля для отображения в форме.
Добавить обработку введенных пользователем данных, включая валидацию.
Обеспечить сохранение и вывод данных в административной части и уведомлениях.

Рассмотрим каждый шаг подробно.

1. Регистрация нового типа поля

Для регистрации нового поля используем фильтр wpforms_field_types. Ниже пример функции, которая добавляет поле с типом custom_text:

function wpform_ru_register_custom_field( $fields ) {
    $fields['custom_text'] = [
        'name'        => esc_html__( 'Custom Text', 'wpforms' ),
        'template'    => 'custom_text',
        'icon'        => 'wpforms-icon-text',
        'order'       => 100,
    ];
    return $fields;
}
add_filter( 'wpforms_field_types', 'wpform_ru_register_custom_field' );

Параметр template указывает, какой файл шаблона использовать для рендера поля.

2. Добавление шаблона поля

WPForms рендерит поля через шаблоны. Нужно создать файл шаблона custom_text.php в папке темы или плагина и описать HTML поля. Пример простого текстового поля с кастомным классом:

<input type="text" name="{field_name}" id="{field_id}" class="wpforms-field-custom-text" value="{field_value}" placeholder="{field_placeholder}" />

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

3. Добавление валидации и обработки данных

Для проверки введенных значений используется фильтр wpforms_process_validate_{field_type}. В нашем случае это будет wpforms_process_validate_custom_text:

function wpform_ru_validate_custom_text( $field_id, $field_submit, $form_data ) {
    if ( empty( $field_submit ) || strlen( $field_submit ) < 5 ) {
        wpforms()->process->errors[ $form_data['id'] ][ $field_id ] = esc_html__( 'Введите не менее 5 символов.', 'wpforms' );
    }
}
add_action( 'wpforms_process_validate_custom_text', 'wpform_ru_validate_custom_text', 10, 3 );

Так мы запретим отправлять форму, если в поле меньше 5 символов.

4. Сохранение и вывод данных

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

Если нужно добавить отображение в уведомлениях, стоит добавить фильтр на wpforms_email_fields и обработать кастомное поле, например:

function wpform_ru_email_custom_text( $fields, $entry, $form_data ) {
    foreach ( $fields as &$field ) {
        if ( $field['type'] === 'custom_text' ) {
            $field['value'] = strtoupper( $field['value'] ); // Пример обработки
        }
    }
    return $fields;
}
add_filter( 'wpforms_email_fields', 'wpform_ru_email_custom_text', 10, 3 );

Пример: создание поля выбора цвета с предпросмотром

Рассмотрим более сложный пример — поле выбора цвета с визуальным предпросмотром. Это полезно, если в форме нужно выбрать цвет для логотипа, темы, или другого элемента.

Регистрация поля color_picker

function wpform_ru_register_color_picker_field( $fields ) {
    $fields['color_picker'] = [
        'name'        => esc_html__( 'Color Picker', 'wpforms' ),
        'template'    => 'color_picker',
        'icon'        => 'wpforms-icon-paint-brush',
        'order'       => 101,
    ];
    return $fields;
}
add_filter( 'wpforms_field_types', 'wpform_ru_register_color_picker_field' );

Создание шаблона color_picker.php

<input type="color" name="{field_name}" id="{field_id}" value="{field_value}" class="wpforms-field-color-picker" />
<div id="{field_id}_preview" class="color-preview" style="width:30px; height:30px; border:1px solid #ccc; display:inline-block; vertical-align: middle; margin-left: 10px;"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var input = document.getElementById('{field_id}');
    var preview = document.getElementById('{field_id}_preview');
    preview.style.backgroundColor = input.value;
    input.addEventListener('input', function() {
        preview.style.backgroundColor = input.value;
    });
});
</script>

Валидация цвета

function wpform_ru_validate_color_picker( $field_id, $field_submit, $form_data ) {
    if ( ! preg_match( '/^#[0-9a-fA-F]{6}$/', $field_submit ) ) {
        wpforms()->process->errors[ $form_data['id'] ][ $field_id ] = esc_html__( 'Введите корректный цвет в формате HEX.', 'wpforms' );
    }
}
add_action( 'wpforms_process_validate_color_picker', 'wpform_ru_validate_color_picker', 10, 3 );

Отладка и распространенные ошибки

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

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

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

Заключение

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