Ninja Forms

WordPress Plugins: Ninja Forms

First off, ninjas are awesome, so you know this has to be a good plugin. Second, forms are one of the most terrible things that a web developer has to deal with – right up there with formatting tables. Ninja Forms is a great WordPress plugin that I would recommend to anybody to help solve their form woes, so let’s dive in and see what all it can do for you.

Building Your First Form

As with all WordPress plugins, getting started is as simple as searching for Ninja Forms in plugins and clicking “Install.” Once you’ve done that, you’ll get a new forms option in your sidebar – click there and you’ll go to the main Ninja Forms page where you’ll see an “Add New Form” button up top.

Form Settings

The Add New Form screen is where all of Ninja Forms power really lies. You’ll be taken to the Form Settings tab first. To get started you’ll need to name your form which you can do in the big text field at the top of the page. While there’s a lot of settings here and some of them have crazy words like “ajax” in them, there are only a few that most people really need to mess with. Those are Display Form Title (which is entirely preference), the Success Message, and the email settings in the accordion tabs at the bottom. While you don’t have to setup the email settings for your forms, it’s generally a good idea and is just courteous to your users.

Field Settings

This tab is where you actually get to build your form. On the left side of the screen, you’ll see all of the field types that you can add – and it’s a pretty comprehensive selection. From here, let’s add a simple text field and see what we can do.

Ninja Forms settings

On this screen you’ll see another big set of options, but again most of them won’t be needed by the average user. Label is going to be what the field actually contains – something like “Full Name” or “Dog Breed.” Below that is Label Position which is one of my favorite options. It allows you pick “Inside Element” which gives you a beautiful placeholder look with your form, which my developer colleagues know is a great feature to be able to select from a dropdown. Other than that the most important option is “Required” which will make the field required to fill out or it won’t submit the form.

Most of the other field options are going to have very similar options but do take a look through and make sure all of your options are consistent – nobody wants a form with some left aligned labels and some top aligned labels. Once you’ve got everything setup like you want it, be sure to add a ‘Submit’ field. This is one feature of Ninja Forms that I think is confusing to the user because it will actually let you save and use a form with no way for your user to submit it.

Once you’ve got everything setup like you want it, simply hit the Form Preview tab up top and it will show you your newly created form in your page template. Ninja Forms has it’s own styles but it generally looks great on sites as long as the theme was built correctly.

Using Your New Form

Now that you’ve got your fancy new form, you probably actually want to use it. Ninja Forms gives you a couple of easy to use options, but let’s start with the easiest.

Append That Form

Let’s say you want to use that form on your contact page. It’s literally easier than pie. Get to the edit page and on the bottom right you’ll see a new “Append A Ninja Form” section. Inside of it is a single dropdown that contains all of your forms. Simply select which one you want and Ninja Forms will do everything for you and append it to the end of your content, it’s as easy as it gets.

Shortcode That Form

Ok, appending the form is great, but let’s say you want it in the middle of your content. Ninja Forms saves the day again. If you go to the main Forms page, you’ll see your list of forms. The second column of that form table is “Shortcode.” All you have to do is copy and paste that anywhere into your post or pages content and boom, your form will show up exactly where you want it too.

Template Function That Form

This last option is more for developers but I do know a good amount of WordPress users that have the chops to pull this off as well. On that same main Forms page you’ll see a third column that is “Template Function.” This is a PHP snippet that will allow you to place your new form anywhere in your theme. It’s a simple copy and paste but you do need to know some coding to do it without breaking everything else.

Widget That Form

This last option is probably the most used for sidebar contact forms, which are a great way to get leads if your WordPress site is business oriented. Again it’s as easy as possible. All you have to do is drag and drop the “Ninja Forms Widget” into the widget area that you want it in and then select the field you want. That’s it. Easy all the way.

Wrapping Up

I use Ninja Forms all the time. It’s easy, quick, and gives you a fully functioning form that usually follows the styles of your site pretty well. It’s also very actively developed so you can be sure that it’s going to maintain coding standards moving forwards. On top of all of that, there are a ton of great extensions for it that make it even more powerful. I highly suggest that if you have forms on your site that you at least give it a go – I doubt you’ll be disappointed.

December 12, 2013

About Drew Barton

Drew manages the team, leads business development activities and sets the overall vision of the company. A graduate of Emory University, he spent three years working at before founding Southern Web in 2004. Drew is an Eagle Scout, an active member of Entrepreneurs Organization (EO) and a recipient of the International Association of Business Communicators’ Silver Flame Award for an article he wrote about boosting website traffic. On a mission to put his entrepreneurial acumen to good use, he’s currently writing a book for small business owners who are navigating the challenges of website development projects. In his spare time, he enjoys learning Spanish and investing in real estate.

Leave a Reply

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