Как создать автозаполняемые формы в WordPress

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

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

Автозаполнение форм — это функция, при которой некоторые поля формы автоматически заполняются ранее введёнными или известными значениями. Например, при повторном посещении сайта адрес и имя пользователя могут подставляться автоматически.

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

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

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

Существует несколько популярных плагинов, которые поддерживают автозаполнение и могут быть легко интегрированы в WordPress:

• Contact Form 7 – Auto Fill: расширение к Contact Form 7, добавляющее автозаполнение. Позволяет подставлять значения из профиля пользователя или куки.
• WPForms: премиум-плагин с встроенной поддержкой автозаполнения полей на основе предыдущих вводов и профиля пользователя.
• Gravity Forms: мощный плагин с возможностью создавать сложные формы и настраивать автозаполнение через пользовательские фильтры.

Если вы используете My Popup от WPSHOP, можно интегрировать автозаполнение в попап-формы, что удобно для сбора лидов.

Пример настройки автозаполнения с Contact Form 7

Для Contact Form 7 существует плагин Contact Form 7 – Auto Fill, который позволяет автоматически подставлять значения из сессии пользователя:

add_filter('wpcf7_autofill_value', 'wpcoding_cf7_autofill_value', 10, 3); 
function wpcoding_cf7_autofill_value($value, $name, $form_tag) {
    if ($name === 'your-name' && is_user_logged_in()) {
        $current_user = wp_get_current_user();
        return $current_user->display_name;
    }
    return $value;
}

В данном примере поле с именем your-name автоматически подставит имя текущего пользователя, если он авторизован.

Реализация автозаполнения через собственный код в WordPress

Если вы создаёте кастомные формы или хотите гибко управлять автозаполнением, можно реализовать это на PHP и JavaScript самостоятельно.

1. Подставляем данные пользователя в поля формы на PHP

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

function wpcoding_prefill_form_fields() {
    if (is_user_logged_in()) {
        $user = wp_get_current_user();
        return [
            'name' => esc_attr($user->display_name),
            'email' => esc_attr($user->user_email),
        ];
    }
    return [];
}

Далее в шаблоне формы можно вывести эти значения:

$prefill = wpcoding_prefill_form_fields();
?>
<input type="text" name="name" value="<?php echo $prefill['name'] ?? ''; ?>" />
<input type="email" name="email" value="<?php echo $prefill['email'] ?? ''; ?>" />
<?php

2. Использование JavaScript для сохранения данных и автозаполнения

Чтобы сохранить введённые данные и подставлять их при следующем посещении, можно использовать localStorage:

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('#wpcoding-form');
    if (!form) return;
    
    // Заполняем поля из localStorage
    ['name', 'email'].forEach(field => {
        const saved = localStorage.getItem('wpcoding_' + field);
        if (saved) {
            const input = form.querySelector('[name="' + field + '"]');
            if (input) input.value = saved;
        }
    });

    // Сохраняем данные при изменении
    form.addEventListener('input', function(e) {
        if (['name', 'email'].includes(e.target.name)) {
            localStorage.setItem('wpcoding_' + e.target.name, e.target.value);
        }
    });
});

Этот код позволит сохранять введённые пользователем имя и email в localStorage браузера и автоматически подставлять при следующем визите.

Обработка автозаполнения в AJAX-формах и безопасность

Если ваша форма отправляется через AJAX, важно корректно обрабатывать данные на стороне сервера, учитывая, что автозаполнение может вводить устаревшие или некорректные данные.

Рекомендуется:

• Валидация данных на сервере.
• Использование nonce для защиты от CSRF.
• Обработка и очистка данных с помощью sanitize_text_field и других функций WordPress.

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

add_action('wp_ajax_wpcoding_submit_form', 'wpcoding_submit_form');
add_action('wp_ajax_nopriv_wpcoding_submit_form', 'wpcoding_submit_form');

function wpcoding_submit_form() {
    check_ajax_referer('wpcoding_nonce', 'security');

    $name = isset($_POST['name']) ? sanitize_text_field($_POST['name']) : '';
    $email = isset($_POST['email']) ? sanitize_email($_POST['email']) : '';

    if (empty($name) || empty($email) || !is_email($email)) {
        wp_send_json_error(['message' => 'Неверные данные']);
    }

    // Сохраняем или отправляем данные

    wp_send_json_success(['message' => 'Форма успешно отправлена']);
}

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

Создание автозаполняемых форм в WordPress — задача, которая требует внимания к UX и безопасности. Используйте готовые плагины для быстрого результата или реализуйте собственное решение для максимального контроля.

Обязательно:

• Проверяйте и фильтруйте данные на сервере.
• Обеспечивайте совместимость с мобильными устройствами.
• Используйте nonce и другие механизмы безопасности.
• Тестируйте автозаполнение в разных браузерах и при разных сценариях.

Если хотите быстро внедрить автозаполнение в формы с всплывающими окнами, обратите внимание на My Popup от WPSHOP — плагин с гибкими настройками для сбора данных.