Ninja Forms a fast rising star among contact forms.
NB! Ninja Forms 3 has been released and has had a total makeover. Go to my article:
Ninja Forms 3 walk through -step by step- guide to see some of the changes.
The following tutorial is for Ninja Forms version 2.
Some of the main features of the Ninja Forms WordPress plugin as I experience them:
– Easy to create a form.
– Easy to change the language through labels and naming fields.
– Somewhat easy to create an action as to what happens when the user submits a form. Such as a success message. Having the submitted form sent to the admin. Having a message sent to the user who filled out the form.
Below is a walk through of the various sections of Ninja Forms 2.
I have done some modifications to the contact form and e-mail actions so when you install Ninja Forms the contact form and email sections will look a little different.
After having installed Ninja Forms new sidebar items shows up.
There is one Contact form available. Moving the mouse over the title brings up the quick edit bar (as seen below). I usually begin by making a copy of the default form. Click the title or Edit to enter the build your form section.
Build Your Form
(I have added the fields you see listed.)
Clicking the star in the top right of a field brings it into the Favorite field area. When there are fields you use a lot then you can fill out the field and save the pre-filled field to your Favorite Fields section. A Honey Pot field is a hidden spam protection field.
I have added some examples of existing fields further below.
First Name field
NB! If you want to have a field as required then click the Restriction Settings tab and click Required.
Notice the black star. Click it to add the field to your Favorites Fields Section.
The Horizontal Ruler field inside the Layout Elements section.
Notice under Advanced Settings is a Custom CSS Classes box. Here you can add your own custom CSS class to the hr element. Other fields also have a similar Custom CSS Classes box.
Add your own question and answer. The user filling out the form will need to answer correctly to be able to submit the form.
Choose the type you want to use.
Radio buttons, Checkboxes, Multi-Select or Dropdowns.
A Text field with an included Visual Editor.
The last field in a form which can be easy to forget is the Submit field (submit button). Give the submit button another name if you choose.
Email & Actions
Create an action to what happens when the user submits a form.
For instance the Admin gets an e-mail with the information the user filled in.
The user gets an e-mail showing what they submitted.
The user gets a success message after submitting the form.
Hovering the mouse over the title brings up the quick edit bar with the options (seen below):
Deactivate, Edit, Delete and Duplicate.
NB! If you do not have Email Admin listed (which just might be the case) then hover over Email User and duplicate it. Click it and then rename it to Email Admin or another name. Then go through each section as I mention below.
Give it a name
Select Type: Email, Redirect or Success Message
From Name. In this case it is from the user submitting the form. I clicked into the text box and selected First Name.
From Address. Again I clicked into the text box and this time selected Email.
To. The e-mail the form goes to.
Subject. Create a subject so you know it is from your contact form.
Email Message. I clicked Insert All Fields and they were added to the content area. I also added my own text.
To: (the user) Email the user filled into the form.
Subject: I decided to use the Subject they themselves filled out in the form.
Email Message. When I fill out a form I often times would like a copy of what I wrote. I added all the fields and my own message below.
Type: Success Message
Message: Add your own message the user will see after having submitted the form.
Form – Settings
Form – Preview
Clicking the Preview tab brings up a preview of the form. The below screenshot is the form I made for my own web site.
I made a new separate article where I show how to make a similar contact form: CSS customizations of Ninja Forms.
Clicking the Submissions tab opens a new tab.
Showing: ID, then the fields you made for the specific form. I opened Screen Options and turned off the Message field as it shows the message in a small column leaving too much space between each submission.
Import / Export
Import or Export a Ninja form.
Import or Export your Ninja Forms Favorite Fields.
Change the wording of each message that Ninja Forms uses. I have in other forms changed the wording from English to Norwegian and used Norwegian names in the fields that I have used.
Install and activate your extensions. Add your license codes into this area.
There are numerous extensions one can add to Ninja Forms.
Conditional Logic, Multi-Part Forms and a lot more. Check them out through my affiliate link:
Extensions at the Ninja Forms web site
(An affiliate link gives me the chance to get some percentage of a sales made through the above link.)