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

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

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

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

Автосохранение позволяет:

• Сохранять введённые данные на стороне клиента с помощью localStorage или sessionStorage.
• Периодически отправлять данные на сервер через AJAX и сохранять их во временных полях.
• Восстанавливать данные формы при повторном открытии страницы.

Рассмотрим подробно, как реализовать автосохранение для форм в WordPress.

Реализация автосохранения через JavaScript и localStorage

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

Пример JavaScript-кода для автосохранения текстовых полей и textarea:

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('#wpgen-autosave-form');
  if (!form) return;

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

  // Сохраняем данные при изменении полей
  form.addEventListener('input', function(e) {
    const formData = {};
    form.querySelectorAll('input[type="text"], textarea').forEach(field => {
      formData[field.name] = field.value;
    });
    localStorage.setItem('wpgenFormData', JSON.stringify(formData));
  });

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

В этом коде мы:

• Восстанавливаем данные из localStorage при загрузке страницы.
• Сохраняем данные при каждом вводе.
• Удаляем сохранённые данные при отправке формы.

Этот подход хорошо подходит для простых форм без критичных данных.

Автосохранение на сервере через AJAX с WPGenAjaxAutosave

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

Пример реализации с использованием AJAX и WP AJAX API:

// functions.php
add_action('wp_enqueue_scripts', 'wpgen_enqueue_autosave_script');
function wpgen_enqueue_autosave_script() {
    wp_enqueue_script('wpgen-autosave', get_template_directory_uri() . '/js/wpgen-autosave.js', ['jquery'], false, true);
    wp_localize_script('wpgen-autosave', 'wpgen_ajax_obj', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpgen_autosave_nonce')
    ]);
}

add_action('wp_ajax_wpgen_autosave_save', 'wpgen_autosave_save_callback');
add_action('wp_ajax_nopriv_wpgen_autosave_save', 'wpgen_autosave_save_callback');

function wpgen_autosave_save_callback() {
    check_ajax_referer('wpgen_autosave_nonce', 'security');

    $data = isset($_POST['formData']) ? $_POST['formData'] : [];
    $user_id = get_current_user_id() ?: 0;

    if ($user_id && !empty($data)) {
        update_user_meta($user_id, 'wpgen_autosave_data', wp_json_encode($data));
        wp_send_json_success('Данные сохранены');
    } else {
        wp_send_json_error('Ошибка сохранения');
    }
}

// js/wpgen-autosave.js
jQuery(document).ready(function($) {
  const form = $('#wpgen-autosave-form');
  if (!form.length) return;

  // Функция отправки данных на сервер
  function wpgenSaveFormData() {
    const formData = form.serializeArray();
    $.ajax({
      url: wpgen_ajax_obj.ajax_url,
      method: 'POST',
      data: {
        action: 'wpgen_autosave_save',
        security: wpgen_ajax_obj.nonce,
        formData: formData
      },
      success: function(response) {
        if (response.success) {
          console.log('Данные автосохранены');
        }
      }
    });
  }

  // Периодическое автосохранение каждые 30 секунд
  setInterval(wpgenSaveFormData, 30000);

  // Восстановление данных при загрузке формы
  $.ajax({
    url: wpgen_ajax_obj.ajax_url,
    method: 'POST',
    data: {
      action: 'wpgen_autosave_load',
      security: wpgen_ajax_obj.nonce
    },
    success: function(response) {
      if (response.success && response.data) {
        response.data.forEach(function(item) {
          form.find(`[name="${item.name}"]`).val(item.value);
        });
      }
    }
  });
});

Для полноты нужно добавить обработчик загрузки данных:

add_action('wp_ajax_wpgen_autosave_load', 'wpgen_autosave_load_callback');
add_action('wp_ajax_nopriv_wpgen_autosave_load', 'wpgen_autosave_load_callback');

function wpgen_autosave_load_callback() {
    check_ajax_referer('wpgen_autosave_nonce', 'security');

    $user_id = get_current_user_id() ?: 0;
    if ($user_id) {
        $data = get_user_meta($user_id, 'wpgen_autosave_data', true);
        if ($data) {
            wp_send_json_success(json_decode($data));
        }
    }
    wp_send_json_error('Данные не найдены');
}

Особенности и безопасность автосохранения на сервере

Сохраняйте только нужные данные и фильтруйте ввод, чтобы избежать XSS и других уязвимостей. Никогда не сохраняйте пароли или конфиденциальную информацию в незашифрованном виде.

Также обязательно используйте nonce для защиты AJAX-запросов от CSRF атак, как показано в примерах выше.

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

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

• WPForms — имеет встроенную функцию автосохранения (Save and Resume), позволяющую пользователям сохранять прогресс заполнения длинных форм.
• Formidable Forms — поддерживает автосохранение через дополнения и позволяет сохранять черновики.
• Gravity Forms — с помощью плагинов-расширений можно реализовать автосохранение и восстановление данных.

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

Рекомендации по оптимизации автосохранения данных

Автосохранение не должно мешать производительности сайта и удобству пользователя. Вот несколько советов:

• Сохраняйте данные только при значимых изменениях, а не при каждом вводе символа.
• Ограничьте частоту AJAX-запросов (например, не чаще чем раз в 30 секунд).
• Используйте debounce-функции для оптимизации клиентского скрипта.
• Обязательно очищайте сохранённые данные после успешной отправки формы.

Пример debounce для оптимизации сохранения

function wpgenDebounce(func, wait) {
  let timeout;
  return function() {
    const context = this, args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

const saveData = wpgenDebounce(function() {
  // код сохранения данных
}, 2000);

form.addEventListener('input', saveData);

Так вы минимизируете число вызовов функции при быстром наборе текста.

Заключение

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

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

Для более детального изучения и загрузки плагинов обращайтесь на WPSHOP.RU.