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

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

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

Автоматическое сохранение формы решает сразу несколько задач:

• Удобство пользователя. Данные сохраняются на сервере без лишних действий.
• Защита от потери данных. Если пользователь случайно закроет вкладку или произойдет сбой, данные останутся.
• Повышение конверсии. Пользователь с большей вероятностью завершит заполнение формы.

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

Подготовка формы и подключение скриптов jQuery

Для начала создадим простую HTML-форму в шаблоне WordPress или в плагине. В примере ниже форма содержит поля имени и email:

<form id="wpmax-auto-save-form">
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name" />
  <br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
</form>

Далее убедимся, что jQuery подключен в WordPress (он подключен по умолчанию). Добавим наш JavaScript, который будет отлавливать изменения в полях и отправлять их на сервер через AJAX.

JavaScript для автоматического сохранения

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

jQuery(document).ready(function($) {
  var saveTimer;
  $('#wpmax-auto-save-form input').on('input', function() {
    clearTimeout(saveTimer);
    saveTimer = setTimeout(function() {
      var data = {
        action: 'wpmax_save_form_data',
        nonce: wpmax_ajax_object.nonce,
        formData: $('#wpmax-auto-save-form').serialize()
      };
      $.post(wpmax_ajax_object.ajax_url, data, function(response) {
        console.log('Данные формы сохранены:', response);
      });
    }, 1000); // задержка 1 секунда
  });
});

Этот код слушает события input по всем полям формы и через 1 секунду после последнего изменения отправляет данные на сервер с помощью AJAX.

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

Теперь добавим PHP-код, который будет принимать и обрабатывать эти данные. Для безопасности используем check_ajax_referer и сохраняем данные, например, в сессии или пользовательских мета:

add_action('wp_ajax_wpmax_save_form_data', 'wpmax_save_form_data_callback');
add_action('wp_ajax_nopriv_wpmax_save_form_data', 'wpmax_save_form_data_callback');

function wpmax_save_form_data_callback() {
  check_ajax_referer('wpmax_nonce', 'nonce');

  if (empty($_POST['formData'])) {
    wp_send_json_error('Нет данных формы');
  }

  parse_str($_POST['formData'], $form_data);

  // Пример сохранения данных в сессии пользователя
  if (!session_id()) {
    session_start();
  }
  $_SESSION['wpmax_form_data'] = $form_data;

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

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

Восстановление данных формы при загрузке страницы

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

add_action('wp_footer', 'wpmax_restore_form_data_script');
function wpmax_restore_form_data_script() {
  if (!session_id()) {
    session_start();
  }
  $saved_data = isset($_SESSION['wpmax_form_data']) ? $_SESSION['wpmax_form_data'] : array();
  ?>
  <script type="text/javascript">
  jQuery(document).ready(function($) {
    var savedData = <?php echo json_encode($saved_data); ?>;
    for (var key in savedData) {
      $('#wpmax-auto-save-form [name="' + key + '"]').val(savedData[key]);
    }
  });
  </script>
  <?php
}

Этот скрипт на PHP добавляет JavaScript в футер страницы, который заполняет поля формы сохранёнными значениями.

Использование плагина для упрощения работы с сохранением данных

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

Преимущества готовых решений:

• Настраиваемые автосохранения и восстановление форм.
• Интеграция с популярными плагинами форм (Contact Form 7, Gravity Forms и др.).
• Продвинутые настройки безопасности и производительности.

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

Резюме: как построить надёжное автосохранение формы в WordPress

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

1. Создать форму с уникальным ID.
2. Добавить JavaScript, который слушает изменения и отправляет данные через AJAX с проверкой nonce.
3. Написать PHP-функцию для обработки запроса и сохранения данных (в сессию, базу данных или пользовательские мета).
4. Добавить скрипт для восстановления данных из сохранённого источника при загрузке страницы.
5. При необходимости использовать готовые плагины для расширения функционала.

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

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