Custom Contact FormNinja Forms

How To use Nija Forms

*Image sourced from Ninja Forms.

Our themes have several built in options for Contact forms, however some users want to create their own contact forms to get specific information from clients, and or create contact forms to send to clients to gather information. Building a custom contact form can be easy using Ninja Forms.

This tutorial shows you how to create a basic custom contact form, for further information on all the options in the form take a look at the plug-in providers documentation here.

Video Tutorial

View our video on how to create a custom Ninja Form:

You can also view Ninja Forms full documentation here if you wish to create your own unique contact forms.

Building your form

Step 1 – Download and Install Ninja Forms

First you should download the Ninja Forms plug-in and install it to your WordPress.

  1. If you don’t already have Ninja Forms installed, go to Dashboard > Plugins > Add New.
  2. Search for Ninja Forms in the box provided, and click “Install Now.”
  3. After the installation finishes, click “Activate” and you’re ready to work with Ninja Forms.

Step 2 – Add New Form (Or modify existing)

Once you have done this, there will be a new “Forms” area in your WordPress admin bar. To add a new form, go to “Forms” and select add new form:

forms-add-new-ninja-forms

Step 3 – Build Your Form

Once you have done this you will have 3 tabs:

Contact_Form_Tabs

 

Whilst in here you will have all the available options on the left, and the current form structure on the right.

ninja-forms-details

To add new items, simply select an item on the left and it will appear as the last item on the right. In the example above I selected the text field and it opens up on the right.

You can continue to build out your form until you’ve got all your required fields.

Step 4 – Learn More

For further details on all the sections available as well as the advanced options, please refer to the ninja forms documentation here:

Ninja Forms – Building Your Form

Step 5 – Emails and Actions

Review the next steps in emails and actions to learn how to send the email correctly to your email account.

Ninja Forms documentation provides further details on all the available fields and options.

Step 6 – Add To Site

Review the section on adding the ninja form to your pages.

Step 7 – Test Form

Make sure to test the form to see if you’re receiving submissions.

Emails & Actions

Once you have done this you can save the form.

Now you will want to go to the second tab ‘Email and actions’ section, this is where you will set up where to send your emails, and the confirmation messages etc. You will see the following:

email_and_actions_contact_form

You should update the email admin area, you can use the following options for Email Admin:

  1. Choose Type “Email”
  2. Add the from name (Users name from form)
  3. Leave the from email BLANK
  4. Add the to email (this is your email)
  5. Subject – add the email subject, usually “contact form message” will work.
  6. Make sure to add all fields if not already present, click the Insert All Fields Button
  7. Advanced Settings – this will be for a reply to address – add users email from form
  8. Make sure to save this action.

ninja-form-email-admin-details

NOTE! Do not add a from address, this can cause your emails to be blocked by your hosting provider.

Ninja forms will automatically add the reply-to email from the user so you should be able to just click respond and it will send to the correct email.

Save the form at the bottom.

Learn More

To learn more about emails and actions, please refer to the Ninja forms documentation below:

Ninja Forms – Emails and Actions

Adding a Form to your page

Now you should go back to the main forms page, here you can copy the Ninja Forms shortcode and paste it in to your contact page:

contact_form_shortcode

Once added to the page, save the page, view and test.

Submissions

Ninja Forms has a great feature allowing you to track all submissions. This means that even if the email was not sent directly to your email address for various reasons, it will still be saved in your Ninja Forms plugin database.

To view submissions, go to Forms > Select the form you wish to view:

select-ninja-form

Then you will see the 3 tabs, and then a preview and submissions button. Select Submissions:

Cursor_and_Forms_‹_Mark_Allen_—_WordPress

From here you can view all submissions and entries, with the most recent showing at the top:

Cursor_and_Submissions_-_Contact_Form_‹_Mark_Allen_—_WordPress

Trouble Shooting

Ninja forms provides a great article for troubleshooting your docs:

Trouble Shoot Ninja Forms

You can also review our documentation on troubleshooting here.

Flothemes – Contact Form Email Issues