Introduction
Would you like to disable browser autocomplete on your form fields? Many users will let their browsers store form data so it can be used to autocomplete future forms. In some cases, however, this can work incorrectly or you may prefer that users manually enter all details. This tutorial will show you how to disable the browser autocomplete using PHP.
Not all browsers support customizing the autocomplete
attribute. To see if you’re browser and version support this, please check out 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.
Adding the snippet
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( $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' ] ) !== 11 ) { return $atts; } $atts[ 'atts' ][ 'autocomplete' ] = 'nope'; return $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 #2 inside Form #11. // Removing this check would disable autocomplete on ALL fields. if ( absint( $form_data[ 'id' ] ) !== 11 || absint( $field[ 'id' ] ) !== 2 ) { return $properties; } $properties[ 'inputs' ][ 'primary' ][ 'attr' ][ 'autocomplete' ] = 'nope'; 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.
Related
Filter References: