Как сделать динамические поля в форме регистрации WordPress

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

Почему нужны динамические поля в форме регистрации WordPress

Дополнительные поля позволяют собирать больше информации о пользователях при регистрации. Динамические поля — это поля, которые появляются или изменяются в зависимости от выбора пользователя или других условий. Например, если в поле «Тип пользователя» выбран «Компания», появляются поля для ввода данных о компании, а если «Физическое лицо» — эти поля скрываются.

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

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

Добавление базовых пользовательских полей в форму регистрации WordPress

Начнём с добавления простого дополнительного поля на форму регистрации. Для этого используем хук register_form для вывода поля и registration_errors для проверки данных, а также user_register для сохранения.

function wpfaq_register_form_add_fields() {
    ?>
    <p>
        <label for="wpfaq_phone">Телефон<br />
            <input type="text" name="wpfaq_phone" id="wpfaq_phone" class="input" value="<?php if ( ! empty( $_POST['wpfaq_phone'] ) ) echo esc_attr( $_POST['wpfaq_phone'] ); ?>" size="25" /></label>
    </p>
    <?php
}
add_action( 'register_form', 'wpfaq_register_form_add_fields' );

function wpfaq_registration_errors( $errors, $sanitized_user_login, $user_email ) {
    if ( empty( $_POST['wpfaq_phone'] ) || ! preg_match( '/^\+?[0-9\s\-]{5,20}$/', $_POST['wpfaq_phone'] ) ) {
        $errors->add( 'wpfaq_phone_error', '<strong>Ошибка</strong>: Пожалуйста, введите корректный телефон.' );
    }
    return $errors;
}
add_filter( 'registration_errors', 'wpfaq_registration_errors', 10, 3 );

function wpfaq_user_register_save( $user_id ) {
    if ( ! empty( $_POST['wpfaq_phone'] ) ) {
        update_user_meta( $user_id, 'wpfaq_phone', sanitize_text_field( $_POST['wpfaq_phone'] ) );
    }
}
add_action( 'user_register', 'wpfaq_user_register_save' );

Этот код добавляет поле телефона, проверяет его и сохраняет в метаданных пользователя.

Реализация динамических полей с использованием JavaScript

Чтобы поля появлялись или скрывались в зависимости от выбора, нужно добавить JavaScript. Например, добавим поле с выбором типа пользователя и покажем дополнительные поля для компании.

function wpfaq_register_form_dynamic_fields() {
    ?>
    <p>
        <label for="wpfaq_usertype">Тип пользователя<br />
            <select name="wpfaq_usertype" id="wpfaq_usertype" class="input">
                <option value="individual" <?php selected( $_POST['wpfaq_usertype'] ?? '', 'individual' ); ?>>Физическое лицо</option>
                <option value="company" <?php selected( $_POST['wpfaq_usertype'] ?? '', 'company' ); ?>>Компания</option>
            </select>
        </label>
    </p>
    <p class="wpfaq_company_field" style="display:none;">
        <label for="wpfaq_company_name">Название компании<br />
            <input type="text" name="wpfaq_company_name" id="wpfaq_company_name" class="input" value="<?php echo esc_attr( $_POST['wpfaq_company_name'] ?? '' ); ?>" size="25" />
        </label>
    </p>
    <script>
        (function($){
            function wpfaqToggleCompanyField() {
                if ($('#wpfaq_usertype').val() === 'company') {
                    $('.wpfaq_company_field').show();
                } else {
                    $('.wpfaq_company_field').hide();
                }
            }
            $(document).ready(function(){
                wpfaqToggleCompanyField();
                $('#wpfaq_usertype').change(wpfaqToggleCompanyField);
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'register_form', 'wpfaq_register_form_dynamic_fields' );

В этом примере при выборе «Компания» появляется поле для названия компании, при выборе «Физическое лицо» — скрывается.

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

Добавим валидацию поля «Название компании» только если выбран тип «Компания».

function wpfaq_registration_errors_dynamic( $errors, $sanitized_user_login, $user_email ) {
    if ( isset( $_POST['wpfaq_usertype'] ) && $_POST['wpfaq_usertype'] === 'company' ) {
        if ( empty( $_POST['wpfaq_company_name'] ) ) {
            $errors->add( 'wpfaq_company_name_error', '<strong>Ошибка</strong>: Введите название компании.' );
        }
    }
    return $errors;
}
add_filter( 'registration_errors', 'wpfaq_registration_errors_dynamic', 20, 3 );

function wpfaq_user_register_save_dynamic( $user_id ) {
    if ( ! empty( $_POST['wpfaq_usertype'] ) ) {
        update_user_meta( $user_id, 'wpfaq_usertype', sanitize_text_field( $_POST['wpfaq_usertype'] ) );
    }
    if ( isset( $_POST['wpfaq_usertype'] ) && $_POST['wpfaq_usertype'] === 'company' && ! empty( $_POST['wpfaq_company_name'] ) ) {
        update_user_meta( $user_id, 'wpfaq_company_name', sanitize_text_field( $_POST['wpfaq_company_name'] ) );
    }
}
add_action( 'user_register', 'wpfaq_user_register_save_dynamic' );

Использование плагинов для создания динамических полей регистрации

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

• Profile Builder — мощный плагин с возможностью добавлять и настраивать поля регистрации, включая условную логику для показа/скрытия полей.
• WP User Manager — бесплатный и расширяемый плагин с поддержкой кастомных полей и условий отображения.
• Ultimate Member — популярный плагин для создания профилей и регистрации с условными полями.

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

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

Плагин WPGPT может помочь быстро сгенерировать код для кастомных полей и динамической логики, экономя время на написание.

Рекомендации по безопасности и производительности

При добавлении динамических полей важно:

• Всегда использовать функции очистки данных, например sanitize_text_field или аналогичные, чтобы избежать уязвимостей.
• Проверять и валидировать данные на серверной стороне, не полагаясь только на JavaScript.
• Минимизировать количество полей для улучшения UX и скорости загрузки формы.
• Если плагин добавляет свои скрипты и стили, убедитесь, что они не конфликтуют с вашим сайтом.

Выводы и лучшие практики

Динамические поля в форме регистрации — мощный инструмент для сбора нужных данных и улучшения взаимодействия с пользователями. Реализация через хуки WordPress и JavaScript позволяет гибко настраивать поведение формы без сторонних плагинов.

Если проект сложный, рекомендуем рассмотреть плагины с поддержкой условных полей и использовать инструменты автоматизации кода, например, WPGPT.

Не забывайте про безопасность: всегда валидируйте и очищайте данные, чтобы избежать проблем с безопасностью и целостностью базы данных.