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.

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.