Как добавить пользовательские поля в WPForms через функции

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

Почему стоит использовать пользовательские поля в WPForms

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

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

Создание пользовательского поля: подходы и примеры

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

Вот пример функции, которая добавляет новое поле с типом custom_text:

function wpformsru_register_custom_field( $fields ) {
    $fields['custom_text'] = [
        'name'  => esc_html__( 'Custom Text', 'wpformsru' ),
        'icon'  => 'fa fa-pencil-alt',
        'order' => 50,
        'template' => 'custom_text',
    ];
    return $fields;
}
add_filter( 'wpforms_field_types', 'wpformsru_register_custom_field' );

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

Создание шаблона поля

WPForms позволяет описывать шаблоны для полей в виде PHP-шаблонов. Создайте файл custom-text.php в папке вашей темы (или дочерней темы) в директории /wpforms/templates/fields/. Если такой папки нет, создайте её.

Пример шаблона:

<input type="text" name="{{ name }}" id="{{ id }}" class="wpforms-field-custom-text wpforms-field-large" value="{{ value }}" placeholder="Введите текст" />

Этот шаблон рендерит обычное текстовое поле с кастомным классом. Вы можете расширять HTML, добавлять атрибуты и стили по необходимости.

Обработка и валидация пользовательского поля

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

Валидация поля

Добавим функцию, которая проверит, что поле не пустое:

function wpformsru_validate_custom_text( $field_id, $field_submit, $form_data ) {
    if ( isset( $field_submit['custom_text'] ) && empty( trim( $field_submit['custom_text'] ) ) ) {
        wpforms()->process->errors[ $form_data['id'] ][ $field_id ] = esc_html__( 'Пожалуйста, заполните поле.', 'wpformsru' );
    }
}
add_action( 'wpforms_process_validate', 'wpformsru_validate_custom_text', 10, 3 );

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

Сохранение и использование данных

Данные из пользовательского поля сохраняются вместе с остальными значениями формы. Чтобы получить и обработать их, можно использовать хук wpforms_process_complete:

function wpformsru_save_custom_text_data( $fields, $entry, $form_data ) {
    if ( isset( $fields['custom_text'] ) ) {
        $custom_text_value = sanitize_text_field( $fields['custom_text']['value'] );
        // Например, записать в мета-запись пользователя или отправить по почте
    }
}
add_action( 'wpforms_process_complete', 'wpformsru_save_custom_text_data', 10, 3 );

Таким образом можно использовать введённые данные для дальнейших действий — интеграция с CRM, отправка уведомлений, сохранение в базу.

Практические советы по кастомизации WPForms

Кроме добавления своих полей, рекомендуем обратить внимание на такие вещи:

• Кастомные стили и скрипты. Для улучшения UX добавляйте свои CSS и JS, подключая их через wp_enqueue_scripts с проверкой, что вы на странице с формой.
• Использование условной логики. WPForms поддерживает условное отображение полей, но при создании своих полей нужно заботиться, чтобы они корректно реагировали на условия.
• Тестирование на разных устройствах. Ваши кастомные поля должны корректно работать на мобильных, планшетах и разных браузерах.

Пример подключения кастомного стиля:

function wpformsru_enqueue_custom_styles() {
    if ( is_page( 'contact' ) ) { // Например, на странице с формой
        wp_enqueue_style( 'wpformsru-custom', get_stylesheet_directory_uri() . '/css/wpforms-custom.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpformsru_enqueue_custom_styles' );

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

Если WPForms по каким-то причинам не подходит для ваших задач, рассмотрите альтернативы с расширенными возможностями кастомизации:

• Gravity Forms. Профессиональный плагин с мощным API и поддержкой пользовательских полей.
• Formidable Forms. Гибкий конструктор с расширенными возможностями создания и обработки полей.
• Contact Form 7 с расширениями. Бесплатный, но требует доработок для кастомных решений.

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

Выводы по добавлению пользовательских полей в WPForms

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

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