How can I disable autocomplete on a form input in Webflow? I've tried using the "autocomplete" attribute with values of "off" and "false", but it hasn't worked. Any suggestions?
- Add
autocomplete="off"to both the input field and form in Webflow using custom attributes. - Use non-standard
autocompletevalues (e.g.,new-password), avoid common field names, and optionally insert hidden dummy fields to prevent browser autofill.
To disable browser autocomplete on a form input in Webflow, using just the autocomplete="off" attribute often isn’t enough—especially in Chrome or Safari, which may still suggest saved values. Here’s how to handle it effectively.
1. Use the Correct autocomplete Attribute
- Select the input field in the Webflow Designer.
- In the Element Settings panel (gear icon), scroll to “Custom Attributes”.
- Add a custom attribute:
- Name: autocomplete
- Value: off
Note: This works better on a <form> element than on individual inputs. So also try this on the form wrapper.
2. Use a Non-Standard autocomplete Value
- Some browsers ignore
autocomplete="off"if they think the input contains sensitive data (e.g., email or password). - Use a non-standard or random string:
- Value: new-password, off-new, nope, or any gibberish like "noautocomplete"
Example custom attribute on the input:
- Name: autocomplete
- Value: new-password
This often prevents browsers from autofilling the field.
3. Change the Input Type or Name
- Browsers also rely on field name and type to remember values.
- Try altering the name attribute to a random string (e.g.,
dont-autofill-me) - If it's not a password or email, consider changing the type to "text" to reduce autofill behavior.
4. Set Attributes on the Form
- Select the Form Block in Webflow.
- Add a custom attribute:
- Name: autocomplete
- Value: off
Some browsers require that this is set at the form level.
5. Use Dummy Hidden Fields (Optional Trick)
Some developers insert fake fields before real fields to “trick” the browser:
- Add a hidden input with:
- type: text
- name: fakeuser
- autocomplete: username
Browsers may fill the hidden dummy field and ignore the real one.
Summary
To reliably disable autocomplete in Webflow:
- Apply
autocomplete="off"to both the input and form. - Use non-standard
autocompletevalues likenew-password. - Avoid common field names and test in different browsers.
- Consider hidden dummy fields as a workaround when others fail.
Browser behavior varies, but combining these techniques increases your chances of suppressing autocomplete reliably.