WPForms и WooCommerce: автоматическое сохранение данных формы при обновлении страницы

Проблема: потеря введённых данных в WPForms при обновлении страницы

При работе с формами WPForms на сайте с WooCommerce нередко возникает ситуация, когда пользователь заполняет форму, но случайно обновляет страницу или переходит назад, и все введённые данные теряются. Это особенно критично для многошаговых форм или форм, встроенных на страницах оформления заказа, где пользователь вводит много информации.

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

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

1. Откройте страницу с формой WPForms на сайте WooCommerce.
2. Заполните несколько полей, например имя, email, адрес.
3. Обновите страницу через браузер (F5 или Ctrl+R).
4. Обратите внимание, что все введённые данные сбросились.

Если форма сбрасывается — значит, данные не сохраняются локально, и пользователю приходится вводить всё заново.

Пошаговое решение: реализация автосохранения данных формы в localStorage

Шаг 1. Добавляем JavaScript для сохранения и восстановления данных

Используем событие ввода в полях формы и локальное хранилище браузера localStorage для сохранения каждого введённого значения. При загрузке страницы данные восстанавливаются в форму.

document.addEventListener('DOMContentLoaded', function() {
  const formId = 'wpforms-form-123'; // замените на ID вашей формы
  const form = document.getElementById(formId);
  if (!form) return;

  // Восстановление данных из localStorage
  const savedData = JSON.parse(localStorage.getItem(formId) || '{}');
  for (const [name, value] of Object.entries(savedData)) {
    const field = form.querySelector(`[name="${name}"]`);
    if (field) {
      if (field.type === 'checkbox' || field.type === 'radio') {
        field.checked = value;
      } else {
        field.value = value;
      }
    }
  }

  // Сохранение данных при вводе
  form.addEventListener('input', function(e) {
    const target = e.target;
    if (!target.name) return;
    savedData[target.name] = target.type === 'checkbox' || target.type === 'radio' ? target.checked : target.value;
    localStorage.setItem(formId, JSON.stringify(savedData));
  });

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

Важно: замените 'wpforms-form-123' на реальный ID вашей формы. ID можно получить из атрибута id контейнера формы на странице.

Шаг 2. Подключаем JS на страницу с формой

Добавьте этот скрипт либо в файл темы (footer.php перед </body>), либо через функцию в functions.php:

function wpforms_autosave_scripts() {
  if (is_page('checkout') || is_page('forma-s-nuzhnoy-formoy')) { // укажите нужные страницы
    wp_enqueue_script('wpforms-autosave', get_stylesheet_directory_uri() . '/js/wpforms-autosave.js', ['jquery'], null, true);
  }
}
add_action('wp_enqueue_scripts', 'wpforms_autosave_scripts');

Проверка результата после внедрения

1. Загрузите страницу с формой.
2. Заполните несколько полей.
3. Обновите страницу браузера.
4. Проверьте, что введённые данные остались в полях без необходимости повторного ввода.
5. Отправьте форму.
6. После успешной отправки данные в localStorage должны автоматически очиститься.

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

• Неправильный ID формы: Если форма не восстанавливает данные, проверьте, что ID в скрипте совпадает с ID формы на странице.
• Поля с одинаковыми именами: В формах с повторяющимися полями (например, в многошаговых) требуется доработать скрипт для уникализации ключей в localStorage.
• Кэширование страницы: Если включено агрессивное кэширование, браузер может загружать старую версию скрипта. Очистите кэш и проверьте.
• Проблемы с чекбоксами и радиокнопками: Убедитесь, что для этих типов полей сохраняется и восстанавливается свойство checked, а не value.

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

• Храните в localStorage только необходимые поля, избегайте сохранения чувствительной информации (пароли, платежные данные).
• Ограничьте размер сохраняемых данных, чтобы не перегружать localStorage.
• Для многошаговых форм можно расширить скрипт, чтобы сохранять данные по шагам, что упрощает восстановление и уменьшает риски.
• Используйте события WPForms (wpformsSubmitSuccess) для очистки кэша, чтобы не сохранять устаревшие данные.

Сравнение подходов сохранения данных формы в WPForms

Метод	Описание	Плюсы	Минусы
localStorage + JS	Сохранение данных в браузере пользователя	Простота реализации, не требует серверных настроек, работает офлайн	Ограничение по объёму, не подходит для чувствительных данных
Сохранение в сессии на сервере	Сохраняется на сервере, требует PHP и сессий	Безопаснее для конфиденциальных данных	Нужно настраивать сервер, увеличивает нагрузку
Использование плагинов автосохранения WPForms	Готовые решения от сторонних разработчиков	Удобство, поддержка, расширенные функции	Может быть платным, добавляет нагрузку на сайт