A show and hide password feature in your Webflow forms can improve how smoothly and safely your users interact with your site. No matter if it’s for logging in, creating an account or entering private information, this upgrade simplifies mistakes and gives the users more control over what they type. You will discover in this guide how to set up this feature in Webflow either with the included tools or a little extra programming.
Getting Started
If you don’t have a form on your Webflow project with a password field already, add one first before adding the show and hide password features. An eye icon or button that users click to show or hide the password should be included as well. Webflow interactions or custom code are options for setting up this feature, based on your personal skills and what you like best. We’ll go through each option step by step.
Install Instructions ✍️
1. Add the booster script to your project.
Find your Webflow Project Settings, pick the Custom Code tab and add the booster script before the </body> tag. It acts as the engine behind the show and hide password effect.
2. Add a div-block that wraps your password field
In the Designer, put a password input field into the Div Block. This using the wrapper makes the elements of the toggle easier to organize.
3. Add the main booster attribute
Choose the wrapper Div Block and give it the attribute defined below.
Name: booster-password-wrapper
Value: true
4. Adding the password toggle wrapper
In the main wrapper, add a Div Block as the child element. This will show and hide the toggles. Place it either alongside or above the password field in the document.
5. Add the password hide & show buttons
Inside the toggle wrapper, add two elements (Text Blocks, Icons, or Buttons):
- One with attribute:
- Name: booster-password-show
- Value: true
- One with attribute:
- Name: booster-password-hide
- Value: true
These will automatically toggle visibility based on the field state.
6. Publish & Test
Once you click Publish, the script will function and you can try it live. You will notice that the toggle is now working as simply as flipping a switch.
Conclusion
Turning on a show and hide password option in Webflow is a fast and effective way to enhance the ease of using your forms. Whether you select a custom solution or opt for Booster attributes, this update allows users to enter their passwords correctly and confidently. If you just follow these stages—including the elements, defining their characteristics and sharing your form on the website—you can make an attractive form that users will love.
FAQ'S
Webflow Show And Hide Password
Will this feature work in Webflow’s Designer preview?
Can I use icons instead of text for the show/hide toggle?
Is this method mobile-friendly?
What if I have multiple password fields on the same page?
We make websites that bring joy and meet your goals.
We create digital experiences that not only capture the users but also empower businesses in a highly competitive world. We are dedicated towards developing creative solutions that will easily fuse creativity with functionality, with long-lasting effects.
