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

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

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

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

Основные выгоды автосохранения:

• Предотвращение потери данных при случайном закрытии страницы.
• Возможность продолжить заполнение формы позже.
• Улучшение UX, особенно на мобильных устройствах.

Реализовать автосохранение можно двумя способами: через локальное хранилище браузера (LocalStorage или SessionStorage) и через AJAX-запросы к серверу с сохранением данных в пользовательские мета или отдельные таблицы.

Использование JavaScript LocalStorage для автосохранения формы

LocalStorage — удобный способ сохранить форму на стороне клиента без нагрузки на сервер. Рассмотрим пример с формой обратной связи:

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

  const saveData = () => {
    const formData = {};
    Array.from(form.elements).forEach(input => {
      if (input.name) {
        formData[input.name] = input.value;
      }
    });
    localStorage.setItem('wpbuyFormData', JSON.stringify(formData));
  };

  const loadData = () => {
    const savedData = localStorage.getItem('wpbuyFormData');
    if (!savedData) return;
    const formData = JSON.parse(savedData);
    Object.keys(formData).forEach(name => {
      const input = form.elements.namedItem(name);
      if (input) {
        input.value = formData[name];
      }
    });
  };

  form.addEventListener('input', saveData);
  loadData();
});

Здесь при каждом вводе в поля формы данные сохраняются в LocalStorage, а при загрузке страницы данные восстанавливаются. Это простой и быстрый способ, не требующий серверных настроек.

Ограничения LocalStorage

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

Сохранение данных формы на сервере через AJAX и пользовательские мета-поля

Для сохранения данных формы на сервере можно использовать AJAX-запросы и REST API WordPress. Это позволит пользователю продолжить заполнение формы с любого устройства после авторизации.

Пример AJAX-обработчика для сохранения данных:

add_action('wp_ajax_wpbuy_save_form_data', 'wpbuy_save_form_data_callback');
add_action('wp_ajax_nopriv_wpbuy_save_form_data', 'wpbuy_save_form_data_callback');

function wpbuy_save_form_data_callback() {
    if (!is_user_logged_in()) {
        wp_send_json_error('Требуется авторизация');
    }

    $user_id = get_current_user_id();
    $form_data = isset($_POST['formData']) ? wp_unslash($_POST['formData']) : '';

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

    update_user_meta($user_id, '_wpbuy_saved_form_data', sanitize_text_field($form_data));
    wp_send_json_success('Данные сохранены');
}

Клиентская часть для отправки данных:

document.getElementById('wpbuy-contact-form').addEventListener('input', function() {
  const form = this;
  const formData = {};
  Array.from(form.elements).forEach(input => {
    if (input.name) {
      formData[input.name] = input.value;
    }
  });

  fetch('/wp-admin/admin-ajax.php?action=wpbuy_save_form_data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    body: new URLSearchParams({ formData: JSON.stringify(formData) })
  })
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      console.log('Данные успешно сохранены');
    }
  });
});

Чтобы загрузить сохранённые данные при загрузке страницы, можно использовать PHP в шаблоне:

<?php
if (is_user_logged_in()) {
  $saved_data = get_user_meta(get_current_user_id(), '_wpbuy_saved_form_data', true);
  echo "<script>const wpbuySavedData = '" . esc_js($saved_data) . "';</script>";
}
?>

И затем в JS восстановить данные из переменной wpbuySavedData. Такой подход требует авторизации пользователя, иначе данные не сохраняются.

Популярные плагины для автосохранения форм в WordPress

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

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

Эти плагины можно использовать как часть комплексного решения по улучшению UX и функционала форм.

Советы по безопасности и производительности при автосохранении данных

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

• Используйте nonce и проверки прав пользователя при AJAX-запросах.
• Не сохраняйте в открытом виде чувствительные данные (пароли, платежи).
• Ограничьте частоту запросов (debounce на JS).
• Для локального сохранения используйте LocalStorage с ограничением по объёму.
• Удаляйте устаревшие данные по таймауту или после успешной отправки формы.

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