Are you wondering how to add a contact form in WordPress? Or do you want to learn how to add a contact page on WordPress? If yes, then, this guide is for you.
Every website needs a contact page with a contact form. Adding a contact form allows your visitors to connect and interact with your site easily. Also, this helps your visitors to clear their doubts and queries about your services or products. This may enhance both the interaction and conversion on your site.
Besides, you’re able to collect the email addresses of your visitors via the contact form. With the collected information, you’re able to update customers about products/services, campaigns, news, etc. Hence, it helps develop strong relationships with customers.
Having said that, you might be wondering whether it’s easy to create contact forms for your WordPress site or not. So, to help you, we’ve prepared an easy guide on how to add a contact form in WordPress.
So, let’s get started!
Why Need a Contact Form and Page on Your Website?
Before getting into the steps to add the contact form, let’s discuss the reasons you need it for the site.
- Reachability: By using contact forms, your visitors can easily reach out to your website. Because not all customers will go through checking their email or social platforms just to contact your site.
- Easily collect information: You can make some information mandatory to be filled in. You’ll easily get the required information from visitors such as name, contact info, etc. As it can’t be collected via the old method by only adding your email address on the site.
- Spam protection: It protects you from spam which is a pain in the neck. Adding an email address isn’t an effective method that exposes it to spammers and they can easily send spam messages. Hence, to avoid annoying spambots, use contact forms to allow visitors to contact you.
- Control over information: You can have complete control over the information collected with contact forms via your site. Instead of exchanging a number of emails which is a hassle for both users and site owners.
- Organized information: You’ll receive organized information as most contact forms include subject lines, recipient’s name, message, etc.
With that said, now let’s go and see how to make a contact form and contact page in WordPress.
What’s the Best Way to Add a Contact Form in WordPress?
As we’ve already known about the importance of having a contact form in WordPress. Now, we also need to figure out the best way to create a contact form on the website. So, let’s have some discussion on different ways to add contact forms.
Generally, developers can code themselves to create a contact form on their website. It’s one of the ways of having a contact form. But not everyone who wants a website has coding skills.
Thankfully, in WordPress, there’s no need to code! There are plenty of easy-to-use plugins that help you build contact forms super fast and super easy. Best of all, most of them are available free of cost.
So, here are some of the best WordPress contact form plugins you can use:
WPForms is a beginner-friendly WordPress form builder plugin. It allows you to create amazing forms without coding skills. This plugin provides you with pre-built templates of different types of forms to effortlessly start your task. Hence, you can easily create any forms such as contact forms, feedback forms, subscription forms, payment forms, etc.
WPForms plugin is free to use and able to download from WordPress.org. Or you can upgrade to the premium version by choosing one of its plans below:
- Basic Plan: $49.50/year
- Plus Plan: $99.50/year
- Pro Plan: $199.50/year
- Elite Plan: $299.50/year
Contact Form 7 is the most popular free WordPress contact form plugin with 5+ million active installations. It allows you to create and manage multiple contact forms easily. Moreover, it includes other features like CAPTCHA, integration with Akismet spam filtering, and so on.
Contact Form 7 plugin is completely free to use and download from WordPress.org.
3. Ninja Forms
Ninja Forms is yet another stunning plugin to create beautiful WordPress forms. You can easily drag and drop a variety of form fields into row and column layouts. The plugin assists you to create not only single but also multiple-page forms. Moreover, it lets users upload files of any format like doc file, pdf, excel sheet, etc.
Ninja Forms plugin provides you with a free version that can be used from WordPress.org. It also has the premium version. The pricing plan of the pro version are:
- Personal Plan: $49/year.
- Small Business Plan: $99/year.
- Web Design & Dev: $199/year.
- Agency Plan: $249/year.
Our Recommendation – WPForms
Among the mentioned plugins, we’ve chosen WPForms for this tutorial.
Because WPForms is the most user-friendly plugin to create any type of form. It also allows you to easily insert your forms in the blog posts, pages, sidebar, widgets, footer, and many more.
Not only that, but you can also get instant notifications while you receive the form submitted by customers.
How to Create a Contact Form in WordPress?
Here, we’re going through the step-by-step process to create a contact form on your WordPress site by using the WPForms plugin. Also, you can use any WordPress theme for your website. Here, we’ll be using the Astra theme.
So, let’s check out the steps given below:
Step 1: Install and Activate WPForms
First of all, log in to the dashboard of your WordPress website. Then go to the Plugins menu and click on Add New.
After that, you can see a search bar at the top-right side of your dashboard. There you need to type “WPForms” to search for the plugin for installation.
Once you’ve found the plugin, click on the Install Now button.
After completing the installation, you can see the Activate button. Click on it to see whether the plugin is working.
After activating the plugin, you can see an extra menu ‘WPForms‘ in your dashboard.
Step 2: Create a Contact Form
Now, you’ll be able to start creating your contact form easily.
First of all, go to the WPForms menu and click on Add New from your dashboard.
After clicking on Add New, you’ll be directed to the Setup page. You can write the name of your form before creating one. There, you can see the templates and use them to create different types of forms. Also, you can get the blank form to create from scratch.
So, there are 2 methods: using a template and creating it from scratch. The steps for each method are given below. Now, let’s start!
Method 1: Use a template
Here’re the steps to create a contact form using the template.
After finding your suitable template, when you hover it, you can see the “Use Template‘.button. Click on it. Or before using the template, you can just click on the ‘View Demo‘ button to see how the form appears.
We’ve selected the ‘Simple Contact Form‘ template to show you a demo.
After clicking on the template, you’ll go to editing the form page. There, you can see the Fields section on the left side to add any fields using the “Add Fields” menu. You can see standard fields and other options of fields, which can simply be dragged to add fields in the template.
Also, you can customize the contents of added fields as you want. For that, go to the “Field Options” menu, where you can easily change the label, formats, descriptions, and so on.
Method 2: Create a Form From Scratch
To create a form from scratch, go to the “Blank Form” section. Then hover on it and click on the Create Blank Form button.
Now, you’ll be directed to the editing section of the “Blank Form”. There you can see standard field options in the Fields section, using the “Add Fields” menu.
Simply drag & drop the required fields to include in your form as explained in “Method 1: Use a template”. You can insert any field according to your choice. Also, edit the field’s content with the same process by going into the “Field Options”.
Delete and Reorder Fields
After customizing the contents of your form from any of the 2 methods, you can also delete the field. If you click on any field, you can see the delete icon. Go to the Delete icon and click the “OK” button to delete it.
Also, to reorder the field, click on a specific field, where you’ll find “Drag to reorder”. You simply need to drag and field and arrange them in the order you want.
After completing editing your form, either way, click on the Save button on the top-right side.
Step 3: Configure Form Settings
Moving further, the next step is to configure the settings for the form you’ve just created. To do so, go to the Settings section on the left side of your WPForms screen. There, you’ll find 3 setting options: General, Notification, and Confirmations. Because we’re using the free version, other options are available only for pro users.
Now, let’s configure all the 3 options.
The first one is General settings. There, you can configure different options like form name, form description, submit button text, etc. You can customize those contents as you want. Most of all, you need to “Enable anti-spam protection” to prevent spam bots and spam messages.
Below that, you’ll also be able to configure advanced sections such as adding a CSS class for forms and buttons, etc. You can simply leave the default settings but don’t forget to click on the Save button after configuring them.
The Notification allows you to receive alerts when visitors submit their forms. In this setting, you can configure how you’ll receive emails or messages.
By default, there are “Enable Notifications” but you can disable them to avoid notifications.
The first element to configure is “Send to Email Address”. There are already smart tags that use admin emails from your WordPress settings. However, you can also add other email addresses of recipients using commas.
The next one is “Email Subject Line” which is by default written “New Entry”, followed by the name of the form. But by using smart tags, you can add field options as well.
Moving ahead, you can also customize the content of the From Name. Similarly, From Email is set to the admin email address by default but you can simply enter a different sender’s email.
The other element is “Reply-To Email Address” which is used as the recipient of any replies. So, it’s better to set the From Email element to your own email address or to the admin’s email.
The final element is the Email Message which by default contains all fields. But you can customize the email’s content.
‘Confirmations’ is the last section of the configuration. Here, it lets you configure confirmation messages for visitors who’ve submitted their forms.
The Confirmation Type element gives you 3 options: message, show page and go to URL.
The first one is a Message which is displayed as soon as users submit the form. You can also customize the content of the message from the Confirmation Message element.
The other option is Show Page. In this option, you can direct the visitors who’ve submitted the form to any of the web pages of your website. You can enter the page name from the Confirmation Page.
The last option is to Go to URL. This redirects your visitors to any URL you’ve entered in the Confirmation Redirect URL. Simply add any link to the pages you want your visitors to redirect.
Step 4: Save Your Contact Form
Lastly, click on the Preview button to see how your form appears to your users. If you think your form is perfect, just click on the Save button.
How to Add a Contact Page on WordPress?
After you’ve finished creating the form, let’s take a look at how to add a form to your page. So, let’s begin!
Step 1: Create a New Page on Your WordPress Site
First of all, you need to create a new page on your website to add forms. So, go to the dashboard, click on the Pages and go to Add New to add a new page on your website.
After that, you’ll be taken to the editing section of the page.
Step 2: Add Your Contact Form on the Page & Publish
After creating a new page, add a title for your page as we’ve written: “Contact Us”. Now click on the + button in the “Type/or choose a block”. Then, you’ll see the search bar where you need to enter “WPForms”.
Once you’ve found the WPForms, click on it and the wizard of WPForms will appear in your text editor. Now, click on “Select a Form” where you’ll get the options of forms you’ve created. Select any of the forms you want to embed in your page and the form will appear in your text editor.
After you’ve added the form to your page, click on the Publish button at the top-right side to publish your contact page.
Now that you’ve published your “Contact Us” page, you might not see the page link on your homepage of the website. For that, you need to add the link to the “Contact Us” page in a visible location such as a menu, footer, or sidebar section.
So, let’s take a look at how to add it.
Adding Contact Page Link on Menu
First of all, let’s see how to add contact page to your WordPress menu. For that, log in to the dashboard, then go to Appearance>Menus. There, you’ll see a Menu Structure on the right side. It contains a form to create a new menu.
Because it’s a header menu, you need to give the Menu Name of your choice, here we’ve written “Primary Menu”.
After that, checkmark the “Primary Menu” which is within the Menu Settings. Then, click on the Create Menu button.
After that, you’ll see the Page section on the left side, click on “View All”. There, you’ll see Contact Us page that you’ve recently published, just checkmark on it. You can also add some custom links or any other pages you want to have on your menu. Then, click on the Add to Menu button.
Finally, click on the Save Menu button after adding the contact page at the bottom right.
Now, go to the “Manage with Live Preview” button at the top of the menu section. You’ll be directed to the live editing section.
Here, you’ll see the Contact Us menu item in the header section. If you click on that menu, you’ll go to the Contact Us page link.
Adding Contact Form on Sidebar
Now that you’ve added the link to the contact page in the menu, you may also want to have the contact form in the sidebar. You can do so by staying on the save live editing page.
Click on the back arrow button of the Menus. You’ll see a bunch of options that can be customized and edited. Just click on the Widget option.
Now, you can see the Main Sidebar, click on it.
There, you’ll see the + button, click on it and search WPForms. Once you’ve found it, click on the WPForms widget.
And Select a Form you want on your sidebar. Now, you’re all set.
Furthermore, you can drag your contact form either on the top or anywhere you want to display it on the sidebar.
Adding Contact Page Link on Footer
Adding a contact page link on the footer is similar to that in the header menu. Go to Appearance and click on the Menus option from your dashboard.
There you can see the Menu Structure on the right side. Give the Menu Name of your choice although we’ve written “Important Links”. Now, checkmark on the Footer Menu and click on the Create Menu.
Go to the Pages section and checkmark the Contact Us page and click on the Add to Menu.
Also, you can add some custom links or other website pages to your footer menu. After that, click on the Save Menu button. Then, click on Manage with Live Preview.
In the footer section, you can see the Edit Icon, click on it to add your footer menu. Just click on the section, you want to display your links. Now, among the 3 rows that appear, you’ll see 1 row & 1 column that has written “Copyright”.
You can just click on the Copyright section. Side-wise on the left side, you can see Column within the General section. Now, click on the column and set it into 2 columns. Back to the footer section, you can see 2 columns.
Now, click on the second column where you can see the + button. Once you click, you’ll see some options. Among them, click on the Footer Menu to add your links. After that, click on the Hide button which is at the bottom-right side. Now, you can see the link of your contact page on the footer.
After adding the contact page links or contact form, don’t forget to click on the Publish button which is at the top-left side of your live editing page.
Step 4: View Your Contact Page & Test it to See if It’s Working
Finally, your contact form and page are ready. Also, you’ve added the links in the header and footer menu and displayed the contact form on the sidebar.
Now to view how your published page appears, go to the dashboard and click on Pages>All Pages. Now, you can see the Contact Us page, hover over it, and click on View. You can see the image below on how the “Contact Us” page appears.
You can also test how your contact form works. For that, fill out the form and click on the Submit button. After that, it shows you a “thank you” message or the content you’ve customized while creating your form.
Hence, you’re all done with adding your contact form and pages.
That’s all folks! We’ve come to the end of our article.
We hope that this tutorial guide helped you learn how to add a contact form in WordPress. You can easily create a contact form and add it to your page by following this step-by-step guide. If you haven’t created one, then do follow our easy guide to create yours.
If you have any more queries about how to add a contact form, then feel free to ask us. We’ll get back to you as soon as possible. Also, share this article with your friends and colleagues.