WordPress автоматическое сохранение формы WPForms: как сделать и настроить

Почему важно добавить автоматическое сохранение формы в WPForms

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

Автоматическое сохранение (autosave) позволяет сохранять введённые данные пользователя локально в браузере, а при повторном заходе — восстанавливать их в форму. Это особенно полезно для многошаговых форм, опросов и регистраций.

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

Как реализовать автосохранение формы в WPForms на WordPress

Основная идея — слушать события ввода в поля формы и сохранять данные в localStorage браузера. При загрузке страницы мы проверяем, есть ли сохранённые данные, и если есть — восстанавливаем их.

Для начала нужно добавить кастомный JavaScript в тему или плагин. Пример минимального кода:

document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('.wpforms-form');
    if (!form) return;

    const storageKey = 'wpform_autosave_' + form.getAttribute('id');

    // Восстановление данных
    const savedData = localStorage.getItem(storageKey);
    if (savedData) {
        const formData = JSON.parse(savedData);
        for (const [name, value] of Object.entries(formData)) {
            const field = form.querySelector(`[name="${name}"]`);
            if (field) {
                field.value = value;
            }
        }
    }

    // Сохранение при вводе
    form.addEventListener('input', function () {
        const inputs = form.querySelectorAll('input, textarea, select');
        const data = {};
        inputs.forEach(input => {
            data[input.name] = input.value;
        });
        localStorage.setItem(storageKey, JSON.stringify(data));
    });

    // Очистка localStorage при успешной отправке формы
    form.addEventListener('wpformsSubmitSuccess', function () {
        localStorage.removeItem(storageKey);
    });
});

Этот код автоматически сохраняет значения всех полей формы в localStorage с ключом, основанным на ID формы. При загрузке страницы данные восстанавливаются. После успешной отправки данные очищаются.

Подключение скрипта в WordPress через functions.php

Чтобы добавить этот скрипт на страницу с формой, используйте следующий PHP-код в functions.php вашей темы или в собственном плагине:

function wpform_autosave_enqueue_script() {
    if (is_page() || is_single()) {
        wp_enqueue_script('wpform-autosave', get_stylesheet_directory_uri() . '/js/wpform-autosave.js', array(), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'wpform_autosave_enqueue_script');

Скрипт wpform-autosave.js содержит JavaScript из предыдущего шага. Вы можете также внедрить код inline через wp_add_inline_script, если не хотите создавать отдельный файл.

Использование плагинов для автосохранения форм WPForms

Если вы предпочитаете готовые решения, существует несколько плагинов, которые добавляют функцию автосохранения для форм, в том числе WPForms:

• WPForms Save and Resume — официальный аддон от WPForms, который позволяет пользователям сохранять заполненную форму и продолжать позже. Однако он доступен только в Pro версии.
• Formidable Forms Autosave — плагин с функцией автосохранения, который можно комбинировать с WPForms через кастомные решения.
• Custom WPForms Autosave Plugins — на GitHub и в репозитории можно найти простые решения с автосохранением на базе localStorage, как пример выше.

Если вам нужна именно бесплатная и лёгкая реализация, то собственный скрипт с localStorage — самый простой и быстрый вариант.

Советы по оптимизации и расширению автосохранения в WPForms

При реализации автосохранения важно учитывать несколько аспектов:

• Не сохраняйте личные данные без предупреждения пользователя. Убедитесь, что это не нарушает политику конфиденциальности.
• Ограничьте объём данных, чтобы не перегружать localStorage.
• Добавьте очистку данных через определённое время (например, 24 часа).
• Для многошаговых форм сохраняйте данные каждого шага отдельно.
• Можно расширить функционал, отправляя данные на сервер через AJAX, чтобы хранить их не только локально.

Пример добавления очистки localStorage через 24 часа:

document.addEventListener('DOMContentLoaded', function () {
    const storageKey = 'wpform_autosave_' + form.getAttribute('id');
    const timestampKey = storageKey + '_timestamp';

    const savedTime = localStorage.getItem(timestampKey);
    const now = Date.now();

    if (savedTime && now - savedTime > 86400000) { // 24 часа в миллисекундах
        localStorage.removeItem(storageKey);
        localStorage.removeItem(timestampKey);
    }

    // При сохранении данных
    localStorage.setItem(timestampKey, now.toString());
});

Итог

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

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