Create Contact Page with Ninja Forms Plugin in WordPress

Ninja Forms is a free contact form plugin available for WordPress websites. You can create very interactive Contact Form using Ninja Form with a very little effort. In this post, I will show steps to create Contact Page with Ninja Forms Plugin in WordPress. The Ninja Forms plugin can easily create complex forms with drag and drop functionality with ease. What nice about Ninja Forms is that it can be added on your website with widget, shortcode, template function or append it automatically to the page you choose. It is one of the best contact form plugins in WordPress with 500,000+ active installs.

Features of Ninja Forms Plugin

  • The base plugin for Ninja Forms is free it and can be added to any number of websites and blog.
  • There are many Premium plugins for Ninja Forms that can extend the functionality of Ninja Forms such as connecting with Campaign Monitor, Salesforce, SMS notifications, etc.
  • Ninja Forms plugins is well documented in the official website of the plugin and there is huge support of community.
  • It has four Anti-Spam options.

Create Contact Page with Ninja Forms Plugin in WordPress

Step 1. Plugin Installation

Create Contact Page with Ninja Forms Plugin in WordPress

From Dashboard  > Plugins  > Add New, search for Ninja Forms in the search box. Click on Install Now once it shows the plugin and click on Activate to active the plugin. Once activated you’ll see new Form menu in your WordPress Dashboard like below screenshot: 

2-ninja-form-menu

Step 2. Add New Ninja Form

Click Add New in Dashboard > Forms > Add New. You will see an interface to configure your form as below screenshot.

Create Contact Page with Ninja Forms Plugin in WordPress

As you can see in the screenshot above, there are three tabs. Build Your Form, Email & Actions and Settings. At the left side of the screen you will see field buttons that you can add to your form. There predefined commonly used fields like First Name, Last Name, etc in User Information Section; Tax, Total in Payment Fields Section. Likewise there are other fields in Template Fields section, which includes Textbox, Checkbox, List, etc.

Create Contact Page with Ninja Forms Plugin in WordPress

We would like to create a contact form with form fields like: Name, Email, Subject, Message and a Submit button.

So, let’s start with adding a First Name, so click on Textbox, you will see a screenshot as below, where I have given the Label Name, and checked as required in Restriction Setting section. Click on Email field, Textbox, Textarea and Submit to add an Email, Subject, Message and Submit button to your form.

Click on Save and Save Your Form popup will show up as in the screenshot below. Give the name to relevant name to your form like. Contact Author or simply Contact Us.  Here we have named it “Ninja Test Contact Form”. Click Save before you proceed to next section.

Create Contact Page with Ninja Forms Plugin in WordPress

Step 3. Configuring Ninja Form Email & Action

6-Email and Action Tab

You need to do a lot of work to configure the contact form properly. So, Click on the Email & Action Tab.  You will see above screenshot.

Create Contact Page with Ninja Forms Plugin in WordPress

Click on Add New. You will see another interface as screenshot above. This section is to tell Ninja Form what you want to do, when someone fills the contact form. Give a name to the Action, here I have given “Send Email” to the action name. In Type, select “Email” if you want to send an email , or “Redirect” to redirect the user to different URL or “Success Message” to show a success message.

Also Read:   Prevent Image Theft with Easy Watermark Plugin in WordPress

8-Select Type of Response

And type in From Name, From Email Adress, To Email Address, Subject and a Email Message accordingly. In the Email Message type in a response message. You can add the field of the form as well by clicking on the dropdown button next to Add Media as well which is shown in the screenshot above.

Create Contact Page with Ninja Forms Plugin in WordPress

Click on Save at the bottom of the screen. (Do not forget that before going to the next tab)

10-Setting Tab

Click on Settings tab, you can configure final setting for your custom form. From this tab you can add a contact form to your page aswell. Edit your Form Title if you want to change. On add form to this page drop down select the page, where you want add the contact form. Here I am choosing Contact Me.  Click on Save to save the form.

If you haven’t created a contact page yet then, you can follow the next step.

Step 4. Creating a Page and adding Ninja Forms

11-All Forms

From Dashboard > Forms > All Forms, find the form you just created as in the screenshot above. For this tutorial it’s, Ninja Test Contact Form, so copy the shortcode i.e. [ninja_forms id=8]

12-Add a Page

Now we will be creating a new contact page. Go to Dashboard > Pages > Add New to create a blank page. Add a suitable title Contact Us or any. Here we have Contact as a title (see screenshot above). Paste the shortcode you copied .i.e [ninja_forms id=8] (Yours could be different than this) and click on Publish/Update to save the page. Finally, click on the Permalink below the title of the page to see our newly created contact page.

Create Contact Page with Ninja Forms Plugin in WordPress

Your contact form will look similar to screenshot above.

Submission

One of the coolest features of Ninja Forms is that from WordPress dashboard itself, you can see the form submission data. You just have to go through Dashboard > Forms > Submission and select the form as shown in the screenshot below. You also have the option to Download All Submissions by clicking on the button of the same name.

This is one of the ways to add Ninja Forms and there many other ways to do it. If you like this plugin, please visit its official site for full documentation on many other cool yet free features of Ninja Forms.

The following two tabs change content below.

Jems

I am Jems. I am an occasional blogger and technology enthusiastic. I have a passion to learn. I wear multiple hats of web developer, consultant, data analyst and digital marketer. 🙂

Share This Post