Contact Form 7: отмена отправки формы и возврат к редактированию

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

Зачем нужна отмена отправки в Contact Form 7

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

По умолчанию Contact Form 7 не поддерживает отмену отправки, так как эта функция требует сохранения состояния формы и управления процессом отправки на стороне клиента.

Рассмотрим, как можно реализовать отмену отправки с возвратом к редактированию с помощью JavaScript и хуков Contact Form 7.

Реализация отмены отправки формы

1. Подключение скрипта отмены

Для начала нам понадобится JavaScript, который будет отслеживать событие отправки и предоставлять кнопку «Отмена» в момент подтверждения отправки.

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

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.wpcf7 form').forEach(function(form) {
        let isSending = false;

        // Кнопка отмены создания динамически
        const cancelBtn = document.createElement('button');
        cancelBtn.type = 'button';
        cancelBtn.textContent = 'Отменить отправку';
        cancelBtn.style.display = 'none';
        cancelBtn.style.marginLeft = '10px';

        // Добавляем кнопку рядом с кнопкой отправки
        const submitBtn = form.querySelector('input[type="submit"]');
        if (submitBtn) {
            submitBtn.parentNode.insertBefore(cancelBtn, submitBtn.nextSibling);
        }

        cancelBtn.addEventListener('click', function () {
            if (isSending) {
                isSending = false;
                cancelBtn.style.display = 'none';
                submitBtn.disabled = false;
                // Можно добавить кастомные действия, например, скрыть индикатор загрузки
            }
        });

        form.addEventListener('submit', function (e) {
            if (isSending) {
                // Если уже отправляем, то блокируем повторную отправку
                e.preventDefault();
                return;
            }

            // Показываем кнопку отмены
            isSending = true;
            cancelBtn.style.display = 'inline-block';
            submitBtn.disabled = true;
        });
    });
});

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

2. Обработка отмены отправки на уровне Contact Form 7

Contact Form 7 отправляет данные через AJAX, и отменить отправку можно, прервав запрос. Для этого можно расширить скрипт, отменяя AJAX-запрос при нажатии «Отменить».

Пример с использованием jQuery (устанавливается с WordPress):

jQuery(document).ready(function($) {
    $('.wpcf7 form').each(function() {
        var xhr = null;
        var form = $(this);

        var cancelBtn = $('<button type="button" style="display:none; margin-left:10px;">Отменить отправку</button>');
        var submitBtn = form.find('input[type="submit"]');
        submitBtn.after(cancelBtn);

        cancelBtn.on('click', function() {
            if (xhr) {
                xhr.abort(); // прерываем AJAX-запрос
                xhr = null;
                cancelBtn.hide();
                submitBtn.prop('disabled', false);
                form.find('.ajax-loader').hide();
            }
        });

        form.on('submit', function(e) {
            if (xhr) {
                e.preventDefault();
                return false;
            }

            submitBtn.prop('disabled', true);
            cancelBtn.show();

            // Перехватываем AJAX-запрос
            xhr = $.ajax({
                url: wpcf7.apiSettings.apiUrl + 'contact-forms/' + wpcf7.getId(form) + '/feedback',
                type: 'POST',
                data: form.serialize(),
                beforeSend: function() {
                    form.find('.ajax-loader').show();
                },
                success: function(response) {
                    // Обработка успешной отправки
                    cancelBtn.hide();
                    submitBtn.prop('disabled', false);
                    xhr = null;
                },
                error: function(jqXHR, textStatus) {
                    if (textStatus === 'abort') {
                        alert('Отправка формы была отменена.');
                    } else {
                        alert('Произошла ошибка при отправке формы.');
                    }
                    cancelBtn.hide();
                    submitBtn.prop('disabled', false);
                    xhr = null;
                },
                complete: function() {
                    form.find('.ajax-loader').hide();
                }
            });

            e.preventDefault();
            return false;
        });
    });
});

Обратите внимание, что этот код требует подключения jQuery, который по умолчанию есть в WordPress, и API Contact Form 7.

Обработка состояния формы и UX улучшения

Чтобы улучшить пользовательский опыт, можно сохранить введённые данные при отмене отправки. Contact Form 7 уже сохраняет данные в полях, если отправка не удалась, но при отмене AJAX-запроса они не теряются.

Рекомендуется добавить индикатор загрузки, который исчезает при отмене, и подсказки для пользователя, чтобы было понятно, что отправка приостановлена.

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

Варианты расширения функционала с помощью плагинов

Если вы не хотите писать скрипты самостоятельно, можно рассмотреть плагины для Contact Form 7, которые расширяют контроль над отправкой:

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

Подключение таких плагинов может существенно упростить задачу и добавить дополнительные удобства для пользователя.

Заключение

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

Подобный подход помогает повысить удобство для пользователей и снизить количество ошибок при заполнении форм. Рекомендуется тщательно тестировать решения и, при необходимости, использовать готовые расширения из WPShop, чтобы обеспечить стабильную и удобную работу на сайте.