• 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

6 September - 2016 By Paal Joachim 10 Comments
Last updated on: August 29, 2017

Ninja Forms version 3.0 has now officially been released

With a totally new user interface. It can take a little while to get used to the new interface and figuring out how to in general use the new Ninja Forms contact form. This guide can help ease the transition from Ninja Forms 2.9 to 3.0.

 

If you are an existing user

If you are an existing user you will still see the pre 3 version UI even though you have updated the plugin to the newest 3 version. Your forms need to be updated and converted to Ninja Forms 3.

Ninja Forms three is coming

Ninja Forms three is coming

 

To update go to Forms -> Settings -> Advanced Settings

Ninja Forms convert to three - Advanced Settings

Ninja Forms convert to three – Advanced Settings

 

Click the red button that says Update & Convert Forms.
Upgrade to the Ninja Forms THREE.

The following screen will be seen.

Ninja Forms three is here

Ninja Forms three is here

 

Click the blue button Start Upgrade. It will then go to the All Forms screen showing the forms that are converted and upgraded.

If you are new to Ninja Forms

After having installed and activated Ninja Forms 3. Go to the All Forms screen and you will see one default form included.

All Forms Ninja Forms 3

All Forms Ninja Forms 3

 

Hovering over the form title brings up the quick edit where one can select Edit – Delete – Duplicate – Preview Form – View Submissions.

NB! Additional Form templates such as a Quote Request and Event Registration can be found by clicking Add New Form button.

 

Form Fields

Clicking the title or edit through the all forms screen brings you to the full screen Form Fields.

Form Fields – Section to view the fields of a specific form. (Btw clicking the blue circle with a + in it opens up the add new field panel.)

NB! To view other aspects of Ninja Forms such as Submissions, Import/Export, Settings, Get Help and Addon-ons exit the full screen by clicking the X in the top right corner and it will take you back to the All Forms screen.

Contact Me template - Ninja Forms 3

Contact Me template

 

Editing the fields

Clicking a field such as Name, Email, Message or Submit opens the edit form sidebar panel.
Here we are editing the Single Line Text field.

Form Fields - Ninja Forms 3

Form Fields

 

The Single Line Text edit field options.

Many of the options have a little comment bobble right next to the option title for more information about the option.
When an option has such as Required field there is an on (green) and off (grey) option.
Under Display – fill in a name for the container and element area to have more control of the CSS.
Filling in text into Help Text brings up an tooltip icon next to the label. The text will then show up on hovering over the icon.

Experiment with the form to see how it works.

Single Line Text edit field - Ninja Forms 3

Single Line Text edit field

 

Click DONE to go back to the full screen Form Fields area. Then preview the form.

Clicking the big blue circle with a + in it opens the Add New fields sidebar panel.

 

Adding a new field

Adding New Fields Ninja Forms 3

Adding New Fields

 

An example.
Left: Lets say I want to add a phone number field after the Email field.
Right: I would click/or drag the Single Line Text field and drag it to the location I want it.
Left: Click the new Phone field and adjust the Label to Phone number and add a description. Perhaps even add a character limit and adjust the Input Mask to US Phone.
Click Done and preview the form.

When satisfied with the form click the Publish button.

 

 

Emails & Actions

Turn on (green) or off (grey).

The area that controls what should be done after the user has submitted a form.

Email & Actions Ninja Forms 3

Email & Actions

 

Emails & Actions – Save to Database

Contains only on or off and the action name.
Save to Database: Saves the form to the database.

 

Emails & Actions – Email Confirmation

Email Confirmation: Emails the user the contents or what you choose as an confirmation for submitting the form.
Clicking the grey list icon as can be seen to the right of each field below brings up “Insert Merge Tag” to where one can add one of the available fields. (I have an example further below.)

Email & Actions Email Confirmation Ninja Forms 3

Email & Actions – Email Confirmation

 

Emails & Actions – Success Message

Success Message: Message seen right after the user has clicked the submit/send button.

Email Actions Success Message Ninja Forms 3

Email Actions Success Message

 

A tip!

Sometimes it can be really nice to show the user directly on the screen what was submitted. Click the Insert Merge Tag and select All Fields. Right before the last sentence write something like: Here is the information you submitted: -then use the All Fields tag-

Email & Actions Success Message Insert Merge Tag Ninja Forms 3

Email & Actions Success Message
Insert Merge Tag Ninja Forms 3

 

Emails & Actions – Email Notification

Email Notification: Send the submitted information to the admin.

Email & Actions Email Notification Ninja Forms 3

Email & Actions Email Notification

 

Advanced – Display Settings

Advanced Display Settings Ninja Forms 3

Advanced Display Settings

 

Advanced – Restrictions

