Gravity Wiz

Magically enhanced tutorials, snippets and plugins for Gravity Forms!

  • Gravity Perks
    • Gravity Perks
    • Tutorials & Snippets
    • About
  • Support
    • Documentation
    • Support
    • Account

Disable Autocomplete for Gravity Forms

Disable autocomplete for your Gravity Forms with this copy-and-paste snippet.

Last updated February 7, 2022 | Written by Jordan Smith 67 Comments

  • January 21, 2020: Updated snippet to be simpler and more aggressive.

View CodeDownload Code

Overview

In my experience, autocomplete is generally more helpful than harmful but there are times when it just gets in the way. For those times, use this handy snippet to disable this feature.

  1. Overview
  2. Using the Snippet
  3. Autocomplete in Gravity Forms.
  4. How autocomplete works in different browsers.

Using the Snippet

Confirm that you have Gravity Forms installed and activated and that you’ve installed the snippet. Once you have installed the snippet, you’re good to go! This one’s plug and play!

This snippet will apply to all forms and all fields. If you’d like to only apply this to specific forms and/or specific fields, let us know in the comments.

Autocomplete in Gravity Forms.

By default, Gravity Forms outputs HTML5 fields. The HTML5 spec offers a framework for labeling fields so the browser can automatically complete forms with previously-entered information. In short, you don’t have to do anything for Gravity Forms to activate autocomplete on your forms.

There is an option in Gravity Forms’ Settings that allows you disable HTML5 output. This will disable autocomplete for those fields, but we don’t recommend it. Disabling HTML5 also removes many other useful features, such as automatically displaying a different mobile keyboard when a Phone or Email field is selected. Instead, you can use this snippet to only disable autocomplete while keeping the rest of the HTML5 goodies.

How autocomplete works in different browsers.

Autocomplete behavior differs between browsers. While HTML5 standards dictate how autocomplete should work in general, it leaves some room for interpretation. Browser manufacturers use slightly different implementations for triggering autocomplete, and while the user experience is mostly identical, the technical differences create a situation where a one-size-fits-all solution for disabling autocomplete isn’t possible.

The spec itself states that the autocomplete attribute can be added to any input, select, or textarea to change the autocomplete behavior of those fields. It furthers states that the use of the off value should disable autocomplete for that field. This works in many browsers, but not all. Below is a breakdown of how different autocomplete values are interpreted by different browsers.

offWorks in all browsers except Chrome. Chrome ignores autocomplete="off" for fields that it detects as requesting personal information (i.e. fields with labels like Name, Phone, or Address). It does respect off to non-personal-information fields.
passwordWorks in Chrome to completely disable autocomplete. Does not work in other browsers.

Because of the different behaviors in browsers, our snippet does a quick User Agent check to determine what browser is loading the form. It then assigns the appropriate autocomplete value for that particular browser. In our testing, autocomplete is disabled in all browsers on both desktop and mobile.

Find a browser where autocomplete is still active with the snippet installed? Drop us a line.

Did this resource help you do something awesome with Gravity Forms? Then you'll absolutely love Gravity Perks; a suite of 41+ essential add-ons for Gravity Forms with support you can count on.

  • View All Perks
  • Buy Gravity Perks

Filed Under: Snippets

