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

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

Зачем создавать кастомную форму регистрации в WordPress

Стандартная регистрация WordPress содержит только базовые поля: имя пользователя, email и пароль. Но часто требуется собрать больше информации — например, телефон, дату рождения, согласие с политикой конфиденциальности или предпочтения пользователя.

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

Использование плагинов для расширенной регистрации

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

• WPForms — удобный конструктор форм с возможностью добавить любые поля, включая условные, и интеграцией с системой пользователей WordPress.
• User Registration — плагин с простым интерфейсом для создания форм регистрации с множеством настраиваемых полей.
• Profile Builder — позволяет создавать формы регистрации, логина и редактирования профиля с кастомными полями.

Если хотите более глубокую интеграцию и контроль — лучше создать форму вручную с помощью кода.

Создаем уникальную форму регистрации вручную

Для примера создадим форму с полями: имя пользователя, email, пароль, телефон и согласие с политикой.

Добавление формы на страницу

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

function wpdevelop_register_form_shortcode() {
    ob_start();
    ?>
    <form method="post" id="wpdevelop-register-form">
        <p>
            <label for="wpdevelop_user_login">Имя пользователя</label><br>
            <input type="text" name="wpdevelop_user_login" id="wpdevelop_user_login" required>
        </p>
        <p>
            <label for="wpdevelop_user_email">Email</label><br>
            <input type="email" name="wpdevelop_user_email" id="wpdevelop_user_email" required>
        </p>
        <p>
            <label for="wpdevelop_user_pass">Пароль</label><br>
            <input type="password" name="wpdevelop_user_pass" id="wpdevelop_user_pass" required>
        </p>
        <p>
            <label for="wpdevelop_user_phone">Телефон</label><br>
            <input type="text" name="wpdevelop_user_phone" id="wpdevelop_user_phone">
        </p>
        <p>
            <input type="checkbox" name="wpdevelop_user_policy" id="wpdevelop_user_policy" required>
            <label for="wpdevelop_user_policy">Я согласен с политикой конфиденциальности</label>
        </p>
        <p><input type="submit" name="wpdevelop_register_submit" value="Зарегистрироваться"></p>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wpdevelop_register_form', 'wpdevelop_register_form_shortcode');

Теперь на любой странице можно вывести форму с помощью шорткода [wpdevelop_register_form].

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

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

function wpdevelop_handle_registration() {
    if ( ! empty( $_POST['wpdevelop_register_submit'] ) ) {
        $login = sanitize_user( $_POST['wpdevelop_user_login'] );
        $email = sanitize_email( $_POST['wpdevelop_user_email'] );
        $pass = $_POST['wpdevelop_user_pass'];
        $phone = sanitize_text_field( $_POST['wpdevelop_user_phone'] );
        $policy = isset($_POST['wpdevelop_user_policy']) ? true : false;

        $errors = new WP_Error();

        if ( empty($login) || empty($email) || empty($pass) ) {
            $errors->add('field', 'Пожалуйста, заполните все обязательные поля.');
        }
        if ( ! is_email($email) ) {
            $errors->add('email_invalid', 'Неверный формат email.');
        }
        if ( username_exists($login) ) {
            $errors->add('user_exists', 'Это имя пользователя уже занято.');
        }
        if ( email_exists($email) ) {
            $errors->add('email_exists', 'Этот email уже зарегистрирован.');
        }
        if ( !$policy ) {
            $errors->add('policy', 'Вы должны согласиться с политикой конфиденциальности.');
        }

        if ( ! empty( $errors->errors ) ) {
            foreach ( $errors->get_error_messages() as $error ) {
                echo '<div class="wpdevelop-error">' . esc_html($error) . '</div>';
            }
            return;
        }

        $user_id = wp_create_user( $login, $pass, $email );
        if ( is_wp_error( $user_id ) ) {
            echo '<div class="wpdevelop-error">Ошибка регистрации: ' . esc_html($user_id->get_error_message()) . '</div>';
            return;
        }

        // Сохраняем дополнительное поле телефон
        update_user_meta( $user_id, 'phone', $phone );

        echo '<div class="wpdevelop-success">Регистрация прошла успешно. Вы можете войти на сайт.</div>';
    }
}
add_action('wp', 'wpdevelop_handle_registration');

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

Вывод дополнительных полей в профиле пользователя

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

function wpdevelop_show_extra_profile_fields($user) {
    ?>
    <h3>Дополнительные данные</h3>
    <table class="form-table">
        <tr>
            <th><label for="phone">Телефон</label></th>
            <td>
                <input type="text" name="phone" id="phone" value="<?php echo esc_attr(get_user_meta($user->ID, 'phone', true)); ?>" class="regular-text" /><br />
                <span class="description">Введите ваш телефон.</span>
            </td>
        </tr>
    </table>
    <?php
}
add_action('show_user_profile', 'wpdevelop_show_extra_profile_fields');
add_action('edit_user_profile', 'wpdevelop_show_extra_profile_fields');

function wpdevelop_save_extra_profile_fields($user_id) {
    if ( ! current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }
    update_user_meta($user_id, 'phone', sanitize_text_field($_POST['phone']));
}
add_action('personal_options_update', 'wpdevelop_save_extra_profile_fields');
add_action('edit_user_profile_update', 'wpdevelop_save_extra_profile_fields');

Оптимизация и безопасность формы регистрации

Несколько советов, чтобы форма была надежной и удобной:

• Добавьте проверку nonce для защиты от CSRF:

wp_nonce_field('wpdevelop_register_action', 'wpdevelop_register_nonce');

• Проверяйте nonce при обработке формы.
• Используйте wp_hash_password() для безопасного хранения паролей, хотя wp_create_user() это делает автоматически.
• Реализуйте капчу или ограничение по количеству попыток, чтобы защититься от брутфорса.
• Обрабатывайте ошибки и выводите пользовательские сообщения.

Пример интеграции с плагином Clearfy Pro для оптимизации регистрации

Если на сайте установлен плагин Clearfy Pro, можно дополнительно отключить ненужные функции WordPress, которые замедляют работу сайта и нагружают процесс регистрации, например, REST API для неавторизованных, XML-RPC и другие. Это повысит скорость и безопасность регистрации.

Выводы

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

Используйте этот пример как основу для своих проектов и адаптируйте под задачи. В случае необходимости расширения функционала, рекомендуем изучить возможности плагинов из раздела регистрации на WPSHOP.RU.