How to Add a Password Visibility Toggle Button

Introduction

Would you like to be able to provide your visitors with the ability to provide password visibility by a toggle switch? By default, when you add a Password field to your form, any input in this field will be represented by asterisks for security. If you’d like to be able to provide a toggle button that would allow them to turn on and off the password visibility you can follow along with this tutorial as we create a code snippet that will easily allow us to achieve this.

Creating the form

You’ll want to start by creating a new form and adding your fields to this. Because we’re creating a form that will allow them to create their own account, we’re asking for their name, email, username, password, and a text area for them to provide a little bit about themselves.

If you need assistance on creating your form, you can review this documentation.

Installing the Font Awesome plugin

We want to use an icon for our toggle button so by following a tutorial from our friends at WPBeginner, we’re installing the Font Awesome plugin so that we can use one of their icons for our password visibility toggle.

Adding the snippet

Now it’s time to copy the snippet below to your site.

If you need any assistance in how and where to add custom code snippets, please review this tutorial.

/**
 * Provide a password visibility toggle switch
 *
 * @link https://wpforms.com/developers/how-to-add-a-password-visibility-toggle-button/
 */
 
function wpf_dev_password_toggle() {
    ?>

<script type="text/javascript">

    jQuery(function($){
         
        $( '.wpforms-field-password' ).each(function(){
             
            $(this).find( 'input' ).each(function(){
                 
                $(this).before( '<i class="fa fa-eye-slash fa-eye" id="password-toggle"></i>' );
                var $passwordInput = $(this);
                 
                $(this).parent().find( '#password-toggle' ).on( 'click', function(){
                     
                    var type = $passwordInput.attr( 'type' ) === 'password' ? 'text' : 'password';
                    $passwordInput.attr( 'type', type);
                    $(this).toggleClass( 'fa-eye-slash' );
                     
                });
                 
            });
             
        });
         
    });

    </script>

<?php
}
  
add_action( 'wpforms_wp_footer_end', 'wpf_dev_password_toggle', 30 );

This snippet will be applied to every Password field added through WPForms. It will automatically apply a specific icon class using the before pseudo-class. When this icon is clicked, it will invoke the CSS ID of password-toggle so that it will show the password instead of the asterisks.

Applying custom CSS

Now, in our final step, we’re going to add some custom CSS to style this icon. To do this, we’re going to copy and paste this custom CSS to your site.

For any assistance in how and where to add custom CSS, please check out this tutorial.

.wpforms-field-password,
.wpforms-field-password .wpforms-field-row-block {
     display: flex;
     flex-flow: wrap;
}

.wpforms-field-row-block *:not(input):not(i),
.wpforms-field-password *:not(input):not(i) {
     flex-basis: 100% !important;
}

#password-toggle {
     width: 35px;
	 font-family: "FontAwesome" !important;
     text-align: center;
     line-height: 35px;
     background: #d9d9d9;
     border-radius: 2px 0 0 2px;
     border: 1px solid #ccc;
     border-right: 0;
}

.wpforms-field-password input {
     width: calc(100% - 50px) !important;
     border-radius: 0 2px 2px 0 !important;
} 

.fa-eye-slash:before {
    font-size: 12px;
}

Now when you see the form, you’ll see the password visibility toggle switch.

And that’s it! Would you like to also change the sub-labels as well? Check out our tutorial on How to Change the Password Field Sublabels.

FAQ

Action Reference: wpforms_wp_footer_end