Часто в формах обратной связи, регистрации или заказа возникает задача — автоматически подставлять данные пользователя при вводе его e-mail. Это экономит время, снижает количество ошибок и повышает удобство заполнения. В этой статье рассмотрим, как реализовать автоподстановку данных по адресу e-mail в WPForms с помощью кастомного кода и дополнительных плагинов.
Почему полезна автоподстановка данных по e-mail в WPForms
Автоподстановка позволяет повысить скорость заполнения форм и улучшить пользовательский опыт. Например, если пользователь уже оставлял заявку или зарегистрирован, ввод e-mail автоматически заполнит имя, фамилию, телефон и другие поля. Это уменьшает вероятность опечаток и ускоряет обработку данных.
Кроме того, автоподстановка упрощает работу менеджерам, т.к. данные приходят в стандартизированном виде и без пропусков.
Реализовать такую логику можно разными способами, рассмотрим наиболее эффективные с примерами.
Основные подходы к реализации автоподстановки в WPForms
1. Использование AJAX и REST API WordPress
Самый гибкий способ — создать обработчик на стороне сервера, который по введённому e-mail возвращает данные пользователя, а затем через AJAX обновлять поля формы. WPForms даёт возможность использовать JavaScript и хуки, чтобы добавить такой функционал.
Этот метод требует базовых знаний PHP и JavaScript, но даёт полный контроль.
2. Применение плагинов для пользовательских данных
Если у вас уже есть плагин, хранящий данные клиентов, например, плагин CRM или кастомные мета-поля пользователей, можно интегрировать WPForms с этими данными через хуки.
Также есть специальные дополнения к WPForms, например, WPForms User Registration, которые упрощают работу с пользовательскими профилями.
Пример реализации автоподстановки по e-mail на WPForms
Рассмотрим пример, когда нам нужно, чтобы при вводе e-mail в форму автоматически подставлялось имя и телефон, если такой e-mail уже есть в базе пользователей WordPress.
Шаг 1. Добавим в форму нужные поля
Создайте форму в WPForms с полями:
- E-mail (поле Email)
- Имя (Single Line Text)
- Телефон (Single Line Text)
Шаг 2. Добавим JavaScript для отслеживания ввода e-mail
Добавьте в файл темы или с помощью плагина для пользовательских скриптов следующий код:
jQuery(document).ready(function($){
$('#wpforms-123-field_1').on('change', function() { // замените 123 и field_1 на ID вашей формы и поля e-mail
var email = $(this).val();
if(email.length > 5 && email.indexOf('@') !== -1) {
$.ajax({
url: wpforms_ajax_object.ajax_url,
method: 'POST',
data: {
action: 'wpformsru_fetch_user_data',
email: email,
},
success: function(response) {
if(response.success) {
$('#wpforms-123-field_2').val(response.data.first_name); // имя
$('#wpforms-123-field_3').val(response.data.phone); // телефон
}
}
});
}
});
});Обратите внимание, что wpforms-123-field_1 — это ID поля e-mail, а field_2 и field_3 — ID полей имени и телефона соответственно. Подставьте свои значения из вашей формы.
Шаг 3. Создадим обработчик AJAX на PHP
Добавьте в functions.php вашей темы или в отдельный плагин следующий код:
add_action('wp_ajax_wpformsru_fetch_user_data', 'wpformsru_fetch_user_data_callback');
add_action('wp_ajax_nopriv_wpformsru_fetch_user_data', 'wpformsru_fetch_user_data_callback');
function wpformsru_fetch_user_data_callback() {
if(empty($_POST['email'])) {
wp_send_json_error('Email не передан');
}
$email = sanitize_email($_POST['email']);
if(!is_email($email)) {
wp_send_json_error('Некорректный email');
}
$user = get_user_by('email', $email);
if(!$user) {
wp_send_json_error('Пользователь не найден');
}
$first_name = get_user_meta($user->ID, 'first_name', true);
$phone = get_user_meta($user->ID, 'phone', true); // предполагается, что телефон хранится в user_meta
wp_send_json_success([
'first_name' => $first_name ? $first_name : '',
'phone' => $phone ? $phone : '',
]);
}Этот обработчик ищет пользователя по e-mail и возвращает имя и телефон, которые затем JS подставляет в форму.
Советы по улучшению автоподстановки в WPForms
Обработка ошибок и валидация
Важно обрабатывать ситуации, когда пользователь не найден или поля пустые. Можно выводить уведомления или подсказки, чтобы пользователь понимал, что данные не найдены, и вводил информацию вручную.
Кэширование данных
Если база большая, стоит подумать о кэшировании ответов, чтобы не перегружать сервер запросами при каждом изменении поля.
Использование сторонних сервисов
Для расширения возможностей можно интегрировать WPForms с CRM-системами, например, через API. Тогда автоподстановка будет брать данные из CRM, что особенно полезно для больших проектов.
Альтернативные плагины для автоподстановки данных в формах WordPress
Кроме WPForms, существуют плагины с расширенными возможностями автозаполнения:
- Fluent Forms — поддерживает динамическое заполнение полей через API и вебхуки.
- Gravity Forms с дополнениями для интеграции с базами данных и CRM.
- Advanced Custom Fields (ACF) в связке с WPForms позволяет подставлять пользовательские поля.
Однако WPForms остаётся одним из наиболее удобных и популярных решений с гибкой системой хуков и возможностью кастомизации.
Заключение
Автоподстановка данных по e-mail в WPForms — мощный инструмент для повышения удобства и качества сбора информации на сайте. Используя AJAX и REST API WordPress, можно реализовать аккуратную и быструю подгрузку данных пользователя, минимизируя ручной ввод. Такой подход особенно актуален для сайтов с большим числом повторных клиентов.
Если хотите упростить интеграцию, ознакомьтесь с плагинами на WPSHOP.RU — там есть удобные расширения для WPForms и другие полезные инструменты.