Comments

  1. matteo says

    July 27, 2022 at 12:23 pm

    Hi there. Thanks for your job. I would like to keep the autocomplete on all field, a part from email confirmation field. Any hint? thx again

    Reply
    • Dario Space says

      July 27, 2022 at 12:29 pm

      Hi Matteo,

      This will require some digging by our developers. You can reach out via our support form if you have an active Gravity Perks license.

      Best,

    • Cathy says

      August 1, 2022 at 7:15 pm

      I am looking for this same functionality and assume many others are as well. Seems like it would be a very common need to not autofill an email confirmation field. Thanks!

    • Samuel Bassah says

      August 2, 2022 at 5:33 am

      Hi Cathy,

      Here’s a Gravity Forms Forum Post with some information on this. I hope this helps.

      Best,

  2. PWIA Webmaster says

    February 10, 2022 at 11:13 pm

    So this did not work. I copied the code to the functions.php to the bottom of the file. I also tried Code Snippets still did not work. I know this is a blank statement, and impossible to troubleshoot. But basically, regardless of the browser (chromium or whatever), the cached address list still shows up. I’m not going to put the URL publicly. But I do have an account with your so logs should be there. Let me know what else I can do to help.

    Reply
    • Samuel Bassah says

      February 11, 2022 at 4:31 am

      Hi,

      I just did a test with the code, and it works as expected. I’ve sent you a reply via email.

      Best,

    • PWIA Webmaster says

      February 24, 2022 at 1:50 am

      Problem is that it doesn’t work with the latest Microsoft Edge Based of Chromium. I tested in a bunch of other browsers, no issues. Here is what the useragent returns Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36 Edg/98.0.1108.56

    • Samuel Bassah says

      February 24, 2022 at 8:19 am

      Hi,

      I’m still unable to recreate this issue. It works also on the latest version of Egde. I’ve sent you an email with more information on my findings.

      Best,

  3. John joseph Raslavsky says

    June 2, 2021 at 8:56 pm

    I am getting this error.

    ‘Your PHP code changes were rolled back due to an error on line 717 of file /www/wp-content/themes/enfold/functions.php. Please fix and try saving again.

    syntax error, unexpected ‘<‘, expecting end of file’

    Reply
    • Samuel Bassah says

      June 3, 2021 at 5:21 am

      Hi John,

      It sounds like you might be having some trouble with installing the snippet. Please refer to our article on snippet troubleshooting for details on installing our snippets.

      http://gravitywiz.com/documentation/snippet-troubleshooting/

      Best,

  4. Moses says

    March 23, 2021 at 4:43 pm

    Hello friends! Thank you for the code.

    I couldn’t make it work yet. I’m running DIVI. I’ve followed their instructions on how to add code snippets to their theme (by using a code snippet plugin) but it doesn’t seem to be working.

    Any advice? Moses

    Reply
    • Scott Buchmann says

      March 23, 2021 at 4:53 pm

      Hi Moses,

      If you’re a Gravity Perks customer, we’re happy to dig into this for you. Drop us a line.

  5. Alice William says

    August 11, 2020 at 4:45 pm

    Is there a way to add autocomplete on one particular form and field?

    Reply
    • Ryan Donovan says

      August 11, 2020 at 5:04 pm

      Hello Alice, to add to one form, you’ll want to update the filter names to gform_form_tag_123 and gform_field_content_123 respectively, where 123 is your form ID. As for a particular form and field, update the filter name to target your form and field: gform_field_content_FORMID_FIELDID.😃

  6. Ekas says

    August 6, 2020 at 10:10 am

    Hi Ryan, thanks for your code, I’m able to remove the auto fill on form with your code above but change autocomplete=’off’ to autocomplete=’new-password’

    and I also have try using this code and works on all page (at least on my end) $(‘input’).attr(‘autocomplete’,’new-password’);

    I’m not a real developer, just share if some one sturgle with this issue :)

    Reply
    • John says

      February 8, 2021 at 9:27 pm

      This worked, thanks!

  7. Eric Kazda says

    May 7, 2020 at 4:03 pm

    Here is an even easier way that is more customer friendly.

    Add a class to the gravity form’s “Custom CSS Class” field… something like “no-autocomplete”.

    Then add the following to your site’s JS file:

    jQuery(document).ready(function($) { $(“.no-autocomplete input”).attr(‘autocomplete’, ‘off’); });

    Reply
  8. Trey Gallant says

    April 20, 2020 at 5:56 pm

    Is there an easy way to disable the autofill for multiple forms? I saw how to apply it to an individual form, but didn’t see a reply for applying it to more than one.

    Reply
    • Ryan Donovan says

      April 21, 2020 at 10:02 am

      Hello Trey, This is a great question. You may want to check out our documentation here on how to apply class-based snippets to the same form. 😃

« Older Comments

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.

Recent Posts

  • Spotlight: Gravity Forms Media Library 🤝 Advanced Custom Fields
  • How ANM Powers Internal Finances with GP Unique ID
  • New Release: Gravity Forms QR Code Beta 1
  • How Farbie.at uses GP Inventory to manage over one thousand parties a year
  • Spotlight: Building a Loan Calculator with GP Advanced Calculations

Categories

  • How To (73)
  • News (25)
  • Plugins (19)
  • Releases (13)
  • Resource (3)
  • Snippets (50)
  • Spotlights (15)
  • Tutorials (57)
  • Uncategorized (4)
  • Updates (152)

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Copyright © 2022 · Powered by WordPress · Gravity Wiz LLC

  • Support
  • Affiliates
  • About
  • Sitemap
  • Terms & Conditions of Use
  • Privacy Policy
  • Cookies Policy

Want to become a
Gravity Forms wizard?

Join 15,000 readers and be the first to know of legendary discounts, new releases, free snippets, and other secret sorcery!

Download Snippet

Disable Autocomplete for Gravity Forms

  • Gravity Perks
    ▼
    • Gravity Perks
    • Tutorials & Snippets
    • About
  • Support
    ▼
    • Documentation
    • Support
    • Account