Add a hide-reveal password icon to Bricks Builder password form field

The Bricks form element allows us to create custom login, registration and reset password pages easily. But there’s just one small thing you might find missing in the password field – the icon that lets users show or reveal the password as they are typing into the password field. Unfortunately, Bricks builder hasn’t yet added this functionality into its Bricks form element, so if you want to hide or reveal your password in the Bricks form password field, you’ll need to either wait till they release it, or use the solution below.

Using a bit of CSS and plain Javascript, you can add a little ‘eye’ icon to show or hide your password in the Bricks builder password field.

Instructions

Watch the YouTube video below to see how to use the code on this page.

The CSS

Add the below CSS anywhere on your the page that contains your form, or in a code snippet plugin.

input[name="form-field-e3d262"] /* Change this to your form attribute selector */ {
    background-image: url('https://yourwebsite.com/wp-content/uploads/eye.svg'); /* Link to your icon image */
  background-size: 25px; /* Change size of icon */
    background-position: right 10px center;
    background-repeat: no-repeat;
    padding-right:30px;
}

input[name="form-field-e3d262"].show-password {
    background-image: url('https://youwebsite.com/wp-content/uploads/eye-closed.svg'); /* Link to your icon image */
  background-size: 25px; /* Change size of icon */
}

The Javascript

Add a code element to the page that contains your form and paste the code below.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var passwordField = document.querySelector('input[name="form-field-e3d262"]'); // Targeting the attribute selector of your forms password field

    // Function to check if the mouse is over the icon area
    function isMouseOverIcon(event) {
        var fieldRect = passwordField.getBoundingClientRect();
        // Adjust the pixel value to match the size of your icon
        return event.clientX > fieldRect.right - 35;
    }

    passwordField.addEventListener('mousemove', function(event) {
        // Change cursor to pointer if over icon area, else default
        this.style.cursor = isMouseOverIcon(event) ? 'pointer' : '';
    });

    passwordField.addEventListener('click', function(event) {
        // Toggle password visibility only when clicking on the icon area
        if (isMouseOverIcon(event)) {
            if (this.type === 'password') {
                this.type = 'text';
                this.classList.add('show-password');
            } else {
                this.type = 'password';
                this.classList.remove('show-password');
            }
        }
    });
});

</script>