How to Disable Browser Autocomplete for Form Fields

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.

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.

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:

• wpforms_field_properties
• wpforms_frontend_form_atts