Are you interested in turning off browser autocomplete for your form fields? Often, browsers store form data to conveniently autocomplete future forms. However, there are instances where this feature may not work as expected or you might prefer users to manually input all details. This guide will walk you through disabling browser autocomplete using PHP.
Autocomplete settings are typically set by the browser and will generally take precedence over HTML attributes or JavaScript attempts to modify them. So, if a user’s browser has autocomplete enabled and the form has autocomplete attributes set to disable it, the browser’s settings will typically override those attributes. To read more about this and any browser inconsistencies, please check out this page.
However, by setting the autocomplete attribute to “off”, you’re indicating to the browser your preference for autocomplete behavior. While most modern browsers respect this, some older browsers or certain browser configurations may not fully adhere to it.
To check if your browser and its version support this feature, please refer to this chart.
Creating your form
First, you’ll need to create your form and add your form fields. If you need help with this, please check out this documentation.
Disabling autocomplete
We can now choose the snippet that we want to use and add it to our site.
If you need help on how to add snippets to your site, please review this tutorial.
Disable autocomplete for all fields on a specific form
/**
* Disable form autocomplete for all fields on a specific form
*
* @link https://wpforms.com/developers/disable-browser-autocomplete-for-form-fields/
*/
function wpf_dev_disable_form_autocomplete( $form_atts, $form_data ) {
// This check will only form autocomplete for Form #11.
// Removing this check would disable autocomplete on ALL forms.
if ( absint( $form_data[ 'id' ] ) !== 1277 ) {
return $form_atts;
}
$form_atts[ 'atts' ][ 'autocomplete' ] = 'off';
return $form_atts;
}
add_filter( 'wpforms_frontend_form_atts', 'wpf_dev_disable_form_autocomplete', 10, 2 );
Disable autocomplete for a specific form and a specific field
The snippet below will specifically target the Email field. To target a different field type, the filter (wpforms_field_properties_email) would need to be adjusted.
/**
* Disable autocomplete for a specific form and field ID
*
* @link https://wpforms.com/developers/disable-browser-autocomplete-for-form-fields/
*/
function wpf_disable_email_autocomplete( $properties, $field, $form_data ) {
// This check will only disable autocomplete for Field #3 inside Form #11.
// Removing this check would disable autocomplete on ALL fields.
if ( absint( $form_data[ 'id' ] ) !== 11 && absint( $field[ 'id' ] ) !== 3 ) {
return $properties;
}
$properties[ 'inputs' ][ 'primary' ][ 'attr' ][ 'autocomplete' ] = 'off';
return $properties;
}
add_filter( 'wpforms_field_properties_email', 'wpf_disable_email_autocomplete', 10, 3 );
Remember to update any of the snippets above to match your own form and field IDs. If you need help in finding these IDs, please check out this tutorial.
For background on the autocomplete attribute and approaches to turning it off, please see MDN’s documentation.
And that’s all you need in order to disable the browser autocomplete for your WPForms. Would you like to disable the Add Form button on the classic editor? Try out our tutorial on How to Remove “Add Form” button from TinyMCE editor.