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.
Ninja Forms Sidebar options
All Forms
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.
Ninja Forms All Forms
Build Your Form
(I have added the fields you see listed.)
Favorite Fields
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.
Ninja Forms Contact Form Fields
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.
Ninja Forms First Name Field
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.
Ninja Forms hr Field
Anti-Spam field
Add your own question and answer. The user filling out the form will need to answer correctly to be able to submit the form.
Ninja Forms Anti Spam Field
List field
Choose the type you want to use.
Radio buttons, Checkboxes, Multi-Select or Dropdowns.
Ninja Forms List Field
A Text field with an included Visual Editor.
Ninja Forms Text Field
Submit
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.
Ninja Forms Submit Field
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.
Ninja Forms Email Actions
Email Admin
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.
Save.
Ninja Forms Email Admin
Email User
Type: Email
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.
Ninja Forms Email User
Success Message
Type: Success Message
Message: Add your own message the user will see after having submitted the form.
Ninja Forms Success Message
Form – Settings
Ninja Forms Edit 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.
Ninja Forms Preview Form
Submissions
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.
Ninja Forms Submissions
Import / Export
Import or Export a Ninja form.
Ninja Forms Import Export Forms
Import or Export your Ninja Forms Favorite Fields.
Ninja Forms Import Export Favorite Fields
Settings
General
Ninja Forms Settings General
Labels
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.
Ninja Forms Settings Labels
Licenses
Install and activate your extensions. Add your license codes into this area.
Ninja Forms Settings Licenses
System Status
Ninja Forms System Status
Extend
There are numerous extensions one can add to Ninja Forms.
Examples are:
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.)
How can I change the title for a Form? Meaning I want to change the Font, size and such… NOT the name of it. I know a little CSS. I would think something like
[code]
#nf-form-title {
Font-size; 18px;
Font-family: Raleway;
Font-weight: 600;
}
[code]
.nf-form-title h3{
font-size:33px;
}
should work…
When using ninja forms you have the option to Hide the Labels and Ninja forms fills the field wrap with a grey label inside as a placeholder “name” “email” how do you change that elements font color, I have more and more people asking me about this and it is driving me mad, its so light.
The answer is most likely that it can be changed using the css `::placeholder` attribute
https://css-tricks.com/almanac/selectors/p/placeholder/
Thanks to Christoffer for providing the answer.
Hello nice tutorial. I am having trouble getting the inputted information in the email that gets sent to the admn. I am adding the shortcode [ninja_forms_all_fields] in my email message to the admin but they are still not showing. It is just showing the text as “[ninja_forms_all_fields]”, any ideas??
Hey Janish
I am not sure what is going on. Send an e-mail to support at https://ninjaforms.com/contact/
Good luck!
I followed your tutorial…I still dont receive any email on both ends(admin and customer email addresses)
btw, I’m running it on localhost
Hi
Try it live if I remember correctly offline/locally will affect the form so it does not work correctly.
Hi Paal,
Thanks for the info. I am trying to figure out to get the submitted forms sent to my email address and not have to log into my wordpress site and check them under submissions. If this is part of what you showed above I apologize I missed it because I couldn’t figure it out based on the tutorial you gave above. (Your fields look different than the version of ninja forms I am using which may why.) I am using version 2.9.38
Thanks a lot,
Alice
Hi Alice
Ahh I believe you stumbled on the missing step in my tutorial.
When I first begin to configure Ninja Forms I have probably also duplicated The Email User area.
This means go to your Email & Actions list and hover over Email User and click duplicate. Click it (edit) and then rename it. I renamed mine to Email Admin.
You should be able to follow the steps listed above.
Thank you very much for asking!
What a coincidence.
We’ve just emailed a few weeks back, and now I’m searching on google for another problem, and here you are with a great guide again, Paal.
Good job.
I’m trying to create a signup form in which the visitor has to:
1) pick one of 12 images
2) write his/her contact informations
It doesn’t seem like ninja forms has the option to add a “list” of images like this.
I guess I’ll have to insert the images in a “text”-field in which I give each image a name.
Then afterwards, I’ll add a “list”-field in which the visitor will pick the name of a certain image.
It’s not optimal, but I guess it’s my only option as of now.
Keep on the good work, Paal!
Btw, you have a enormous empty space in the sidebar throughout the article.
I can only recommend Q2W3 Fixed Widget plugin for wordpress – I use it on my sites 🙂
I will check into it.
Thanks.
Hi Frederik
I experimented with your intriguing question.
What I did was Add a list and named it Select Image with the 12 options.
Then selected Add Description which opens a TinyMCE editor. There I added images and through the capture of each image I gave it a number.
Your going to have to juggle this a bit to get it to align nicely. As well as experiment with the position of the Label as well as the Description.
Your way is just as good as the way I did it. I really do not see any options for this for the moment.
Thanks.
Nope, I guess I’ll have to live with this 🙂
Thanks for looking into it, though.
It’s always to great getting better and better at what we do – together.
Best regards.
Hi, I’ve got some problems exporting my forms submissions. Did you find a way to wrap the content of a multiline content field to make it readable by Excel?
Hey Mark
A comment from Kyle who works at Ninja Forms:
“When opening a *.csv export in Excel, be sure to use the Excel import feature instead of just trying to open the *.csv file with Excel. You can also point them to our support, https://ninjaforms.com/contact/, and we can work with them :)”
Paal Joachim
Hey, I found this post earlier today and got the Excel Export extension in the meantime. This solves all encoding, column and row issues I had with my exports.
https://ninjaforms.com/extensions/excel-export/
Wanted to see if you would post your CSS or how you made your form look so slick. I really can’t pay the $69 for the Styles & Layout plugin, but would like to mess with a little CSS. Thanks for your help!!
Hey Charles. I just finished the article on how to style a Ninja Forms Contact form.
https://www.easywebdesigntutorials.com/styling-a-ninja-forms-contact-form/
Thanks for asking!
Paal Joachim
This guide really helped me, I was working on the same and could not find any other good article to explain Ninja forms EMAIL & ACTIONS
Thank you
This blog was… how do I say it? Relevant!! Finally
I’ve found something which helped me. Thank you!