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

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

Почему автозаполнение форм важно для WordPress сайтов

Автозаполнение позволяет пользователям быстрее заполнять формы, будь то регистрация, заказ товара или обратная связь. Это снижает вероятность ошибок и увеличивает конверсию. Особенно полезно, если форма содержит повторяющиеся поля, например, имя, адрес, email.

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

Основные способы реализации автозаполнения форм без плагинов

В WordPress можно использовать несколько подходов для автозаполнения форм:

• Использование HTML атрибута autocomplete для браузерного автозаполнения;
• Хранение данных пользователя в куках и их подстановка через JavaScript;
• Получение данных текущего пользователя из базы и автозаполнение полей при загрузке формы;
• Использование AJAX для динамического получения данных и подстановки.

В этой статье рассмотрим наиболее универсальный и практичный метод — автозаполнение на основе данных текущего пользователя WordPress с помощью PHP и JavaScript.

Автозаполнение форм для зарегистрированных пользователей WordPress

Если пользователи авторизованы, можно подставлять их данные (имя, email и т.п.) автоматически. Для этого используем PHP-функцию, которая получает данные пользователя и выводит форму с уже заполненными полями.

Пример функции для вывода формы с автозаполнением:

function wpelement_render_autofill_form() {
    if ( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        $name = esc_attr( $current_user->display_name );
        $email = esc_attr( $current_user->user_email );
    } else {
        $name = '';
        $email = '';
    }
    echo '<form id="wpelement-autofill-form" method="post">';
    echo '<label for="wpelement-name">Имя:</label>';
    echo '<input type="text" id="wpelement-name" name="name" value="'. $name .'" autocomplete="name" required />';
    echo '<label for="wpelement-email">Email:</label>';
    echo '<input type="email" id="wpelement-email" name="email" value="'. $email .'" autocomplete="email" required />';
    echo '<input type="submit" value="Отправить" />';
    echo '</form>';
}

Эту функцию можно вывести в любом месте темы с помощью do_action или напрямую в шаблоне.

Объяснение кода

Сначала проверяем, авторизован ли пользователь. Если да — получаем имя и email. Далее подставляем значения в поля формы. Атрибуты autocomplete помогают браузеру понять, какие данные подставлять автоматически при повторном заполнении.

Использование JavaScript для автозаполнения форм по кукам

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

Пример JavaScript кода, который сохраняет данные формы в куки и подставляет их при загрузке страницы:

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('wpelement-autofill-form');
    if (!form) return;
    const nameInput = form.querySelector('input[name="name"]');
    const emailInput = form.querySelector('input[name="email"]');

    // Функция для установки куки
    function setCookie(name, value, days) {
        const d = new Date();
        d.setTime(d.getTime() + (days*24*60*60*1000));
        let expires = "expires=" + d.toUTCString();
        document.cookie = name + "=" + value + ";" + expires + ";path=/";
    }

    // Функция для получения куки
    function getCookie(name) {
        let cname = name + "=";
        let decodedCookie = decodeURIComponent(document.cookie);
        let ca = decodedCookie.split(';');
        for(let i = 0; i < ca.length; i++) {
            let c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1);
            if (c.indexOf(cname) == 0) return c.substring(cname.length, c.length);
        }
        return "";
    }

    // Подставляем куки в поля
    if(getCookie('wpelement_name')) {
        nameInput.value = getCookie('wpelement_name');
    }
    if(getCookie('wpelement_email')) {
        emailInput.value = getCookie('wpelement_email');
    }

    // Сохраняем данные в куки при изменении полей
    nameInput.addEventListener('input', function() {
        setCookie('wpelement_name', nameInput.value, 30);
    });
    emailInput.addEventListener('input', function() {
        setCookie('wpelement_email', emailInput.value, 30);
    });
});

Как это работает

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

Советы по безопасности и удобству

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

• Никогда не сохраняйте в куки или локальное хранилище конфиденциальные данные (пароли, платежную информацию);
• Используйте функцию esc_attr() при выводе данных в HTML, чтобы избежать XSS-уязвимостей;
• Для удобства пользователей добавляйте атрибуты autocomplete в поля формы;
• Оповещайте пользователя, если данные будут сохранены для автозаполнения;
• Если используете AJAX для динамического автозаполнения, всегда проверяйте и фильтруйте полученные данные.

Использование плагина Clearfy Pro для расширенного автозаполнения

Если вы хотите расширить функционал автозаполнения и оптимизации форм, можно использовать Clearfy Pro. Этот плагин позволяет не только улучшить работу форм, но и оптимизировать сайт, отключая ненужные функции WordPress, что положительно сказывается на скорости и безопасности.

Clearfy Pro поддерживает настройку автозаполнения и сохранения полей формы, а также интеграцию с WooCommerce и другими популярными плагинами, что делает его отличным решением для комплексного управления формами на сайте.

Подытожим: что делать дальше

Вы можете начать с простого автозаполнения для авторизованных пользователей через PHP, дополнить функционал сохранением данных в куки на стороне клиента с помощью JavaScript. При необходимости — расширить функционал с помощью Clearfy Pro.

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