• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

4 April - 2015 By Paal Joachim 22 Comments
Last updated on: May 10, 2017

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

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

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

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

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

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

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

Ninja Forms List Field

 

A Text field with an included Visual Editor.

Ninja Forms Text Field

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

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

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

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

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

Ninja Forms Success Message

 

Form – Settings

Ninja Forms Edit 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

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

Ninja Forms Submissions

 

Import / Export

Import or Export a Ninja form.

Ninja Forms Import Export Forms

Ninja Forms Import Export Forms

 

Import or Export your Ninja Forms Favorite Fields.

Ninja Forms Import Export Favorite Fields

Ninja Forms Import Export Favorite Fields

 

Settings

General

Ninja Forms 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

Ninja Forms Settings Labels

 

Licenses

Install and activate your extensions. Add your license codes into this area.

Ninja Forms Settings Licenses

Ninja Forms Settings Licenses

 

System Status

Ninja Forms 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.)

Share this:

  • Email

Categories: Plugins, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. Michael says

    10 May - 2017

    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]

    Reply
    • Michael says

      10 May - 2017

      .nf-form-title h3{
      font-size:33px;
      }
      should work…

      Reply
  2. Kevin Grennan says

    19 December - 2016

    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.

    Reply
    • Paal Joachim says

      20 December - 2016

      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.

      Reply
  3. janish patel says

    7 July - 2016

    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??

    Reply
    • Paal Joachim says

      13 July - 2016

      Hey Janish

      I am not sure what is going on. Send an e-mail to support at https://ninjaforms.com/contact/

      Good luck!

      Reply
  4. tus says

    31 March - 2016

    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

    Reply
    • Paal Joachim says

      8 April - 2016

      Hi

      Try it live if I remember correctly offline/locally will affect the form so it does not work correctly.

      Reply
  5. Alice Williams says

    29 March - 2016

    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

    Reply
    • Paal Joachim says

      30 March - 2016

      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!

      Reply
  6. Frederik Faarup says

    13 November - 2015

    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!

    Reply
    • Frederik Faarup says

      13 November - 2015

      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 🙂

      Reply
      • Paal Joachim says

        13 November - 2015

        I will check into it.
        Thanks.

        Reply
    • Paal Joachim says

      13 November - 2015

      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.

      Reply
      • Frederik Faarup says

        13 November - 2015

        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.

        Reply
  7. Mark says

    13 August - 2015

    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?

    Reply
    • Paal Joachim says

      16 August - 2015

      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

      Reply
      • Hannes says

        14 September - 2015

        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/

        Reply
  8. Charles Laux says

    26 July - 2015

    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!!

    Reply
    • Paal Joachim says

      29 July - 2015

      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

      Reply
  9. Eric says

    18 July - 2015

    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

    Reply
  10. read more says

    9 July - 2015

    This blog was… how do I say it? Relevant!! Finally
    I’ve found something which helped me. Thank you!

    Reply

Leave a Reply to Paal Joachim Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.