Ninja Forms 3 Password Field

UPDATE 7/4/17 – Since version 3.0.31, password fields have been available again in Ninja Forms.  When adding fields, type in password in the search/filter bar on the top right to find the fields and add them to the form.  If you are using an up-to-date version of Ninja Forms, you should use the built-in password field and not use my solution below.


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.

4 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

  2. Looks like Ninja Forms 3 handles password fields : simply enter “pass” in the search field above the field types, it makes the password field type appear…

Leave a Reply to Steven Kellow Cancel reply

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