Custom Contact FormNinja 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.
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.
- If you don’t already have Ninja Forms installed, go to Dashboard > Plugins > Add New.
- Search for Ninja Forms in the box provided, and click “Install Now.”
- 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:
Step 3 – Build Your Form
Once you have done this you will have 3 tabs:
Whilst in here you will have all the available options on the left, and the current form structure on the right.
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:
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:
You should update the email admin area, you can use the following options for Email Admin:
- Choose Type “Email”
- Add the from name (Users name from form)
- Leave the from email BLANK
- Add the to email (this is your email)
- Subject – add the email subject, usually “contact form message” will work.
- Make sure to add all fields if not already present, click the Insert All Fields Button
- Advanced Settings – this will be for a reply to address – add users email from form
- Make sure to save this action.
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.
To learn more about emails and actions, please refer to the Ninja forms documentation below:
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:
Once added to the page, save the page, view and test.
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:
Then you will see the 3 tabs, and then a preview and submissions button. Select Submissions:
From here you can view all submissions and entries, with the most recent showing at the top: