How to install and use Ninja Forms in WordPress

By on May 3rd, 2021

In our daily routine, we see many forms and fill them up for personal or professional reasons. What is a form, and why is it used? A Form is structured document with a fixed arrangement. Forms are used to collect the required information logically, meaningful for communication, and pass to another entity.

There are many plugins available to create customized websites or web pages. Similarly, there are form builder plugins. WordPress has so many form builder plugins in the WordPress plugins repository, but the Ninja forms plugin is great and have more integrations than any other WordPress form builder plugin. The Ninja Forms plugin is the most user-friendly WordPress contact form builder, and for the beginner, this is 100% friendly. You can build beautiful WordPress forms without being a designer. For adding the advanced features, you won’t need a developer to word for you. You can accept payments and donations with a payment form or donation form.

You can get more forms like the signup form and lead generation form used for your business. The Ninja Forms makes WordPress GDPR compliance simple. If you need a form in minutes, use a pre-built template to get started fast. You will get templates like Contact Form, Registration Form, Application Form, Paypal Form, and many others. The Ninja Forms plugin is mobile responsive and blends beautifully with any well-designed theme. Let’s see how to install this plugin and how to use it to create awesome forms.

How to install Ninja Forms in WordPress

Step 1: Firstly, log into your WordPress account dashboard using your username and password.

You will require administrator login information because we are going to install a plugin in our WordPress site.

Step 2: Then, click on the Plugins tab available in the left-sided tab section.

Install a new plugin in WordPress

Step 3: After that, You will see a list of plugins. You will also find an Add New button at the top-right corner of the page. And also in the left sidebar. Click on the “Add New” button anywhere on the site.

Plugins list in WordPress

Step 4: Now you will see a WordPress plugin repository. There is a search box where you have to type your plugin name. In this case,  (Ninja Forms).

Step 5: Now you will see search results for our search query. Every plugin has an install now button on the top-right corner of the card. Then, find the correct plugin from the list, Click on the Install Now button to install the Ninja forms plugin.

Install Ninja Forms in WordPress

Step 6: The Installation process will take a couple of seconds or minutes in some cases. Once the installation process is complete, The install now button will turn into the Activate button. Click on the Activate button to activate the plugin.

Activate Ninja Forms plugin in WordPress

Step 7: Once the plugin is active, you will see a plugin list and also the success message on the screen.

So, that’s all for installation. We can now start creating awesome forms using Ninja forms on WordPress. Now, we will learn How to use this plugin to create new forms.

How to create forms in Ninja Forms

Step 1: Log into your WordPress account dashboard using your Username and Password.

Step 2: Then, click on the Ninja forms tab available on the left sidebar of the admin panel.

Ninja forms in WordPress

Step 3: Now you will see a main page of Ninja Forms. To create a new form, you have to find and click on the Add New button. See the below image for reference.

Add new form in Ninja Forms

Step 4: As a result, you will see a list of predefined forms. But you can also create a custom form with custom fields according to your requirements. To create a new form from scratch, click on the first option called the “Blank Form”.

Create a blank form in Ninja forms

Step 5 – Field List: As a result, you will see a blank form on the left side and the list of fields on the right side. You can use these fields to create your form. Different fields will validate different type of data.

Fields available in Ninja Forms

Step 6 – Field Drop Area: In the left side of the screen, you can drop the Elements to structure your form. Just select the desired field from the right side of the screen and drop it on the left side. You can add as many fields as you need in a specific form. You just have to drag fields from the fields list.

Visual Editor in Ninja Forms

Step 7: Now, we will see how these fields works. First, you have to click and select any one of the fields. For instance, we are selecting the First name field in this tutorial.

Drag and drop first name field

Step 8 – Drag Field: After that, you can drag that field to the field drop area and drop it into the blue box. The process looks like the below image. 

Drag and Drop a field in Ninja Forms

Step 9 – Drop Field: As a result, you will see a First name field in the form preview. See the following image for reference.

Add a field in Ninja Forms

Step 10: You will have to select the field of your choice as per the steps listed above and drop it in this area, whichever field is required for your form. In this example, we have First name, Last name, Phone and E-mail as fields in the form.

Demo form created in ninja forms

Step 11 – Edit Field: After that, your required form fields are ready. In case you want to edit any field, Click on a field you want to edit.

Edit a field in ninja forms

Step 12: As a result, you will see a section coming in on screen from the right, just as below image. In this section, you will see a Label field, which helps you change the form label. You can also see a Toggle button just beside the field. In case if the field is compulsory. Then turn on the toggle, and the field will be required for the submission.

If the field is Required, The user will not be able to submit the form without filling up the proper information in that field.

