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

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

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

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

  • Упростить последующую коммуникацию с пользователем.
  • Использовать телефон для двухфакторной аутентификации.
  • Повысить качество базы данных клиентов.

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

Добавляем поле телефона в форму регистрации WordPress

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

function wpkama_add_phone_field() {
    $phone = ( isset( $_POST['phone'] ) ) ? esc_attr( $_POST['phone'] ) : '';
    echo '<p>'
       . '<label for="phone">Телефон (обязательно)<br /></label>'
       . '<input type="text" name="phone" id="phone" class="input" value="' . $phone . '" size="25" />'
       . '</p>';
}
add_action( 'register_form', 'wpkama_add_phone_field' );

Этот код добавляет текстовое поле с id и name = phone. Если пользователь отправляет форму с ошибкой, введённое значение сохраняется.

Валидация поля телефона при регистрации

Следующий важный этап — проверить, что пользователь ввёл корректный номер телефона и поле не пустое. Для этого используем фильтр registration_errors.

function wpkama_validate_phone_field( $errors, $sanitized_user_login, $user_email ) {
    if ( empty( $_POST['phone'] ) ) {
        $errors->add( 'phone_error', '<strong>Ошибка</strong>: поле Телефон обязательно для заполнения.' );
    } else {
        $phone = sanitize_text_field( $_POST['phone'] );
        // Простая проверка: только цифры, пробелы, + и -
        if ( ! preg_match( '/^[+0-9\s\-]+$/', $phone ) ) {
            $errors->add( 'phone_error_format', '<strong>Ошибка</strong>: номер телефона содержит недопустимые символы.' );
        }
    }
    return $errors;
}
add_filter( 'registration_errors', 'wpkama_validate_phone_field', 10, 3 );

Здесь мы проверяем, что поле не пустое и содержит только допустимые символы для номера телефона (цифры, пробелы, плюс и дефис). Вы можете усложнить проверку, если нужно, например, использовать регулярные выражения для конкретного формата.

Сохраняем номер телефона в профиле пользователя

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

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

Данные сохраняются в метаполе с ключом phone. Это позволит в дальнейшем использовать и отображать номер телефона в админке или на сайте.

Отображение и редактирование поля телефона в профиле пользователя WordPress

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

function wpkama_show_phone_field_in_profile( $user ) {
    $phone = get_user_meta( $user->ID, 'phone', true );
    ?>
    <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( $phone ); ?>" class="regular-text" />
                <br /><span class="description">Введите номер телефона пользователя.</span>
            </td>
        </tr>
    </table>
    <?php
}
add_action( 'show_user_profile', 'wpkama_show_phone_field_in_profile' );
add_action( 'edit_user_profile', 'wpkama_show_phone_field_in_profile' );

И добавим сохранение этого поля:

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

Использование плагинов для добавления поля телефона в регистрацию

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

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

Однако собственный код даёт больше контроля и лёгкости без лишних зависимостей.

Резюме и рекомендации по добавлению поля телефона

Добавление поля телефона в регистрацию — простая, но полезная задача. Ключевые моменты:

  • Добавляйте поле через register_form.
  • Обязательно валидируйте данные через registration_errors.
  • Сохраняйте номер в метаполе пользователя.
  • Добавляйте поле в профиль для удобного редактирования.
  • Используйте плагины, если нужно быстро и без кода.

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

⭐⭐⭐⭐⭐