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

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

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

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

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

Основные шаги реализации автоматического сохранения формы через AJAX

Чтобы реализовать автоматическое сохранение, нужно:

• Создать HTML-форму на странице.
• Написать JavaScript-код, который будет отслеживать изменения и отправлять AJAX-запросы.
• Обработать AJAX-запрос на стороне сервера (WordPress) и сохранить данные, например, во временные метаданные пользователя или в специальную таблицу.
• Добавить механизмы безопасности: nonce для проверки запросов, проверку прав пользователя.

Пример простой HTML-формы для тикета

В качестве примера создадим форму для создания тикета с полями «Тема» и «Описание».

<form id="wpticket-save-form">
  <label for="wpticket_subject">Тема:</label>
  <input type="text" id="wpticket_subject" name="wpticket_subject" />

  <label for="wpticket_description">Описание:</label>
  <textarea id="wpticket_description" name="wpticket_description"></textarea>

  <input type="submit" value="Отправить" />
</form>

JavaScript: отправка данных формы по таймеру с помощью AJAX

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

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('wpticket-save-form');
  const nonce = wpticket_ajax_object.nonce; // nonce, переданный из PHP

  function wpticket_saveFormData() {
    const subject = document.getElementById('wpticket_subject').value;
    const description = document.getElementById('wpticket_description').value;

    const data = new FormData();
    data.append('action', 'wpticket_autosave');
    data.append('nonce', nonce);
    data.append('subject', subject);
    data.append('description', description);

    fetch(wpticket_ajax_object.ajax_url, {
      method: 'POST',
      credentials: 'same-origin',
      body: data
    })
    .then(response => response.json())
    .then(json => {
      if(json.success) {
        console.log('Данные сохранены автоматически');
      } else {
        console.error('Ошибка сохранения:', json.data);
      }
    })
    .catch(error => console.error('Ошибка AJAX:', error));
  }

  setInterval(wpticket_saveFormData, 30000); // каждые 30 секунд
});

Этот скрипт использует объект wpticket_ajax_object, который должен быть добавлен из PHP с параметрами AJAX URL и nonce для безопасности.

Обработка AJAX-запроса на стороне WordPress

В файле functions.php вашей темы или в плагине добавьте следующий код для обработки AJAX-запроса:

add_action('wp_ajax_wpticket_autosave', 'wpticket_handle_autosave');
add_action('wp_ajax_nopriv_wpticket_autosave', 'wpticket_handle_autosave');

function wpticket_handle_autosave() {
  check_ajax_referer('wpticket_nonce', 'nonce');

  $subject = isset($_POST['subject']) ? sanitize_text_field($_POST['subject']) : '';
  $description = isset($_POST['description']) ? sanitize_textarea_field($_POST['description']) : '';

  if(empty($subject) && empty($description)) {
    wp_send_json_error('Пустые данные');
  }

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

  // Сохраняем данные в user meta временно
  update_user_meta($user_id, '_wpticket_autosave', [
    'subject' => $subject,
    'description' => $description,
    'timestamp' => current_time('mysql')
  ]);

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

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

Добавление локализации скрипта с nonce и AJAX URL

Чтобы передать nonce и URL AJAX в JavaScript, добавьте в functions.php:

function wpticket_enqueue_scripts() {
  wp_enqueue_script('wpticket-autosave', get_template_directory_uri() . '/js/wpticket-autosave.js', ['jquery'], null, true);
  wp_localize_script('wpticket-autosave', 'wpticket_ajax_object', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wpticket_nonce')
  ]);
}
add_action('wp_enqueue_scripts', 'wpticket_enqueue_scripts');

Как расширить функционал автоматического сохранения формы

Вы можете улучшить систему, добавив:

• Сохранение данных при каждом изменении поля с дебаунсом (например, 1-2 секунды после ввода).
• Восстановление данных при загрузке страницы — подгружать сохранённое содержимое из user_meta и подставлять в форму.
• Поддержку нескольких форм и типов данных, используя разные ключи сохранения.
• Логику для удаления устаревших черновиков.
• Интеграцию с плагинами, например, с Clearfy Pro для оптимизации запросов и безопасности.

Выводы и рекомендации

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

Используйте nonce и проверяйте права доступа для безопасности. Для удобства пользователей добавляйте восстановление данных при загрузке страницы. Такая система особенно важна на сайтах с тикетами, заявками и формами обратной связи.

Если нужны готовые решения и оптимизация, обратите внимание на Clearfy Pro и другие инструменты из WPShop.