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.

 

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

 

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

The following screen will be seen.

 

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.

 

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.

 

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.

 

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.

 

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

 

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

 

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

 

Emails & Actions – Success Message

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

 

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-

 

Emails & Actions – Email Notification

Email Notification: Send the submitted information to the admin.

 

Advanced – Display Settings

 

Advanced – Restrictions

 

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

 

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