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

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

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

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

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

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

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

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

1. Clearfy Pro

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

2. WPForms с дополнением Auto Save

WPForms является одним из самых популярных конструкторов форм для WordPress. С помощью дополнения Auto Save можно автоматически сохранять введённые данные в localStorage браузера, чтобы пользователь мог продолжить заполнение.

3. My Popup для сохранения данных в всплывающих формах

Если у вас используются всплывающие формы, плагин My Popup позволяет сохранять введённый пользователем контент между сессиями, предотвращая потерю данных.

Самостоятельная реализация автоматического сохранения в форму WordPress

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

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

Используем localStorage для временного хранения данных формы и AJAX для сохранения на сервере.

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

  // Восстановление данных из localStorage
  const savedData = localStorage.getItem('wpdemo_form_data');
  if (savedData) {
    const formData = JSON.parse(savedData);
    for (const key in formData) {
      const field = form.elements[key];
      if (field) field.value = formData[key];
    }
  }

  // Функция сохранения в localStorage
  function wpdemoSaveLocally() {
    const data = {};
    for (const element of form.elements) {
      if (element.name) {
        data[element.name] = element.value;
      }
    }
    localStorage.setItem('wpdemo_form_data', JSON.stringify(data));
  }

  // Сохраняем каждый ввод через 2 секунды после последнего изменения
  let timeoutId;
  form.addEventListener('input', function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(wpdemoSaveLocally, 2000);
  });

  // Отправка данных на сервер через AJAX
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(form);
    fetch(wpdemo_ajax_object.ajax_url, {
      method: 'POST',
      credentials: 'same-origin',
      body: new URLSearchParams(formData) + '&action=wpdemo_save_form'
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert('Данные успешно сохранены!');
        localStorage.removeItem('wpdemo_form_data');
        form.reset();
      } else {
        alert('Ошибка при сохранении данных');
      }
    });
  });
});

Шаг 2. Обработка AJAX-запроса в functions.php

Добавим PHP-функцию для сохранения данных в базу данных или в пользовательские метаданные.

add_action('wp_ajax_wpdemo_save_form', 'wpdemo_save_form_callback');
add_action('wp_ajax_nopriv_wpdemo_save_form', 'wpdemo_save_form_callback');
function wpdemo_save_form_callback() {
  // Проверка nonce, если используется
  // if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wpdemo_nonce')) {
  //   wp_send_json_error('Неверный запрос');
  // }

  $name = sanitize_text_field($_POST['name'] ?? '');
  $email = sanitize_email($_POST['email'] ?? '');
  $message = sanitize_textarea_field($_POST['message'] ?? '');

  if (empty($name) || empty($email) || empty($message)) {
    wp_send_json_error('Заполните все поля');
  }

  // Сохранение данных, например, в опции или в кастомной таблице
  $saved = update_option('wpdemo_form_data_' . md5($email), compact('name', 'email', 'message'));

  if ($saved) {
    wp_send_json_success();
  } else {
    wp_send_json_error('Ошибка при сохранении');
  }
}

Шаг 3. Подключение скрипта и локализация

В functions.php нужно подключить скрипт и передать URL AJAX:

function wpdemo_enqueue_scripts() {
  wp_enqueue_script('wpdemo-auto-save', get_template_directory_uri() . '/js/wpdemo-auto-save.js', ['jquery'], '1.0', true);
  wp_localize_script('wpdemo-auto-save', 'wpdemo_ajax_object', [
    'ajax_url' => admin_url('admin-ajax.php'),
  ]);
}
add_action('wp_enqueue_scripts', 'wpdemo_enqueue_scripts');

Выводы

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