WPForms: как сделать отсрочку отправки формы в WordPress

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

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

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

• Показать пользователю предупреждение и дать время отменить отправку.
• Выполнить дополнительные проверки или запросы к удалённым сервисам перед отправкой.
• Реализовать анимацию или таймер на стороне клиента перед отправкой.
• Избежать случайных двойных отправок формы.

В WPForms нет встроенного инструмента для отсрочки отправки, но с помощью кастомного кода и JavaScript это вполне реализуемо.

Отсрочка отправки формы WPForms на стороне клиента с JavaScript

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

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

function wpformslocal_delay_submit() {
  ?>
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.wpforms-form');
    if (!form) return;

    form.addEventListener('submit', function(e) {
      e.preventDefault(); // отменяем стандартную отправку

      if (form.dataset.submitting) return; // защита от повторной отправки
      form.dataset.submitting = 'true';

      // Показываем сообщение или анимацию
      alert('Форма отправится через 3 секунды. Отмена невозможна.');

      setTimeout(function() {
        form.removeEventListener('submit', arguments.callee); // убираем текущий обработчик
        form.submit(); // программно отправляем форму
      }, 3000);
    });
  });
  </script>
  <?php
}
add_action('wp_footer', 'wpformslocal_delay_submit');

В этом примере при нажатии кнопки отправки сначала показывается alert с сообщением, затем через 3 секунды форма отправляется. Если нужно более сложное окно с возможностью отмены, можно заменить alert на кастомное модальное окно.

Пояснения к коду

Мы используем событие submit на форме WPForms с классом wpforms-form. Отменяем стандартную отправку, включаем флаг отправки, чтобы избежать повторных кликов, показываем сообщение, ставим таймер, после которого снимаем обработчик и вызываем form.submit() для реальной отправки.

Обработка задержки отправки на стороне сервера

Иногда нужно не просто задержать отправку, а выполнить дополнительные проверки на сервере перед сохранением данных. Для этого можно использовать фильтры WPForms.

Например, фильтр wpforms_process_before_save позволяет прервать или изменить процесс сохранения данных.

Пример, который откладывает обработку на 5 секунд (имитация задержки):

function wpformslocal_delay_process($fields, $entry, $form_data) {
  sleep(5); // задержка 5 секунд
  return $fields;
}
add_filter('wpforms_process_before_save', 'wpformslocal_delay_process', 10, 3);

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

Примеры плагинов для расширения функционала WPForms с задержкой

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

• My Popup — позволяет показывать всплывающие окна перед отправкой, что можно использовать для подтверждения и задержки.
• Clearfy Pro — оптимизирует работу форм и добавляет дополнительные настройки, можно использовать для предотвращения двойных отправок.

Эти плагины можно интегрировать с WPForms для расширения контроля над процессом отправки.

Применение: отсрочка с возможностью отмены отправки

Рассмотрим более сложный пример с модальным окном и кнопками для подтверждения или отмены отправки.

function wpformslocal_confirm_submit() {
  ?>
  <style>
    #wpform-confirm-modal {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }
    #wpform-confirm-content {
      background: #fff;
      padding: 20px;
      border-radius: 5px;
      max-width: 400px;
      text-align: center;
    }
    #wpform-confirm-content button {
      margin: 10px;
      padding: 8px 16px;
    }
  </style>
  <div id="wpform-confirm-modal">
    <div id="wpform-confirm-content">
      <p>Вы уверены, что хотите отправить форму?</p>
      <button id="wpform-confirm-yes">Да, отправить</button>
      <button id="wpform-confirm-no">Отмена</button>
    </div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const form = document.querySelector('.wpforms-form');
      const modal = document.getElementById('wpform-confirm-modal');
      const btnYes = document.getElementById('wpform-confirm-yes');
      const btnNo = document.getElementById('wpform-confirm-no');

      if (!form) return;

      form.addEventListener('submit', function(e) {
        e.preventDefault();
        modal.style.display = 'flex';
      });

      btnYes.addEventListener('click', function() {
        modal.style.display = 'none';
        form.submit();
      });

      btnNo.addEventListener('click', function() {
        modal.style.display = 'none';
      });
    });
  </script>
  <?php
}
add_action('wp_footer', 'wpformslocal_confirm_submit');

Такой подход даёт пользователю возможность подтвердить или отменить отправку, а сама отправка происходит только после подтверждения.

Итоги и рекомендации

Отсрочка отправки формы в WPForms — это несложная задача, если использовать возможности JavaScript и фильтры WordPress. Главное — учитывать пользовательский опыт, не задерживать серверные операции и информировать пользователя.

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

Если хотите автоматизировать и оптимизировать формы, рекомендую ознакомиться с Clearfy Pro и My Popup на wpshop.ru.