Contact Form 7: как избежать потери данных при перезагрузке страницы

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

Одна из распространенных проблем пользователей Contact Form 7 — это потеря всех введенных данных, если пользователь случайно перезагрузил страницу или нажал кнопку "Назад" в браузере. Это негативно сказывается на удобстве использования формы и может привести к снижению конверсии.

Contact Form 7 по умолчанию не сохраняет состояние формы между загрузками, поэтому при обновлении страницы все поля очищаются.

Как диагностировать потерю данных в форме

• Откройте страницу с формой Contact Form 7.
• Введите данные в несколько полей.
• Обновите страницу браузера (F5 или Ctrl+R).
• Проверьте, сохранились ли введенные данные.

Если поля пустые — значит, проблема подтверждается.

Решение: автосохранение данных формы в localStorage и восстановление при загрузке

Для сохранения данных формы Contact Form 7 между перезагрузками можно использовать JavaScript и Web Storage API (localStorage). Такой подход не требует серверной доработки и работает на стороне клиента.

Пошаговая инструкция по внедрению

1. Добавьте кастомный JavaScript в тему или плагин. Например, в файле functions.php вашей темы подключите скрипт:

function cf7_autosave_scripts() {
    if (is_page()) { // заменить на условие для страниц с формой
        wp_enqueue_script('cf7-autosave', get_template_directory_uri() . '/js/cf7-autosave.js', ['jquery'], null, true);
    }
}
add_action('wp_enqueue_scripts', 'cf7_autosave_scripts');

2. Создайте файл js/cf7-autosave.js с таким содержимым:

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

    const storageKey = 'cf7-form-autosave';

    // Восстановление данных из localStorage
    const savedData = JSON.parse(localStorage.getItem(storageKey) || '{}');
    Object.keys(savedData).forEach(function(name) {
        const field = form.querySelector(`[name="${name}"]`);
        if (field) {
            field.value = savedData[name];
        }
    });

    // Сохраняем данные при изменении полей
    form.addEventListener('input', function(e) {
        const target = e.target;
        if (!target.name) return;
        savedData[target.name] = target.value;
        localStorage.setItem(storageKey, JSON.stringify(savedData));
    });

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

Проверка результата

• Откройте страницу с формой.
• Введите данные в несколько полей.
• Обновите страницу — данные должны остаться в полях.
• Отправьте форму — после успешной отправки поля очистятся и данные в localStorage удалятся.

Частые ошибки и как их исправлять

• Форма не восстанавливает данные после перезагрузки: проверьте, что селектор .wpcf7 form соответствует вашей форме. Возможно, на странице несколько форм — тогда нужно адаптировать скрипт под конкретный ID.
• Данные не очищаются после отправки: убедитесь, что событие wpcf7mailsent срабатывает. Для этого можно добавить console.log в обработчик.
• Ошибка JSON.parse: localStorage может содержать некорректные данные — в скрипт добавьте проверку или try/catch при парсинге.

Практические советы по безопасности и производительности

• Данные сохраняются только в браузере пользователя, не передаются на сервер, поэтому риск утечки минимален.
• Не сохраняйте в localStorage чувствительные данные (пароли, платежные данные).
• Для больших и сложных форм можно добавить дебаунс на сохранение, чтобы не записывать данные слишком часто.
• Если на странице несколько форм, используйте уникальные ключи localStorage для каждой формы.

Сравнение вариантов решения