Contact Form 7: как избежать повторной отправки формы при обновлении страницы

Проблема: повторная отправка формы при обновлении страницы

При использовании Contact Form 7 многие сталкиваются с ситуацией, когда после успешной отправки формы пользователь обновляет страницу, и форма повторно отправляется. Это ведёт к дублированию заявок, спаму и негативно влияет на пользовательский опыт.

Почему возникает повторная отправка?

Повторная отправка происходит из-за того, что браузер пытается заново выполнить POST-запрос при обновлении страницы, на которой находилась отправленная форма. По умолчанию Contact Form 7 не перенаправляет пользователя на новую страницу после отправки, а просто отображает сообщение об успехе на той же странице.

Диагностика проблемы

• Отправьте форму Contact Form 7 на тестовом сайте.
• На странице с подтверждением отправки нажмите клавишу F5 или кнопку обновления браузера.
• Если форма повторно отправляется и заявка дублируется (проверяется по почте, базе или логам), значит проблема актуальна.
• Включите логирование почты или используйте плагин для сохранения заявок (например, Flamingo), чтобы убедиться в дублировании данных.

Пошаговое решение: реализуем Post/Redirect/Get (PRG) паттерн

Главная идея — после успешной отправки формы перенаправлять пользователя на страницу подтверждения или на ту же страницу с параметром, чтобы избежать повторной отправки POST-запроса при обновлении.

Шаг 1. Добавляем редирект после успешной отправки

Contact Form 7 не поддерживает редирект из коробки, но мы можем использовать JavaScript-событие wpcf7mailsent для перенаправления:

document.addEventListener('wpcf7mailsent', function(event) {
    window.location.href = window.location.href.split('?')[0] + '?sent=1';
}, false);

Этот код можно добавить в файл functions.php вашей темы через wp_enqueue_script, либо в кастомный JS-файл, подключённый на нужной странице:

function cf7_redirect_script() {
    if (is_page('kontakt')) { // заменить на ID или слаг страницы с формой
        wp_add_inline_script('contact-form-7', "document.addEventListener('wpcf7mailsent', function(event) { window.location.href = window.location.href.split('?')[0] + '?sent=1'; }, false);");
    }
}
add_action('wp_enqueue_scripts', 'cf7_redirect_script');

Шаг 2. Создаём сообщение об успешной отправке на основе GET-параметра

Добавьте в шаблон страницы проверку параметра sent=1 и выводите сообщение:

if (isset($_GET['sent']) && $_GET['sent'] == '1') {
    echo '<div class="cf7-success-message">Спасибо! Ваша заявка успешно отправлена.</div>';
}

Шаг 3. Очистка формы после редиректа

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

Проверка результата

• Отправьте форму на странице с добавленным скриптом.
• После отправки браузер должен перенаправить на URL с параметром ?sent=1.
• Появится сообщение об успешной отправке.
• Обновите страницу — дублирование заявок не произойдёт, так как браузер делает GET-запрос.

Частые ошибки и их исправление

• Редирект не работает: убедитесь, что скрипт подключается после Contact Form 7, проверьте консоль браузера на ошибки JS.
• Сообщение не отображается: проверьте, что проверка GET-параметра встроена в шаблон страницы с формой.
• Форма не очищается после отправки: если редирект не происходит, форма остаётся заполненной. Проверьте правильность URL в скрипте.
• Множественные формы на странице: если их несколько, скрипт можно модифицировать, чтобы редирект происходил только для определённой формы с помощью event.detail.contactFormId.

Практические советы по безопасности и производительности

• Не храните подтверждения отправки в сессиях или базе без явной необходимости — это создаёт нагрузку и сложность.
• Используйте AJAX отправку с Contact Form 7 для улучшения UX, но комбинируйте с PRG, чтобы избежать повторных POST.
• Следите за тем, чтобы редирект не создавал бесконечные циклы, проверяя наличие нужного параметра.
• Для более гибкой работы с формами можно использовать сторонние расширения, но встроенный JS-редирект — самый лёгкий и надёжный способ.

Сравнение вариантов решения проблемы