wpcat.ru wordpress WPCat.ru

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

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

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

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

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

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

Пример добавления поля телефона:

function wpcat_add_phone_field() {
    $phone = isset($_POST['wpcat_phone']) ? sanitize_text_field($_POST['wpcat_phone']) : '';
    ?>
    <p>
        <label for="wpcat_phone">Телефон <span style="color:red;">*</span></label>
        <input type="text" name="wpcat_phone" id="wpcat_phone" class="input" value="<?php echo esc_attr($phone); ?>" size="25" />
    </p>
    <?php
}
add_action('register_form', 'wpcat_add_phone_field');

Этот код добавит новое обязательное поле «Телефон» в форму регистрации, сохраняя введённое значение при ошибках.

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

Чтобы не допустить пустое или некорректное значение телефона, нужно добавить проверку на этапе валидации формы с помощью хука registration_errors. Вот пример функции валидации:

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

Такая валидация проверит, что поле заполнено и соответствует базовому формату номера телефона. При ошибках пользователю будет показано соответствующее сообщение.

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

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

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

Теперь номер телефона будет храниться в метаданных пользователя с ключом wpcat_phone. Его можно использовать в профиле, отправлять в CRM или показывать в админке.

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

Чтобы дать возможность администраторам и самим пользователям видеть и изменять номер телефона, добавим поле в форму редактирования профиля с хуками show_user_profile и edit_user_profile:

function wpcat_show_phone_field($user) {
    ?>
    <h3>Дополнительная информация</h3>
    <table class="form-table">
        <tr>
            <th><label for="wpcat_phone">Телефон</label></th>
            <td>
                <input type="text" name="wpcat_phone" id="wpcat_phone" value="<?php echo esc_attr(get_user_meta($user->ID, 'wpcat_phone', true)); ?>" class="regular-text" />
            </td>
        </tr>
    </table>
    <?php
}
add_action('show_user_profile', 'wpcat_show_phone_field');
add_action('edit_user_profile', 'wpcat_show_phone_field');

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

Таким образом, поле телефона будет доступно для просмотра и редактирования в профилях пользователей в админке.

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

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

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

Все эти плагины можно найти на wpshop.ru с удобной установкой и поддержкой.

Резюме и советы по безопасности

Добавляя поле телефона, убедитесь, что вы:

  • Проводите адекватную валидацию, чтобы избежать мусорных данных.
  • Сохраняете данные с применением функций очистки, например sanitize_text_field.
  • Обеспечиваете безопасность и проверяете права пользователя при сохранении метаданных.
  • При необходимости добавьте защиту от спама и ботов, например, reCAPTCHA.

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

×
Оптимизируй свой сайт!

Скидка -15% на премиум плагин Clearfy Pro

Купить плагин сейчас ⋙