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

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

Зачем нужны подключаемые поля в WPForms

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

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

Основные хуки для создания пользовательских полей в WPForms

WPForms предоставляет несколько ключевых фильтров и экшенов, с помощью которых можно добавить свои поля и управлять их поведением:

• wpforms_field_types — регистрирует новый тип поля;
• wpforms_fields_render — отвечает за вывод HTML поля;
• wpforms_process_validate_{field_type} — валидация поля при отправке формы;
• wpforms_process_{field_type} — обработка данных поля после отправки;
• wpforms_builder_field_settings_{field_type} — настройки поля в конструкторе.

Рассмотрим, как использовать некоторые из них на практике.

Пример: создание подключаемого поля «Телефон с маской»

Предположим, нам нужно добавить в WPForms поле с маской ввода для телефона, которое не только красиво отображается, но и валидируется по нужному формату.

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

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

add_filter('wpforms_field_types', 'wpformru_register_phone_mask_field');
function wpformru_register_phone_mask_field($fields) {
    $fields['phone_mask'] = [
        'name' => __('Телефон с маской', 'wpformru'),
        'icon' => 'fa-phone',
        'templates' => [
            'field' => 'phone-mask-field',
            'settings' => 'phone-mask-settings',
        ],
    ];
    return $fields;
}

Здесь мы добавили новый тип поля с идентификатором phone_mask.

2. Вывод HTML поля с маской

Используем фильтр wpforms_fields_render, чтобы вывести кастомный html и подключить JavaScript-маску:

add_filter('wpforms_fields_render', 'wpformru_render_phone_mask_field', 10, 2);
function wpformru_render_phone_mask_field($field_output, $field) {
    if ($field['type'] === 'phone_mask') {
        $field_id = esc_attr($field['id']);
        $field_name = esc_attr($field['name']);
        $value = esc_attr($field['value'] ?? '');

        $html = '<input type="text" id="wpforms-phone-mask-'. $field_id .'" name="'. $field_name .'" value="'. $value .'" placeholder="+7 (___) ___-__-__" class="wpforms-phone-mask" />';

        $html .= '<script>
        jQuery(document).ready(function($) {
            $("#wpforms-phone-mask-'. $field_id .'").mask("+7 (999) 999-99-99");
        });
        </script>';

        return $html;
    }
    return $field_output;
}

Обратите внимание, что для работы маски нужно подключить jQuery Mask Plugin. Если он не подключен, добавьте его, например, через wp_enqueue_script.

3. Валидация поля с маской

Добавим проверку правильности номера при отправке формы:

add_action('wpforms_process_validate_phone_mask', 'wpformru_validate_phone_mask_field', 10, 3);
function wpformru_validate_phone_mask_field($field_id, $field_submit, $form_data) {
    $phone = trim($field_submit);
    // Простая проверка по длине и формату
    if (!preg_match('/^\+7 \(\d{3}\) \d{3}-\d{2}-\d{2}$/', $phone)) {
        wpforms()->process->errors[$form_data['id']][$field_id] = __('Введите телефон в формате +7 (999) 999-99-99', 'wpformru');
    }
}

4. Обработка и сохранение данных

Если нужно дополнительно обрабатывать данные, можно использовать хук wpforms_process_phone_mask:

add_action('wpforms_process_phone_mask', 'wpformru_process_phone_mask_field', 10, 3);
function wpformru_process_phone_mask_field($field_id, $field_submit, $form_data) {
    // Пример: сохраняем номер без форматирования
    $clean_phone = preg_replace('/\D+/', '', $field_submit);
    // Можно сохранить в метаданные или отправить в CRM
}

Настройка поля в конструкторе WPForms

Чтобы поле было удобно использовать в админке, можно добавить его настройки в конструктор, используя фильтр wpforms_builder_field_settings_phone_mask. Это позволит задать, например, метку, обязательность, placeholder.

Дополнительные рекомендации и плагины для расширения форм WPForms

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

• Clearfy Pro — оптимизация и расширение возможностей WordPress;
• WPRemark — отзывы и комментарии с расширенными возможностями;
• WPCommunity — создание социальных сообществ на базе WordPress.

Итог

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