Как добавить автоматическое сохранение в формы WordPress

В WordPress часто используются формы для сбора данных от пользователей — будь то контактные формы, формы обратной связи или пользовательские формы в плагинах. Одной из важных функций для улучшения UX является автоматическое сохранение введённых данных, чтобы пользователь не потерял информацию при случайном обновлении страницы или закрытии браузера.

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

Автоматическое сохранение (auto-save) позволяет сохранять введённые данные локально или на сервере в процессе заполнения формы. Это особенно полезно для длинных форм или когда подключение нестабильно. Без такой функции пользователь рискует потерять все данные и будет вынужден вводить их заново, что негативно влияет на конверсию.

В WordPress есть автоматическое сохранение для постов, но для кастомных форм это нужно реализовывать самостоятельно.

Подходы к реализации автоматического сохранения

Существует несколько способов добавить авто-сохранение в формы WordPress:

• Сохранение данных формы в локальное хранилище браузера (localStorage)
• Отправка данных на сервер через AJAX с периодическим сохранением в пользовательские мета или отдельную таблицу
• Использование готовых плагинов с поддержкой автосохранения для популярных форм (Contact Form 7, Gravity Forms)

Рассмотрим практические примеры для каждого подхода.

Автоматическое сохранение с помощью localStorage

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

Пример JS-кода для формы с id="wpbit-form":

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

  // Восстановление данных из localStorage
  Array.from(form.elements).forEach(el => {
    if (el.name) {
      const saved = localStorage.getItem('wpbit_form_' + el.name);
      if (saved) {
        el.value = saved;
      }
    }
  });

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

  // Очистка localStorage при успешной отправке
  form.addEventListener('submit', function() {
    Array.from(form.elements).forEach(el => {
      if (el.name) {
        localStorage.removeItem('wpbit_form_' + el.name);
      }
    });
  });
});

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

Сохранение данных на сервер через AJAX

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

Добавьте в functions.php следующий код:

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

  $user_id = get_current_user_id();
  if (!$user_id) {
    wp_send_json_error('Пользователь не авторизован');
  }

  $form_data = isset($_POST['formData']) ? $_POST['formData'] : array();
  if (empty($form_data)) {
    wp_send_json_error('Данные формы пусты');
  }

  // Сохраняем данные в user meta
  update_user_meta($user_id, 'wpbit_auto_saved_form', $form_data);

  wp_send_json_success('Данные сохранены');
}
add_action('wp_ajax_wpbit_auto_save_form', 'wpbit_auto_save_form');

Далее добавим JavaScript для отправки данных формы с задержкой:

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

  let timer;
  form.addEventListener('input', function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      const data = new FormData(form);
      const formDataObj = {};
      data.forEach((value, key) => {
        formDataObj[key] = value;
      });

      fetch(wpbit_ajax_object.ajax_url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        body: new URLSearchParams({
          action: 'wpbit_auto_save_form',
          nonce: wpbit_ajax_object.nonce,
          formData: JSON.stringify(formDataObj)
        })
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          console.log('Данные формы сохранены');
        }
      });
    }, 2000); // 2 секунды после последнего ввода
  });
});

Не забудьте локализовать скрипт в PHP перед его подключением:

wp_enqueue_script('wpbit-auto-save', get_template_directory_uri() . '/js/wpbit-auto-save.js', array('jquery'), null, true);
wp_localize_script('wpbit-auto-save', 'wpbit_ajax_object', array(
  'ajax_url' => admin_url('admin-ajax.php'),
  'nonce' => wp_create_nonce('wpbit_auto_save_nonce')
));

Готовые плагины с поддержкой автосохранения форм

Если вы используете популярные плагины, рассмотрите следующие варианты:

• Contact Form 7 Auto Save — расширение для Contact Form 7, сохраняет данные формы в localStorage
• Gravity Forms Save and Continue — встроенная функция Gravity Forms для сохранения прогресса заполнения
• Clearfy Pro — плагин с расширенными возможностями оптимизации и безопасности, включая функции улучшения UX форм

Использование таких плагинов значительно ускорит разработку без необходимости писать собственный код.

Практические советы по внедрению автоматического сохранения

Чтобы сделать функцию авто-сохранения максимально полезной и удобной, учитывайте следующие моменты:

• Обеспечьте безопасность — проверяйте nonce и права пользователя при сохранении на сервер
• Не сохраняйте чувствительные данные без шифрования
• Пользователь должен явно видеть, что данные сохраняются (например, индикатор или сообщение)
• Дайте возможность очистить сохранённые данные
• Тестируйте работу авто-сохранения на разных устройствах и браузерах

Выводы

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

Подробно продумайте логику, безопасность и UX, чтобы авто-сохранение действительно улучшало взаимодействие пользователей с сайтом.