Отложенная отправка формы — востребованная функция, когда нужно, чтобы данные формы не отправлялись сразу после нажатия кнопки, а, например, через заданное время или после дополнительного подтверждения. В стандартном WPForms такой функционал отсутствует, но с помощью кастомного кода и небольших хитростей можно реализовать отложенную отправку формы.
Почему нужна отложенная отправка в WPForms
Отложенная отправка полезна для нескольких сценариев:
- Проверка данных пользователем перед финальной отправкой.
- Добавление паузы для сбора дополнительной информации или подтверждения.
- Уменьшение нагрузки на сервер, когда формы отправляются партиями.
- Реализация сложной логики сбора данных и интеграция с внешними сервисами.
WPForms не предлагает готовых настроек для этого, поэтому разберём, как добавить отложенную отправку через JavaScript и PHP.
Реализация отложенной отправки: общий подход
Основная идея — перехватить событие отправки формы, отменить его, запустить таймер, а после истечения времени — отправить данные вручную через AJAX или стандартную отправку.
Мы создадим скрипт, который будет реагировать на нажатие кнопки отправки, блокировать её, показывать таймер, а затем автоматически отправлять форму.
1. Подключение пользовательского скрипта к WPForms
Добавьте следующий код в functions.php вашей темы или в кастомный плагин для подключения JS:
function wpformsru_enqueue_delay_script() {
if ( is_page() ) { // или условие для нужной страницы с формой
wp_enqueue_script( 'wpformsru-delay-submit', get_stylesheet_directory_uri() . '/js/wpforms-delay-submit.js', array('jquery'), '1.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'wpformsru_enqueue_delay_script' );
Создайте файл wpforms-delay-submit.js в папке вашей темы js с содержимым ниже.
2. JavaScript для отложенной отправки
jQuery(document).ready(function($) {
var delaySeconds = 10; // время задержки в секундах
$(document).on('submit', 'form.wpforms-form', function(e) {
var form = $(this);
if (!form.data('delay-submitted')) {
e.preventDefault(); // отменяем отправку
if (form.find('.wpformsru-delay-info').length === 0) {
form.prepend('<div class="wpformsru-delay-info" style="color: red; font-weight: bold; margin-bottom: 10px;">Форма будет отправлена через ' + delaySeconds + ' секунд...</div>');
}
var counter = delaySeconds;
var interval = setInterval(function() {
counter--;
form.find('.wpformsru-delay-info').text('Форма будет отправлена через ' + counter + ' секунд...');
if (counter <= 0) {
clearInterval(interval);
form.data('delay-submitted', true);
form.submit(); // повторно отправляем форму
}
}, 1000);
}
});
});
Этот скрипт отслеживает отправку формы WPForms, отменяет её, выводит таймер и автоматически отправляет форму через 10 секунд. Для изменения времени задержки достаточно поменять значение delaySeconds.
Обработка отправки на PHP стороне
Так как форма отправляется стандартным методом после задержки, дополнительных действий на сервере делать не нужно. Однако, можно добавить фильтр для логирования или уведомления, что форма была отправлена с задержкой.
Пример хука для фиксации задержки
function wpformsru_log_delayed_submission( $fields, $entry, $form_data ) {
if ( isset( $_POST['wpformsru_delay_flag'] ) ) {
error_log( 'Форма ID ' . $form_data['id'] . ' отправлена с задержкой' );
}
return $fields;
}
add_filter( 'wpforms_process_filter', 'wpformsru_log_delayed_submission', 10, 3 );
Чтобы задать этот флаг, можно модифицировать JS, добавив скрытое поле в форму перед отправкой:
form.append('<input type="hidden" name="wpformsru_delay_flag" value="1" />');
Альтернативные плагины для отложенной отправки форм
Если вы не хотите писать код, можно рассмотреть плагины с расширенными возможностями отправки:
- My Popup — можно настроить всплывающие формы с задержкой и условной логикой.
- Clearfy Pro — мощный инструмент оптимизации и управления формами, включая контроль отправки.
Однако, ни один из этих плагинов не предоставляет готовую функцию именно отложенной отправки, поэтому кастомный код остаётся оптимальным решением.
Расширение функционала: подтверждение перед отправкой
Можно добавить дополнительный этап подтверждения от пользователя после таймера. Для этого изменим JS, чтобы показывать кнопку «Подтвердить отправку» после отсчёта:
jQuery(document).ready(function($) {
var delaySeconds = 10;
$(document).on('submit', 'form.wpforms-form', function(e) {
var form = $(this);
if (!form.data('delay-submitted')) {
e.preventDefault();
if (form.find('.wpformsru-delay-info').length === 0) {
form.prepend('<div class="wpformsru-delay-info" style="color: blue; font-weight: bold; margin-bottom: 10px;">Подтвердите отправку после ' + delaySeconds + ' секунд</div>');
form.prepend('<button type="button" class="wpformsru-confirm-btn" disabled style="margin-bottom:10px;">Подтвердить отправку</button>');
}
var counter = delaySeconds;
var interval = setInterval(function() {
counter--;
form.find('.wpformsru-delay-info').text('Подтвердите отправку после ' + counter + ' секунд');
if (counter <= 0) {
clearInterval(interval);
form.find('.wpformsru-confirm-btn').prop('disabled', false);
form.find('.wpformsru-delay-info').text('Теперь можно подтвердить отправку');
}
}, 1000);
}
});
$(document).on('click', '.wpformsru-confirm-btn', function() {
var form = $(this).closest('form');
form.data('delay-submitted', true);
$(this).prop('disabled', true).hide();
form.find('.wpformsru-delay-info').hide();
form.submit();
});
});
Теперь пользователь видит кнопку для подтверждения отправки, которая становится активной после задержки.
Итоговые рекомендации по отложенной отправке в WPForms
Отложенная отправка — не тривиальная задача, но её реализация в WPForms возможна с помощью JavaScript и стандартных хуков WordPress. Такой подход гибкий, не требует сторонних плагинов и позволяет подстроить логику под конкретные задачи.
Обязательно тестируйте функционал на всех устройствах и браузерах, чтобы избежать конфликтов с другими скриптами и плагинами.
Если у вас есть задачи по автоматизации или кастомизации форм, рассмотрите также дополнения из каталога WPSHOP, где вы найдете полезные инструменты для улучшения работы с WPForms и WordPress.