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.)
How do I delete a field? There’s nothing on the form that I can find. Driving me crazy.
When submitting a form that will go to PayPal, where do I place the item description that shows up on the paypal form?
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.
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.
How to use Advanced Calculations?
Hi Arul.
There is some information about using calculations on this page: https://ninjaforms.com/docs/form-settings/
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
Hi Julián
I will look into it and respond as soon as I have something to share.
Hi Paal,
very grateful, thanks again!
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..:)