How to Disable Browser Autocomplete for Form Fields

Overview

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.

Implementation Options

The code snippets below, once added to your site, will disable autocomplete in most browsers. You can choose the snippet you need based on which forms and fields you want the code to apply to.

Disable autocomplete for all forms or an individual form

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

/**
 * Disable form autocomplete for individual form/all forms.
 *
 * @link   https://wpforms.com/developers/disable-browser-autocomplete-for-form-fields/
 *
 * @param  array $atts      Form attributes.
 * @param  array $form_data Form data and settings.
 * @return array
 */
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 either a single field type or an individual 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 Email fields/specific Email fields.
 *
 * @link   https://wpforms.com/developers/disable-browser-autocomplete-for-form-fields/
 *
 * @param  array $properties Field properties.
 * @param  array $field      Field settings.
 * @param  array $form_data  Form data and settings.
 * @return array
 */
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 number 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.