Как отключить автозаполнение формы в браузере

Почему важно управлять автозаполнением форм в WPForms

Автозаполнение форм браузером часто удобно для пользователя, но в некоторых случаях может создавать проблемы: нежелательное сохранение личных данных, некорректное заполнение полей, нарушение UX, особенно для динамических или многошаговых форм. WPForms по умолчанию не предоставляет опций для полного контроля автозаполнения, поэтому нужно применять кастомные методы.

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

Если вы замечаете, что браузер автоматически заполняет поля формы WPForms, хотя хотите этого избежать, проверьте следующие моменты:

• Используется ли стандартный атрибут autocomplete в HTML-коде формы или отдельных полей?
• Какие значения атрибута name у полей? Браузеры ориентируются именно на них.
• Появляется ли автозаполнение во всех браузерах или только в конкретных (Chrome, Firefox, Safari)?

Откройте инструменты разработчика и проверьте разметку формы — обычно WPForms не добавляет autocomplete="off" по умолчанию.

Пошаговое решение: как отключить автозаполнение в WPForms

1. Добавление атрибута autocomplete="off" к форме

WPForms позволяет добавить атрибуты через фильтр wpforms_frontend_form_attributes. Чтобы отключить автозаполнение, добавим атрибут autocomplete="off" ко всей форме:

add_filter('wpforms_frontend_form_attributes', function($attr, $form_data) {
    $attr['autocomplete'] = 'off';
    return $attr;
}, 10, 2);

2. Отключение автозаполнения у отдельных полей

Некоторые браузеры игнорируют атрибут autocomplete="off" для формы целиком, но уважают его на уровне полей. Для этого можно применить фильтр wpforms_field_properties:

add_filter('wpforms_field_properties', function($properties, $field, $form_data) {
    // список типов полей, для которых отключаем автозаполнение
    $fields_to_disable = ['text', 'email', 'password', 'number'];
    if (in_array($field['type'], $fields_to_disable)) {
        $properties['input']['attr']['autocomplete'] = 'off';
    }
    return $properties;
}, 10, 3);

3. Изменение атрибутов name и id для обхода автозаполнения

Браузеры часто используют атрибуты name для распознавания поля. Если поля имеют стандартные имена, автозаполнение активируется. Можно добавить префикс или изменить их динамически:

add_filter('wpforms_field_properties', function($properties, $field, $form_data) {
    if (isset($properties['input']['attr']['name'])) {
        $properties['input']['attr']['name'] = 'noautocomplete_' . $properties['input']['attr']['name'];
    }
    return $properties;
}, 20, 3);

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

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

• Очистите кэш браузера и попробуйте открыть форму в режиме инкогнито.
• Проверьте, что поля не автозаполняются автоматически при вводе данных.
• Используйте инструменты разработчика, чтобы убедиться, что к тегам формы и полей добавлен атрибут autocomplete="off".
• Проверьте работу формы в разных браузерах (Chrome, Firefox, Safari).

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

• Атрибут autocomplete установлен на off, но автозаполнение всё равно работает
  Решение: браузеры игнорируют autocomplete="off" в некоторых случаях. Нужно добавить autocomplete="off" и на форму, и на каждый input, а также изменить атрибуты name у полей.
• Изменение атрибута name ломает обработку формы
  Исправление: после изменения name используйте дополнительные фильтры WPForms, чтобы правильно обрабатывать данные, например, wpforms_process_filter.
• Кэширование страницы мешает проверке изменений
  Очистите кэш сайта и браузера, либо отключите кэш на время тестирования.

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

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

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

Метод	Преимущества	Недостатки
Атрибут autocomplete="off" на форме	Простая реализация, влияет на всю форму	Некоторые браузеры игнорируют
Атрибут autocomplete="off" на полях	Надёжнее для отключения автозаполнения	Требует более сложного кода
Изменение атрибутов name	Обходит кэш браузера автозаполнения	Может сломать обработку формы, требует дополнительной настройки