Как добавить автозаполнение форм в WordPress с помощью jQuery

Автор: Марина Николаева | Опубликовано: 14.03.2026

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

Зачем нужно автозаполнение форм в WordPress

Автозаполнение позволяет пользователям быстрее заполнять формы, так как браузер или скрипт подставляет ранее введённые или рекомендованные данные. Это снижает количество ошибок и повышает конверсию. В WordPress, где часто используются кастомные формы (например, через Contact Form 7, Gravity Forms или WPForms), такая функция помогает сделать сайт более дружелюбным.

Ключевые преимущества автозаполнения:

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

Реализация автозаполнения форм с помощью jQuery

Для начала рассмотрим простой пример автозаполнения полей формы с помощью jQuery. Допустим, у вас есть форма с полями "Имя" и "Email", и вы хотите автоматически подставлять значения по умолчанию или из локального хранилища браузера.

Пример кода автозаполнения

jQuery(document).ready(function($) {
    // Проверяем, есть ли сохранённые данные в localStorage
    if(localStorage.getItem('wpstandart_name')) {
        $('#wpstandart_name').val(localStorage.getItem('wpstandart_name'));
    }
    if(localStorage.getItem('wpstandart_email')) {
        $('#wpstandart_email').val(localStorage.getItem('wpstandart_email'));
    }

    // При изменении полей сохраняем данные в localStorage
    $('#wpstandart_name, #wpstandart_email').on('input', function() {
        localStorage.setItem('wpstandart_name', $('#wpstandart_name').val());
        localStorage.setItem('wpstandart_email', $('#wpstandart_email').val());
    });
});

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

Подключение jQuery в WordPress

Важно убедиться, что jQuery подключен правильно. В WordPress он обычно подключён по умолчанию, но если нет, добавьте следующий код в файл functions.php вашей темы:

function wpstandart_enqueue_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'wpstandart_enqueue_scripts');

Автозаполнение форм с динамическими данными из REST API WordPress

Иногда необходимо подставлять данные пользователя или другие значения, получаемые динамически через API. Рассмотрим пример автозаполнения поля формы на основе данных текущего пользователя, полученных через REST API.

Для начала убедитесь, что у вас включен REST API (он включён по умолчанию в современных версиях WordPress).

Пример кода для автозаполнения по REST API

jQuery(document).ready(function($) {
    $.ajax({
        url: wpApiSettings.root + 'wp/v2/users/me',
        method: 'GET',
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-WP-Nonce', wpApiSettings.nonce);
        },
        success: function(user) {
            $('#wpstandart_name').val(user.name);
            $('#wpstandart_email').val(user.email);
        },
        error: function() {
            console.log('Не удалось получить данные пользователя');
        }
    });
});

Для корректной работы этого кода добавьте в functions.php следующий код, чтобы передать параметры в JS:

function wpstandart_localize_script() {
    wp_enqueue_script('wpstandart-script', get_template_directory_uri() . '/js/wpstandart-script.js', array('jquery'), null, true);
    wp_localize_script('wpstandart-script', 'wpApiSettings', array(
        'root' => esc_url_raw(rest_url()),
        'nonce' => wp_create_nonce('wp_rest')
    ));
}
add_action('wp_enqueue_scripts', 'wpstandart_localize_script');

Полезные плагины для автозаполнения форм в WordPress

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

Gravity Forms — мощный конструктор форм с поддержкой динамических значений и автозаполнения через фильтры и хуки.
Contact Form 7 – Dynamic Text Extension — расширение для Contact Form 7, позволяющее подставлять динамические значения в поля формы.
WPRemark — плагин для вставки отзывов и форм с расширенными возможностями, может быть адаптирован для автозаполнения через JavaScript и REST API.

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

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

При работе с автозаполнением важно помнить о безопасности:

Не храните чувствительные данные в локальном хранилище без шифрования.
При получении данных через REST API используйте nonce и права доступа.
Проверяйте и фильтруйте данные перед выводом и сохранением.

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

Расширение функционала автозаполнения: автозаполнение с учетом пользовательских метаданных

В WordPress вы можете сохранять пользовательские метаданные и использовать их для автозаполнения форм. Рассмотрим пример, как получить и подставить метаданные пользователя, например, телефон или адрес.

PHP: добавляем пользовательские данные в REST API ответ

function wpstandart_add_user_meta_to_rest() {
    register_rest_field('user', 'phone', array(
        'get_callback' => function ($user) {
            return get_user_meta($user['id'], 'phone', true);
        },
        'schema' => null,
    ));
}
add_action('rest_api_init', 'wpstandart_add_user_meta_to_rest');

jQuery: автозаполнение поля телефона

jQuery(document).ready(function($) {
    $.ajax({
        url: wpApiSettings.root + 'wp/v2/users/me',
        method: 'GET',
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-WP-Nonce', wpApiSettings.nonce);
        },
        success: function(user) {
            $('#wpstandart_phone').val(user.phone);
        },
        error: function() {
            console.log('Не удалось получить телефон пользователя');
        }
    });
});

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

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

Автозаполнение — важный инструмент повышения удобства и эффективности форм на вашем сайте. Для его реализации используйте сочетание jQuery, локального хранилища, REST API и при необходимости — мощных плагинов. Обязательно учитывайте безопасность и удобство для конечного пользователя.

Если вы хотите быстро начать, попробуйте расширение Contact Form 7 – Dynamic Text Extension или Gravity Forms с кастомными фильтрами. Для более гибких и уникальных решений — пишите собственные скрипты с использованием jQuery и REST API, как показано в примерах выше.