Как добавить обратный отчет после отправки формы в WordPress

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

Зачем нужен обратный отчет после отправки формы в WordPress

Когда пользователь отправляет форму, особенно если это форма обратной связи, подписки или заказа, важно дать чёткий сигнал, что отправка прошла успешно. Вместо простого сообщения "Спасибо", часто полезно показать таймер обратного отчета, например, до автоматического перенаправления, закрытия всплывающего окна или повторной возможности отправки.

Такой подход помогает:

• Улучшить UX, показывая пользователю, что процесс не завис, а идет отсчет;
• Автоматизировать переходы или обновления страницы без действий пользователя;
• Предотвратить повторную отправку формы слишком быстро, если установлен таймаут.

Реализация обратного отчета через собственный JavaScript и AJAX

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

1. Создание формы с AJAX-отправкой

Вставьте в файл темы или плагина следующий HTML и JS код:

<form id="cyrtolat-form" action="" method="post">
  <input type="text" name="name" placeholder="Ваше имя" required>
  <input type="email" name="email" placeholder="Email" required>
  <button type="submit">Отправить</button>
</form>
<div id="cyrtolat-message" style="margin-top:15px; font-weight:bold;"></div>

<script>
document.getElementById('cyrtolat-form').addEventListener('submit', function(e) {
  e.preventDefault();
  var form = this;
  var formData = new FormData(form);
  var messageEl = document.getElementById('cyrtolat-message');

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/wp-admin/admin-ajax.php');
  xhr.onload = function() {
    if (xhr.status === 200) {
      messageEl.innerHTML = 'Спасибо за отправку! Перенаправление через <span id="countdown">5</span> секунд.';
      startCountdown(5);
      form.reset();
    } else {
      messageEl.innerHTML = 'Ошибка отправки, попробуйте позже.';
    }
  };
  formData.append('action', 'cyrtolat_handle_form');
  xhr.send(formData);
});

function startCountdown(seconds) {
  var countdownEl = document.getElementById('countdown');
  var interval = setInterval(function() {
    seconds--;
    countdownEl.textContent = seconds;
    if (seconds <= 0) {
      clearInterval(interval);
      window.location.href = '/thank-you'; // заменить на нужный URL
    }
  }, 1000);
}
</script>

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

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

add_action('wp_ajax_cyrtolat_handle_form', 'cyrtolat_handle_form');
add_action('wp_ajax_nopriv_cyrtolat_handle_form', 'cyrtolat_handle_form');

function cyrtolat_handle_form() {
  $name = sanitize_text_field($_POST['name'] ?? '');
  $email = sanitize_email($_POST['email'] ?? '');

  if (empty($name) || !is_email($email)) {
    wp_send_json_error('Некорректные данные');
  }

  // Здесь можно добавить логику сохранения данных, отправки письма и т.д.

  wp_send_json_success();
}

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

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

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

1. Плагин Contact Form 7 + дополнительный скрипт

Contact Form 7 — один из самых популярных плагинов для форм. Он не поддерживает таймеры по умолчанию, но можно добавить кастомный JavaScript, который сработает после успешной отправки.

Например, через событие wpcf7mailsent:

document.addEventListener( 'wpcf7mailsent', function( event ) {
  var messageEl = document.getElementById('cf7-message');
  messageEl.innerHTML = 'Спасибо! Перенаправление через <span id="cf7-countdown">5</span> секунд.';
  startCountdownCF7(5);
}, false );

function startCountdownCF7(seconds) {
  var countdownEl = document.getElementById('cf7-countdown');
  var interval = setInterval(function() {
    seconds--;
    countdownEl.textContent = seconds;
    if (seconds <= 0) {
      clearInterval(interval);
      window.location.href = '/thank-you';
    }
  }, 1000);
}

Добавьте элемент с id cf7-message рядом с формой, чтобы отображать сообщение.

2. Плагин WPForms с интегрированным таймером

WPForms Pro поддерживает различные хуки и скрипты, через которые можно добавить обратный отчет. В настройках можно указать редирект после отправки с задержкой, а через пользовательский JS дополнить визуальный таймер.

Пример добавления обратного отсчета в разделе подтверждения:

jQuery(document).ready(function($){
  var seconds = 5;
  var countdown = setInterval(function(){
    seconds--;
    $('#wpforms-confirmation-message').text('Перенаправление через ' + seconds + ' секунд.');
    if(seconds <= 0) {
      clearInterval(countdown);
      window.location.href = '/thank-you';
    }
  }, 1000);
});

Советы по улучшению UX с обратным отчетом в WordPress

При добавлении обратного отчета стоит учитывать несколько важных моментов:

• Обязательно информируйте пользователя, что происходит — текст с таймером должен быть заметным и понятным.
• Давайте возможность отменить редирект или закрыть сообщение, если пользователь хочет остаться на странице.
• В случае ошибок отправки формы показывайте отдельное сообщение без таймера.
• Используйте семантические и ARIA-атрибуты для доступности — чтобы обратный отчет был понятен и для пользователей с ограничениями.

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

Заключение

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

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