← Tous les scripts

#45 - Show/Hide Password v0.2

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

Besoin d'aide avec ce MemberScript ?

Tous les clients de Memberstack peuvent demander de l'aide dans le Slack 2.0. Veuillez noter qu'il ne s'agit pas de fonctionnalités officielles et que le support ne peut être garanti.

Voir la démo

  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;
Show / Hide Password
Create a button to show/hide password inputs.
reveal, peak, confirm, peek, show/hide, hide/show,

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.

Création du scénario Make.com

1. Téléchargez le modèle JSON ci-dessous pour commencer.

2. Naviguez jusqu'à Make.com et créez un nouveau scénario...

3. Cliquez sur la petite boîte avec trois points, puis sur Import Blueprint...

4. Téléchargez votre fichier et voilà ! Vous êtes prêt à relier vos propres comptes.

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

Memberscripts needed:






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

  1. 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.


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!