January 21, 2020: Updated snippet to be simpler and more aggressive.
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.
- Using the Snippet
- Autocomplete in Gravity Forms.
- How autocomplete works in different browsers.
Using the Snippet
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
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.
|Works in all browsers except Chrome. Chrome ignores |
|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.