Step 13: After that, click on the Display button to see more settings available for the field. See the below image for your reference.

Display options for Ninja forms field

Step 14: You will see the options like default value, Placeholder, and description. The first field called Default value will help you to Display some default value in the field. Just click on the field and type the value as per your requirement. The second field is Placeholder. This field will help you to place some background/ghost text in the field. And the final textarea is available here to give some description related to this field. Even you can customize the description with the tools available upon the textarea.

Display options for First name field in Ninja forms

Step 15: Once you complete the editing process as per your requirement, You have to click on the Done button, which is available at the right top corner of the page.

Step 16: In case you want to see your form’s preview, the preview button is available at the left top corner of the display. Whenever you click on that, you will see your form preview on your screen like the following image. 

Step 17: As a result, the preview of your form will open. If you want to add a form or edit a form, there is a plus(+) button in blue color at the right side bottom corner to edit in your form field. See the following image as a reference.

Preview changes in Ninja forms

Step 18: Once all the editing is done on the form, you can publish that form for displaying it on the WordPress site. The publish button is in blue available at the top-right corner of the page.

Publish a form in Ninja Forms

Step 19: Just after clicking on the publish button, you will see a new section on the right side of the screen. You just have to enter the Form title here. So you have to type your form name in that box. for example (contact details). And you can also skip this step and publish without mentioning the name.

Step 20: After mentioning the form name, you can click on the publish button to publish your form to your website. See the below image as a reference.

Select the form title and publish form in WordPress

So, this is how you can create forms using Ninja forms. You can create as many forms as you want for all different purposes using the same method. Now, We have to integrate these forms in a WordPress site. Right now, Our forms are published but we have to show them somewhere on the site. For that, we will use a Form short-code. Let’s see how it’s done.

How to display Ninja Forms in a WordPress site

Step 1: Log into your WordPress dashboard account using your Username and Password.

Step 2: Then, click on Ninja Forms from the left side of the page, the same as the below image.

Display Ninja forms in WordPress

Step 3 – Form List: Now you are seeing the Ninja Forms section. You will see some options like forms, services, apps & integrations. And, you will also see the list of the forms available on your site.

Step 4: You can search a form using the search box. Search a form if there are a lot of forms on the site.

Step 5: The forms list contains the information about a form like Title name, Shortcode, Date created. From that, click on Shortcode and copy that code to display your form to your page.

Shortcode to display a form

Step 6: After that, click on the pages tab for publishing your form on a specific page. You can find the Pages tab on the left-side tab section.

Pages section in WordPress

Step 7 – Edit Page: Now you will see the list of pages available on your site. Out of those page, choose one page on which you want to publish your form and hover your mouse cursor on that page. You will see the options like Edit, Quick Edit, and View. Now click on the Edit link to edit the page.

Step 8: The page will open in the edit mode. Now find an Add button with the plus icon (+) in blue color at the page’s left-top corner.

Add new element in WordPress post or page

NOTE: If you are using classic WordPress editor, you can place the short-code wherever you want in the editor. You can also use this short code anywhere on widgets as well as some other part of the website. If you are using Gutenberg editor, Keep following the steps.

Step 9: As a result, you will find the Element list on the left side of your screen. You can also find a Search box on the top of the Element list section. Click on the search box and Type Shortcode to find the Shortcode Element.

Step 10: After that, you will see a shortcode element in the search results. See the following image for reference.

Drag and drop shortcode element in WordPress post

Step 11 – Drag Shortcode: Then, drag the shortcode element left to the right side of the screen, as shown in the below image.

Step 12- Drop Shortcode: In the Shortcode box, you have to type the form shortcode. In case if you have copied your shortcode, just paste it in this box.

Step 13 – Paste Form’s Shortcode: Now, paste your Shortcode of your form in the shortcode box just like the below image.

Paste form short code in WordPress page

Step 14: After that, you have to update your Web Page content. Click on the Update/Publish button. The Update/Publish button is available at the right top corner of the page.

After performing all the steps till now, you should have a fully working Form on your WordPress site. Open a page where you have used the short code and you will see a form instead of that short code in WordPress.

 

Conclusion: Creating forms in WordPress is a very easy task, It does not matter how many fields and what kind of fields a form has. And, there are tens of popular WordPress forms plugins available in the WordPress Repository. However, We selected Ninja forms for this tutorial because It is one of the easiest plugins from all. It simply allows us to create a form from the list of fields available. So, we hope you really enjoyed our tutorial and we hope you will never have to look for a tutorial to create a form in WordPress. If you have questions, please let us know in the following comment section. We will respond as soon as possible.

Leave a Reply