How to Disable Browser Autocomplete for Form Fields

Introduction

Would you like to disable the 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.

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.

create your form and add your fields

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 an specific form

Autocomplete can not be turned off at this level in recent versions of the Google Chrome browser.

/**
 * 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 specific form but only for 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 );

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.

Filter References: