Как сделать автоматическое сохранение форм в WordPress с помощью JavaScript

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

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

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

Кроме того, для сложных форм, например, в плагинах WPForms, Quizle или OmniVideo (для регистрации видео-ответов), автосохранение позволяет пользователям прервать заполнение и продолжить позже.

Реализация автосохранения формы с использованием JavaScript и локального хранилища

Самый простой способ — сохранять данные формы в localStorage браузера. Это не требует обращения к серверу и работает даже при отсутствии интернета.

Рассмотрим пример автосохранения для стандартной формы обратной связи с полями «Имя» и «Email».

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('#wp7-form');
  const inputs = form.querySelectorAll('input, textarea');

  // Загрузка сохранённых данных из localStorage
  inputs.forEach(input => {
    const saved = localStorage.getItem('wp7_' + input.name);
    if (saved) {
      input.value = saved;
    }
  });

  // Сохранение данных при вводе
  inputs.forEach(input => {
    input.addEventListener('input', function() {
      localStorage.setItem('wp7_' + input.name, input.value);
    });
  });

  // Очистка localStorage при успешной отправке формы
  form.addEventListener('submit', function() {
    inputs.forEach(input => {
      localStorage.removeItem('wp7_' + input.name);
    });
  });
});

Этот скрипт сохраняет каждое поле формы в localStorage сразу после изменения, а при отправке очищает сохранённые данные. Такой подход подходит для небольших форм и не требует серверных ресурсов.

Плюсы и минусы использования localStorage для автосохранения

Плюсы: простота реализации, мгновенное сохранение, не зависит от сервера.
Минусы: данные хранятся только в этом браузере и устройстве, нельзя синхронизировать между устройствами, ограничения по объёму (около 5 МБ).

Автосохранение формы через AJAX на сервер WordPress

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

Пример AJAX-обработчика в functions.php темы

add_action('wp_ajax_wp7_autosave_form', 'wp7_autosave_form_callback');
add_action('wp_ajax_nopriv_wp7_autosave_form', 'wp7_autosave_form_callback');

function wp7_autosave_form_callback() {
  // Проверяем nonce для безопасности
  check_ajax_referer('wp7_autosave_nonce', 'security');

  $user_id = get_current_user_id();
  if (!$user_id) {
    wp_send_json_error('Требуется авторизация');
  }

  $data = isset($_POST['formData']) ? $_POST['formData'] : array();

  if (empty($data)) {
    wp_send_json_error('Нет данных для сохранения');
  }

  // Сохраняем данные как мета-поле пользователя
  update_user_meta($user_id, 'wp7_autosaved_form', $data);

  wp_send_json_success('Данные сохранены');
}

Этот код создаёт AJAX-обработчик, который принимает данные формы и сохраняет их в мета-поле текущего пользователя. Не забудьте добавить nonce в форму и отправлять его вместе с данными.

JavaScript для отправки данных формы на сервер

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('#wp7-form');
  const nonce = form.querySelector('input[name="wp7_autosave_nonce"]').value;

  form.addEventListener('input', function() {
    const formData = {};
    new FormData(form).forEach((value, key) => {
      formData[key] = value;
    });

    fetch(wp7_ajax_object.ajax_url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
      body: new URLSearchParams({
        action: 'wp7_autosave_form',
        security: nonce,
        formData: JSON.stringify(formData)
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        console.log('Форма сохранена');
      } else {
        console.error('Ошибка сохранения:', data.data);
      }
    });
  });
});

Здесь при каждом вводе данных отправляется AJAX-запрос на сервер для сохранения. В реальном проекте стоит добавить дебаунсинг (задержку), чтобы не перегружать сервер.

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

Если вы не хотите писать код, можно воспользоваться специализированными плагинами. Например:

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

Выбор плагина зависит от задач и сложности форм на вашем сайте.

Советы по улучшению UX с автосохранением форм

Кроме технической реализации, важно продумать пользовательский опыт:

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

Так вы повысите доверие и удобство работы с формами.

Заключение

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

Применяйте эту технологию для повышения удобства и безопасности работы пользователей с формами на вашем сайте.