Contact Form 7: автоматическое очищение формы после успешной отправки с помощью JavaScript

Почему важно очищать форму после отправки в Contact Form 7?

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

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

Проверьте, что после успешной отправки формы в Contact Form 7 поля остаются заполненными. Для этого:

• Отправьте форму на тестовом сайте.
• После появления сообщения об успешной отправке обратите внимание на состояние полей.
• Если поля не очищаются, значит стандартного поведения Contact Form 7 недостаточно.

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

Пошаговое решение: очищение формы с помощью JavaScript

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

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

document.addEventListener('wpcf7mailsent', function(event) {
    var form = event.target;
    form.reset();
}, false);

Этот код слушает событие успешной отправки формы и вызывает метод reset(), который очищает все поля формы.

Подключение скрипта через functions.php

Если хотите подключить отдельный скрипт, создайте файл cf7-clear.js с кодом выше и добавьте в functions.php:

function cf7_clear_form_scripts() {
    if (is_page() && function_exists('wpcf7_contact_form')) {
        wp_enqueue_script('cf7-clear', get_stylesheet_directory_uri() . '/js/cf7-clear.js', ['contact-form-7'], '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'cf7_clear_form_scripts');

Проверка результата после внедрения

• Откройте страницу с формой Contact Form 7.
• Заполните и отправьте форму.
• После успешной отправки поля должны очиститься автоматически.
• Если поля не очистились, проверьте консоль браузера на наличие ошибок JavaScript.

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

• Скрипт не работает или событие не срабатывает: убедитесь, что Contact Form 7 подключен и работает, а событие wpcf7mailsent не блокируется другими плагинами.
• Форма не очищается, если используется AJAX с кастомными обработчиками: возможно, ваш кастомный скрипт перезаписывает стандартное поведение. Проверьте порядок подключения скриптов.
• Очистка формы приводит к удалению данных, которые должны сохраняться: если в форме есть поля с автозаполнением (например, UTM-метки), их нужно восстанавливать после очистки.

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

• Не добавляйте лишних обработчиков событий на каждую форму, используйте делегирование или более универсальные слушатели.
• Проверяйте совместимость с кеширующими плагинами — иногда они мешают корректной работе скриптов Contact Form 7.
• Если у вас много форм на странице, убедитесь, что очистка работает для каждой из них, используя event.target для точечного сброса.

Сравнение способов очистки формы Contact Form 7