#45 - Show/Hide Password v0.2

Add a show/hide password button to any form with a password input.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo


<!-- 💙 MEMBERSCRIPT #45 v0.2 💙 SHOW AND HIDE PASSWORD -->
<script>
  document.querySelectorAll("[ms-code-password='transform']").forEach(function(button) {
    button.addEventListener("click", transform);
  });

  var isPassword = true;

  function transform() {
    var passwordInputs = document.querySelectorAll("[data-ms-member='password'], [data-ms-member='new-password'], [data-ms-member='current-password']");

    passwordInputs.forEach(function(myInput) {
      var inputType = myInput.getAttribute("type");

      if (isPassword) {
        myInput.setAttribute("type", "text");
      } else {
        myInput.setAttribute("type", "password");
      }
    });

    isPassword = !isPassword;
  }
</script>

Description

Attribute

Show / Hide Password

Create a button to show/hide password inputs.

ms-code-password

transform

v0.2 - Multiple Password Inputs

Changed querySelector to querySelectorAll so that the password transformation works for multiple password inputs on the same page.

Also added support for data-ms-member="new-password" and data-ms-member="current-password".

Add ms-code-password="transform" to your show password button.

The 1st click will show the password and the 2nd click will hide the password. Which means, you can use Webflow interactions, a checkbox, or Webflow tabs to toggle between show & hide buttons.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Add a Show/Hide Password Feature to your Webflow Form

Memberscripts needed:

https://www.memberstack.com/scripts/45-show-hide-password

Tutorial:

Cloneable:

https://showpassword.webflow.io/

https://www.memberstack.com/webflow/show-hide-password-component

Why/When would you to add a show/hide password on your Webflow forms?

Improve the login user experience by allowing users to check the password they just entered and avoid frustration in case of typos.

We all make mistakes and we’ve all experienced the frustration of getting a password wrong on a login form.

We’ll be looking at how to implement a show/hide password button on Webflow forms, thus allowing your users to check the password they just typed before hitting that login button.

Adding a show/hide password feature to Webflow forms

To add a show/hide button to a Webflow form, we’re going to use MemberScript #45 – Show/Hide Password. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Set up

The first thing you’ll need to do is build out the form itself and style it however you want.

Then, go ahead and create the actual buttons. One way to do it is with Webflow’s tabs functionality, creating a menu element with 2 buttons under it, which you can toggle between from the sidebar on the right using the regular Webflow tabs UI.

Next up, select the tabs menu (the element which contains both buttons) and add the following attribute to it:

ms-code-password=”transform”

Now select the password field and add this attribute to it:

data-ms-member=”password”

If you’re using Memberstack for the form too, the attribute should already be there.

Making it work

Now that you’ve got the form set up and you’ve created the show/hide buttons, all you need to do is add the MemberScript #45 custom code to your page, before the closing body tag.

Conclusion

That’s everything, you can now go ahead and test your form’s show/hide password feature.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you add a password field to your form with an included show/hide password feature.

Take me to the Script!

Read full documentation

Button Text

Something not working as expected?