wpforms.ru wordpress WPForms.ru

Как сделать автоподстановку данных по адресу e-mail в форме

Часто в формах обратной связи, регистрации или заказа возникает задача — автоматически подставлять данные пользователя при вводе его 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 и другие полезные инструменты.

×
День SEO
Время сделать подарок своему WordPress!
-20% на премиум

шаблоны и плагины

Порадуй свой сайт ⋙