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

Проблема: форма Contact Form 7 не очищается после отправки

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

Такое поведение создаёт путаницу и может привести к повторной отправке одинаковых данных.

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

Чтобы проверить, что форма сохраняет данные, достаточно отправить форму с заполненными полями и посмотреть, остались ли данные в полях после успешной отправки. Если данные остались — форма не очищается.

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

Пошаговое решение: очистка формы после успешной отправки

1. Добавление кастомного JavaScript

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

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

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

2. Подключение скрипта в WordPress

Чтобы добавить этот код корректно, создайте небольшой JavaScript-файл, например, cf7-reset.js в папке вашей темы или дочерней темы. В файл добавьте приведённый выше код.

Затем подключите скрипт в functions.php вашей темы:

function enqueue_cf7_reset_script() {
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
        wp_enqueue_script( 'cf7-reset', get_stylesheet_directory_uri() . '/js/cf7-reset.js', array(), null, true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_cf7_reset_script' );

Убедитесь, что путь к файлу cf7-reset.js соответствует его расположению.

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

1. Обновите страницу с формой.
2. Заполните поля формы и отправьте.
3. Убедитесь, что после успешной отправки поля формы очищаются автоматически.
4. Проверьте консоль браузера на предмет ошибок JavaScript.

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

• Форма не очищается: убедитесь, что скрипт подключён и событие wpcf7mailsent срабатывает. Проверьте консоль браузера на ошибки.
• Ошибка в пути к скрипту: проверьте правильность пути в функции wp_enqueue_script.
• Конфликт с другими плагинами: временно деактивируйте остальные плагины, чтобы исключить конфликт JavaScript.

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

• Добавляйте кастомные скрипты минимально и по необходимости, чтобы не увеличивать время загрузки страницы.
• Проверяйте совместимость с другими плагинами и темой, особенно если они модифицируют форму Contact Form 7.
• Для более сложных сценариев очистки (например, сброс только определённых полей) расширяйте код, используя селекторы и методы DOM.

Альтернативные варианты реализации

Пример расширения: очистка только определённых полей

document.addEventListener( 'wpcf7mailsent', function( event ) {
    var form = event.target;
    // Очистка конкретных полей по id
    var fieldNames = ['your-name', 'your-email'];
    fieldNames.forEach(function(name) {
        var field = form.querySelector('[name="' + name + '"]');
        if(field) field.value = '';
    });
}, false );