SIGN UP

Add a ‘show password’ checkbox to the Password field

By: Chris Adams | Asked: 06/18/2021
Forums › Category: Code Snippets › Add a ‘show password’ checkbox to the Password field
1 Vote Up Vote Down
Chris AdamsChris Adams asked 4 years ago

This snippet will add a ‘Show Password’ checkbox to the Password field.
Step 1:

  1. Add a Password field to your form
  2. Add this to the Password field description or an HTML field
<input type="checkbox" onclick="showPassword()">Show Passwords
  1. Add this to the ‘After Fields’ content of your form
<script>
	function showPassword() {
		var x = document.getElementById("field_jjtjt");
		var y = document.getElementById("field_conf_jjtjt");
		if (x.type === "password") {
			x.type = "text";
		} else {
			x.type = "password";
		}
		if (y.type === "password") {
			y.type = "text";
		} else {
			y.type = "password";
		}
	} 
</script>

Change jjtjt to the FIELD KEY of the Password field in 2 places.

John Langlois replied 2 years ago

This works well in a regular formidable user registration form.
Any ideas on how to implement it when calling [frm-login]?

Thanks.

3 Answers
0 Vote Up Vote Down
Steven C answered 2 years ago
Yes we really need a solution for this across the board. For reset password too. There appears to be no single solution to provide the "show password" option anywhere and everywhere a password field exists across the board?
0 Vote Up Vote Down
Eric Gauvin answered 2 years ago
This works. I added a label to the checkbox to make it easier to click on. 
<input type="checkbox" id="show_password" name="show_password" onclick="showPassword();"> <label for="show_password">Show Password</label>
I also took out the part about the confirmation field because I'm using the "show password" functionality in place of the confirmation, which is intended to prevent typos when using the password input.
0 Vote Up Vote Down
Eric Gauvin answered 2 years ago

Did some more exploration. I really like this approach with the toggle icon in the field. (see screenshot below) I happen to have font awesome already loaded. Reference: https://www.javascripttutorial.net/javascript-dom/javascript-toggle-password-visibility/  Note: I think this would work pretty well to add to other forms like log in and password reset since it appends the icon to the field with javascript instead of adding html...You just need to change the ID selector for the password field. 

<script>
const passwordField = document.querySelector("#field_1abwj2")
passwordField.insertAdjacentHTML("afterend", "<a href=\"javascript: togglePassword();\" style=\"margin: -30px; cursor: pointer; color: #006A98;\"><i class=\"fa fa-eye-slash\" aria-hidden=\"true\" id=\"toggleIcon\"></i></a>");
const toggleIcon = document.querySelector("#toggleIcon");
function togglePassword() {
    // toggle the type attribute
    const type = passwordField.getAttribute("type") === "password" ? "text" : "password";
    passwordField.setAttribute("type", type);
    
    // toggle the icon
    toggleIcon.classList.toggle("fa-eye-slash");
    toggleIcon.classList.toggle("fa-eye");
}
</script>
Attachments
Screenshot-2023-02-27-at-8.52.06-PM.png
Eric Gauvin replied 2 years ago

I have an updated version of a password show/hide toggle. I will try to submit it below, but I keep getting locked out.

Victor Font replied 2 years ago

Load your updated code in pastebin or gist and post the link.

Eric Gauvin replied 1 year ago

this functionality is now part of formidable forms (password field settings)

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right