Ninja Forms 3 Password Field

Ninja Forms 3 doesn’t come built in with a password field, which makes things like user registration with Ninja Forms, a bit less user-friendly.

Luckily with the help of some JavaScript, you can recreate the password field functionality quite easily:

Make sure to change the ID in the Javascript file, which is 3 by default, to match the field ID of your password field. Then make sure to add the custom class ninja-forms-password to that field in your Ninja Forms creator.

Save the JS gist above in a child theme in the following directory:

yourtheme/js/ninja-forms-password-fix.js

Then add the PHP script to your theme’s functions.php file (without the starting PHP tag in the file of course!)

That should convert your plain text password from Ninja Forms into a password field on the front-end, and it should work across browsers too.  You can see how it might appear in the JSFiddle here.

2 thoughts on “Ninja Forms 3 Password Field

  1. Hi Steve,

    Thanks for the solution. I’ve placed the files and changed the id but it’s not working. Why is the custom class needed? I don’t see it in the files?

    Cheers,
    Jaap

    1. Hi Jaap,

      I’ve updated some of the code now but you’re right, it’s not quite working with Ninja Forms the way it should. Give me some time and I’ll look into it.

      I’ll also have a look into the WooCommerce field issues too!

      Cheers,

      Steven

Leave a Reply

Your email address will not be published. Required fields are marked *