January 21, 2020: Updated snippet to be simpler and more aggressive.
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.
- Overview
- Using the Snippet
- Autocomplete in Gravity Forms.
- 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!
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.
off | Works 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. |
password | Works 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.
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.
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
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,
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!
Hi Cathy,
Here’s a Gravity Forms Forum Post with some information on this. I hope this helps.
Best,
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.
Hi,
I just did a test with the code, and it works as expected. I’ve sent you a reply via email.
Best,
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
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,
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’
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,
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
Hi Moses,
If you’re a Gravity Perks customer, we’re happy to dig into this for you. Drop us a line.
Is there a way to add autocomplete on one particular form and field?
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.😃
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 :)
This worked, thanks!
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’); });
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.
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. 😃