Advanced Restrictions Ninja Forms 3

Advanced Restrictions

 

Advanced – Calculations

Advanced Calculations Ninja Forms 3

Advanced Calculations

 

If your editing a form. Click Done.
Then click the big X in the top right corner to exit the Form Fields area.
Click Add New Form. The following screen will be seen.

 

Add New Form

Start with a new form or select one of the 3 templates: Contact Us, Quote Request or Event Registration (check out my Form template tutorial + working with columns).

Add New Form Ninja Forms 3

Add New Form

 

To find the submission (entries) section go to the All Forms screen. Hover over the form you are wondering about and then select View Submissions.

 

A few tips!

To change the language of “This field is Required!”

Add this code to your functions.php file. Then change “this is my required field text.”

add_filter( 'ninja_forms_i18n_front_end', 'my_custom_ninja_forms_i18n_front_end' );
function my_custom_ninja_forms_i18n_front_end( $strings ) {
 $strings['validateRequiredField'] = 'this is my required field text';
 return $strings;
}

Thanks to Iain! https://gist.github.com/polevaultweb/835f5b2886a9b6139a47e7d52315babf

If you did not want to use any required field text then leave ‘this is my required field text’ blank. If you also want to hide the star then find the CSS (right click inside the browser window and select Inspect) to hide the star for each individual field. (CSS would be to display=none)

 

Check out my tutorial showing the default form templates and how to use columns in Ninja Forms.

 

Extend

There are numerous extensions one can add to Ninja Forms. Addons are also being updated to work with Ninja Forms 3.

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

(Btw an affiliate link gives me the chance to get some percentage of a sales made through the above link.)

Related Posts:

  • Customizing Altitude Pro – Genesis child themeCustomizing Altitude Pro –…
  • Styling a Ninja Forms contact formStyling a Ninja Forms contact form
  • Ninja Forms Walk ThroughNinja Forms Walk Through
  • Additional widget areas for Genesis themesAdditional widget areas for Genesis
  • Create your own author bio box in WordPressCreate your own author bio box in…
  • The Themify Parallax themeThe Themify Parallax theme
  • Ninja Forms default Form templatesNinja Forms default Form templates
  • Customize CSS to style your siteCustomize CSS to style your site

Share this:

  • Email

Categories: Featured, 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. Mike says

    22 January - 2018

    How do I delete a field? There’s nothing on the form that I can find. Driving me crazy.

    Reply
  2. Kyla says

    7 January - 2018

    When submitting a form that will go to PayPal, where do I place the item description that shows up on the paypal form?

    Reply
  3. Bhekzin says

    8 October - 2016

    How to remove “Fields marked with an * are required” and the stars on those fileds. On prevois vrsions of Ninja Forms the was such a settin but i don’t see it on Ninja Forms 3. I prefer clean forms and those stars and text about the form do not cut it for me.

    Reply
    • Paal Joachim says

      8 October - 2016

      Hi Bhekzin

      I added some additional information to the section with the code to change the phrase of the required field text.
      Basically leave the text blank ‘ ‘ and then find the CSS for each star you want to hide and use a display none to hide them.

      Reply
  4. arul says

    23 September - 2016

    How to use Advanced Calculations?

    Reply
    • Paal Joachim says

      1 October - 2016

      Hi Arul.

      There is some information about using calculations on this page: https://ninjaforms.com/docs/form-settings/

      Reply
  5. Julián says

    14 September - 2016

    Hi Paal!,

    thanks for the article, very clear and intuitive. Just a question about one of the bottom sections –> “A few tips”. Related to this section, I need to translate the strings of field labels (“Username”, “Password”, “Remember Me”…) and some text/messages in a Ninja Form (login form).

    So as you point in your filter example with the string “validateRequiredField”, I would need to know the array keys for the other strings (“Username”, “Password”, …) so I could setup the appropiate translations in my language for these labels/messages in the form.

    Any idea about them or a URL/location when I could find these array keys?

    Thanks in advance and congrats again for the article! 😉

    Regards,
    Julián

    Reply
    • Paal Joachim says

      14 September - 2016

      Hi Julián

      I will look into it and respond as soon as I have something to share.

      Reply
      • Julián says

        14 September - 2016

        Hi Paal,

        very grateful, thanks again!

        Reply
        • Paal Joachim says

          15 September - 2016

          Hi Julián

          I asked the developers. There reply was “The strings you mention (“Username”, “Password”, “Remember Me”…) are either field labels or in and add-on that we have yet to make compatible with 3.0. When they are, we will have filters for those as well.”

          The translation engine is something they are working on.
          I will add more information either to this post or a new post when it is available. I will let you know..:)

          Reply

Leave a Comment 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.

© 2019 · 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.