Ninja Forms: How to Create a Submission Form – Working Example

Posted OnJan 27, 2015     CategoryPlugins     CommentsNo comment

In this article we will show you how to use Ninja Forms to create a submission form for your website users.

Please note: For this article you will need to install the Ninja Forms plugin.

Step 1) Login to the WordPress Dashboard.

Step 2) Choose Forms >> Add New from the Admin Menu on the left-hand side. The first section is Form Settings, which start with simple behaviour settings, including whether or not you want to display the frm title, what page you want to add the form to, and whether or not a user has to be logged in to view the form (saving on spam).

2

Step 3) Submitting via AJAX (Asynchronous JavaScript and XML) will allow for sending the form without reloading the whole page afterwards. You can also choose to clear and/or hide the form once completed.

3

Step 4) Limit the number of submissions by adding a number in the box below. You can also create a message that will be shown when the limit has been reached, e.g. Sorry, no more submissions, etc.

4

Step 5) The Field Settings are for creating the fields that will feature in your submission form. You can add as many or as few as you like, and the Template Fields is where you start. Add fields for Textboxes, checkboxes, anti-spam, password entry and more.

5

Step 6) The Layout elements will be in either visual or HTML form. The user information is important as you need to capture important details such as email address, phone number and of course, the name of the person submitting an enquiry/submission. If you are selling products via your site, you can also add payment details to your form, e.g. Tax, Total and Sub-Total. These are useful for when people are invoicing you via the site forms.

6

Step 7) Once you have chosen your fields, save them using the Save Field Settings button. You can also drag and drop the fields to change the order of the fields.

7

Step 8) Go to Notifications next. These are important, as it sets up how the notifications are going to look when they come through to your Inbox, so read them carefully and make them easy to follow.

8

Step 9) Now that the form is complete, click on Form Preview on the navigation bar, and it will show you how it looks when live. Below is an example of how the form looks on a generic home page.

9

Adding a Ninja Form to a Post

Step 10) To add your newly created form to a post, head to Forms >> All Forms. From here, copy the shortcode for your chosen form.

10

Step 11) Open a new post by going to Posts >> Add New, and then paste your form shortcode into a post, as shown below. Make sure that the editor is set to Text, or the shortcode won’t work.

11

Step 12) Publish your post and your Ninja Form will be included, as the example below shows.

12

Setting up a Ninja Forms Widget

Step 13) To add your form to the sidebar of your website using the Ninja Forms widget, head to Appearance >> Widgets from your Dashboard. Scroll down to Ninja Forms Widget and drag and drop it to where you want it to feature. All you have to do then is choose which form you want to show on the sidebar (if you only have one form, ignore this).

13

Step 14) Once saved, head back to your website to see your Ninja Form live in your chosen sidebar.

14


Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend