wpforms.ru wordpress WPForms.ru

Как создать отложенную отправку формы в WPForms с помощью хуков и JavaScript

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

Что такое отложенная отправка и зачем она нужна в WPForms

По умолчанию WPForms отправляет форму сразу после нажатия кнопки «Отправить». Но иногда это не подходит, например:

  • Необходимо отправить уведомление или обработать данные через несколько минут после заполнения формы.
  • Требуется проверить дополнительные условия на сервере или дождаться внешнего события.
  • Хотим избежать нагрузки на сервер и обработать формы пакетно.

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

Основные подходы для реализации отложенной отправки в WPForms

Рассмотрим два основных способа реализации отложенной отправки:

1. Сохранение данных формы, отмена отправки и последующая обработка через cron или wp_schedule_event

В этом варианте мы перехватываем момент отправки, сохраняем данные (например, в пользовательских таблицах или опциях), отменяем стандартную отправку, а потом по расписанию обрабатываем эти данные и отправляем уведомления.

Минус — сложнее реализовать мгновенную обратную связь пользователю и нужно настраивать cron.

2. Использование JavaScript для задержки отправки и отправка формы через AJAX после таймера

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

Минусы — сложнее в обработке ошибок и нужно предусмотреть отмену отправки, если пользователь уходит со страницы.

Реализация отложенной отправки с помощью хука wpforms_process_before и wp_schedule_single_event

Для примера реализуем вариант с сохранением данных и отложенной отправкой по cron. Сначала перехватим отправку формы и сохраним данные:

add_action('wpforms_process_before', 'wpformsru_delay_form_submission', 10, 3);function wpformsru_delay_form_submission($fields, $entry, $form_data) {    // Сохраняем данные формы в опцию для примера    $saved = get_option('wpformsru_delayed_submissions', []);    $saved[] = [        'form_id' => $form_data['id'],        'fields' => $fields,        'entry' => $entry,        'time' => time()    ];    update_option('wpformsru_delayed_submissions', $saved);    // Отменяем стандартную отправку формы    wpforms()->process->errors[ $form_data['id'] ] = ['form' => 'Спасибо! Ваши данные приняты и будут обработаны.'];    // Останавливаем дальнейшую обработку    wp_die();}

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

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

add_action('wpformsru_delayed_submission_send', 'wpformsru_send_delayed_submissions');function wpformsru_send_delayed_submissions() {    $saved = get_option('wpformsru_delayed_submissions', []);    if (empty($saved)) {        return;    }    foreach ($saved as $key => $submission) {        // Здесь реализуйте отправку email или другую обработку данных        $to = get_option('admin_email');        $subject = 'Отложенная отправка формы #' . $submission['form_id'];        $message = 'Данные формы: ' . print_r($submission['fields'], true);        wp_mail($to, $subject, $message);        // Удаляем обработанную запись        unset($saved[$key]);    }    update_option('wpformsru_delayed_submissions', $saved);}

Для планирования задачи используем:

if (!wp_next_scheduled('wpformsru_delayed_submission_send')) {    wp_schedule_event(time() + 300, 'hourly', 'wpformsru_delayed_submission_send');}

В данном примере задача запустится через 5 минут и будет повторяться каждый час. Для точной разовой отправки можно использовать wp_schedule_single_event.

Отложенная отправка через JavaScript с таймером и AJAX

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

Пример скрипта:

document.addEventListener('DOMContentLoaded', function() {    const form = document.querySelector('.wpforms-form');    if (!form) return;    form.addEventListener('submit', function(e) {        e.preventDefault();        const delay = 5000; // задержка 5 секунд        alert('Форма будет отправлена через 5 секунд');        setTimeout(() => {            const formData = new FormData(form);            fetch(form.action, {                method: 'POST',                body: formData,                credentials: 'same-origin'            }).then(response => response.text())            .then(data => {                console.log('Форма успешно отправлена');                alert('Спасибо! Форма отправлена.');            }).catch(() => {                alert('Ошибка отправки формы');            });        }, delay);    });});

Этот способ более интерактивен, но требует доработки для обработки ошибок и UX.

Советы по интеграции с WPShop и плагинами

Для расширенной автоматизации можно использовать WPShop плагин Clearfy Pro, который оптимизирует работу WordPress и может помочь с управлением cron задачами и кэшированием.

Также для визуализации таймеров и уведомлений можно использовать My Popup, чтобы показывать пользователю сообщения с обратным отсчётом перед отправкой.

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

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

Не забывайте тестировать все сценарии: отмену отправки, повторные попытки, ошибки сервера и уведомления пользователей.

×

Время действовать!

Суперцены на
WordPress!

-20%
на премиум темы

Не упусти шанс ⋙