Автозаполнение форм в браузерах — удобная функция, но иногда она может создавать риски для безопасности, особенно если на сайте есть формы с конфиденциальными данными. В этой статье разберём, как в WordPress отключить автозаполнение форм на уровне HTML и JavaScript, а также рассмотрим практические примеры и рекомендации для разработчиков.
Что такое автозаполнение форм и почему его могут отключать
Автозаполнение — это функция браузера, которая позволяет пользователю быстро заполнять формы, используя сохранённые данные, например, имена, адреса, пароли. Для большинства сайтов этот функционал полезен, но в некоторых случаях автозаполнение может вызвать проблемы:
- Пользователь может случайно отправить на сервер устаревшие или неправильные данные.
- На общих компьютерах автозаполнение может раскрыть личную информацию.
- Некоторые формы, например, формы оплаты или авторизации, требуют повышенной безопасности.
В таких сценариях лучше отключить автозаполнение на определённых формах или полях.
Как отключить автозаполнение в WordPress — базовый способ
Самый простой способ — добавить в тег <form> атрибут autocomplete="off". Это скажет браузеру не предлагать автозаполнение для данной формы.
Если вы создаёте форму вручную в шаблоне или через shortcode, добавьте атрибут так:
<form method="post" action="" autocomplete="off">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" value="Войти" />
</form>Однако в WordPress часто формы генерируются плагинами или темами без прямого доступа к коду формы. В этом случае можно использовать фильтры и хуки.
Отключение автозаполнения для форм WordPress через хук wpforms_frontend_form_atts
Если вы используете плагин WPForms, можно добавить следующий код в файл functions.php темы или в плагин-«муфту»:
function wplearn_disable_autocomplete_wpforms( $atts, $form_data ) {
$atts['autocomplete'] = 'off';
return $atts;
}
add_filter( 'wpforms_frontend_form_atts', 'wplearn_disable_autocomplete_wpforms', 10, 2 );Этот код добавит атрибут autocomplete="off" всем формам, созданным через WPForms.
Отключение автозаполнения для отдельных полей с помощью JavaScript
Если по каким-то причинам атрибут autocomplete="off" не срабатывает (некоторые браузеры игнорируют его для полей пароля), можно дополнительно использовать JavaScript для управления поведением полей.
Пример кода, который отключает автозаполнение для всех полей формы с классом no-autocomplete:
document.addEventListener('DOMContentLoaded', function() {
const forms = document.querySelectorAll('form.no-autocomplete');
forms.forEach(function(form) {
form.setAttribute('autocomplete', 'off');
const inputs = form.querySelectorAll('input');
inputs.forEach(function(input) {
input.setAttribute('autocomplete', 'off');
input.setAttribute('autocorrect', 'off');
input.setAttribute('autocapitalize', 'off');
input.setAttribute('spellcheck', 'false');
});
});
});Добавьте класс no-autocomplete к нужным формам в разметке, и скрипт отключит автозаполнение и подсказки браузера.
Отключение автозаполнения в формах WooCommerce
WooCommerce генерирует много форм: регистрации, оформления заказа, оплаты. Для повышения безопасности можно отключить автозаполнение на некоторых из них.
Добавьте следующий код в functions.php темы, чтобы отключить автозаполнение на форме оформления заказа:
function wplearn_disable_autocomplete_checkout_form( $fields ) {
foreach ( $fields as $fieldset_key => $fieldset ) {
foreach ( $fieldset as $key => $field ) {
$fields[$fieldset_key][$key]['autocomplete'] = 'off';
}
}
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wplearn_disable_autocomplete_checkout_form' );Этот код добавляет атрибут autocomplete="off" ко всем полям на странице оформления заказа WooCommerce.
Использование плагина Clearfy Pro для управления автозаполнением
Если вы используете плагин Clearfy Pro, в нём есть удобные настройки для безопасности и оптимизации, в том числе отключение автозаполнения на формах.
Это избавит вас от необходимости править код вручную и обеспечит комплексное управление функциями безопасности.
Подводим итоги: рекомендации по безопасности и UX
Отключение автозаполнения форм — это баланс между удобством пользователя и безопасностью. Рекомендуется:
- Отключать автозаполнение только для чувствительных форм (вход, регистрация, платежи).
- Использовать атрибут
autocomplete="off"на уровне формы и полей. - Для надёжности — добавлять JavaScript, особенно для браузеров, которые игнорируют атрибут.
- Проверять влияние на пользовательский опыт, чтобы не ухудшить удобство.
Используйте приведённые в статье техники и примеры, чтобы быстро и безопасно управлять автозаполнением на вашем WordPress-сайте.