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

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

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

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

Кроме того, для сайтов с большими формами (например, опросы, анкеты, заявки) автосохранение позволяет пользователю прервать заполнение и продолжить позже, не начиная всё заново.

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

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

AJAX позволяет отправлять данные на сервер в фоновом режиме без перезагрузки страницы. В WordPress для этого обычно используется встроенный объект wp_ajax.

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

Важно использовать wp_localize_script для передачи URL обработки AJAX-запросов и nonce для безопасности.

Пример: базовая форма с автосохранением

Создадим простую форму с полями "Имя" и "Комментарий" и добавим автосохранение.

<form id="wpdesk_autosave_form">
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name" />
  <br />
  <label for="comment">Комментарий:</label>
  <textarea id="comment" name="comment"></textarea>
</form>

JavaScript с AJAX для автосохранения

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

jQuery(document).ready(function($) {
  let timer;
  $('#wpdesk_autosave_form input, #wpdesk_autosave_form textarea').on('input', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      const data = {
        action: 'wpdesk_autosave_save',
        nonce: wpdesk_autosave.nonce,
        name: $('#name').val(),
        comment: $('#comment').val()
      };

      $.post(wpdesk_autosave.ajax_url, data, function(response) {
        if(response.success) {
          console.log('Данные успешно сохранены');
        } else {
          console.log('Ошибка сохранения данных');
        }
      });
    }, 2000);
  });

  // При загрузке страницы загружаем ранее сохранённые данные
  $.post(wpdesk_autosave.ajax_url, { action: 'wpdesk_autosave_load', nonce: wpdesk_autosave.nonce }, function(response) {
    if(response.success) {
      $('#name').val(response.data.name);
      $('#comment').val(response.data.comment);
    }
  });
});

Обработка AJAX-запросов в PHP

Добавим функции для сохранения и загрузки данных. В примере данные сохраняются в пользовательские метаполя (user meta) текущего залогиненного пользователя. Для гостей можно использовать сессии или куки.

add_action('wp_ajax_wpdesk_autosave_save', 'wpdesk_autosave_save_callback');
add_action('wp_ajax_wpdesk_autosave_load', 'wpdesk_autosave_load_callback');

function wpdesk_autosave_save_callback() {
  check_ajax_referer('wpdesk_autosave_nonce', 'nonce');

  $user_id = get_current_user_id();
  if (!$user_id) {
    wp_send_json_error('Требуется авторизация');
  }

  $name = isset($_POST['name']) ? sanitize_text_field($_POST['name']) : '';
  $comment = isset($_POST['comment']) ? sanitize_textarea_field($_POST['comment']) : '';

  update_user_meta($user_id, '_wpdesk_autosave_name', $name);
  update_user_meta($user_id, '_wpdesk_autosave_comment', $comment);

  wp_send_json_success();
}

function wpdesk_autosave_load_callback() {
  check_ajax_referer('wpdesk_autosave_nonce', 'nonce');

  $user_id = get_current_user_id();
  if (!$user_id) {
    wp_send_json_error('Требуется авторизация');
  }

  $name = get_user_meta($user_id, '_wpdesk_autosave_name', true);
  $comment = get_user_meta($user_id, '_wpdesk_autosave_comment', true);

  wp_send_json_success([ 'name' => $name, 'comment' => $comment ]);
}

Подключение скриптов и локализация параметров

Для работы JavaScript нужно зарегистрировать и подключить скрипт, а также передать параметры AJAX и nonce. Добавьте следующий код в functions.php или в плагин:

function wpdesk_autosave_enqueue_scripts() {
  wp_enqueue_script('wpdesk-autosave', get_template_directory_uri() . '/js/wpdesk-autosave.js', ['jquery'], '1.0', true);

  wp_localize_script('wpdesk-autosave', 'wpdesk_autosave', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wpdesk_autosave_nonce')
  ]);
}
add_action('wp_enqueue_scripts', 'wpdesk_autosave_enqueue_scripts');

Как адаптировать автосохранение для других сценариев

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

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

Также можно интегрировать автосохранение с плагинами, например, с Clearfy Pro, чтобы оптимизировать работу сайта и повысить безопасность AJAX-запросов.

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

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

Используйте nonce для защиты от CSRF, валидируйте и санитайзите данные на сервере, а также учитывайте сценарии для неавторизованных пользователей.

Внедрение данной технологии позволит сделать ваши формы более надёжными и удобными для пользователей.