Contact Form 7: как отключить автозаполнение полей формы

Почему автозаполнение полей в Contact Form 7 может быть нежелательным

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

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

Чтобы убедиться, что причина нежелательного поведения формы — именно автозаполнение, выполните следующие шаги:

• Откройте страницу с формой в режиме инкогнито браузера — там автозаполнение обычно отключено.
• Проверьте, сохраняются ли предыдущие введённые значения в полях при повторном открытии страницы в обычном режиме.
• Используйте инструменты разработчика, чтобы посмотреть, какие атрибуты autocomplete присутствуют у полей формы.

Пошаговое решение: отключаем автозаполнение в Contact Form 7

Contact Form 7 не имеет встроенного параметра для глобального отключения автозаполнения, но его можно реализовать вручную с помощью добавления атрибута autocomplete="off" к каждому полю формы и самому тегу form.

Шаг 1: Добавляем атрибут autocomplete в форму

Contact Form 7 позволяет добавлять дополнительные атрибуты к тегу form через фильтр wpcf7_form_attributes. Добавьте следующий код в файл functions.php вашей темы или в кастомный плагин:

add_filter('wpcf7_form_attributes', function($atts) {
    $atts['autocomplete'] = 'off';
    return $atts;
});

Шаг 2: Добавляем атрибут autocomplete="off" к каждому полю

CF7 не поддерживает добавление произвольных атрибутов сразу ко всем полям, но вы можете явно указать autocomplete="off" в тегах формы для каждого поля, например:

[text* your-name autocomplete:off]
[email* your-email autocomplete:off]
[tel your-phone autocomplete:off]

Если у вас много форм и полей, можно автоматизировать добавление атрибута к полям через JavaScript:

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select').forEach(function(el) {
        el.setAttribute('autocomplete', 'off');
    });
});

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

Чтобы убедиться, что автозаполнение отключено:

• Обновите страницу с формой в обычном режиме и в режиме инкогнито.
• Убедитесь, что браузер не подставляет ранее введённые значения в поля.
• В инструментах разработчика проверьте, что у тега form и у полей есть атрибут autocomplete="off".
• Попробуйте перезагрузить страницу и ввести значения заново — браузер не должен предлагать автозаполнение.

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

• Отсутствие атрибута autocomplete на форме
  Решение: обязательно добавьте атрибут autocomplete="off" к тегу form с помощью фильтра wpcf7_form_attributes.
• Атрибут autocomplete не добавлен к отдельным полям
  Решение: добавляйте autocomplete:off в теги полей Contact Form 7 или используйте JavaScript для массового добавления атрибута.
• Браузер игнорирует атрибуты autocomplete
  Решение: в некоторых браузерах (особенно Chrome) есть особенности с атрибутом autocomplete="off". Попробуйте задавать уникальные имена полям, использовать autocomplete="new-password" для паролей или менять имена полей динамически.

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

• Не отключайте автозаполнение для полей, где оно улучшает UX, например, email или телефон, если это не критично.
• Используйте уникальные имена полей, чтобы избежать конфликтов автозаполнения с другими формами.
• Добавляйте атрибуты autocomplete только там, где это действительно необходимо, чтобы не ухудшать общее взаимодействие пользователя с формой.
• Для повышения безопасности используйте Honeypot или reCAPTCHA, не полагаясь только на отключение автозаполнения.

Сравнение способов отключения автозаполнения в Contact Form 7