Tutorials

How to Add a Contact Form & Page on WordPress? (Easy Guide)

  • Updated on
How to Add Contact Form and Page in WordPress Easily

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.

For the websites, it’s necessary to have 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 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 you 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 the email or social platform 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 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 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 for free of cost. 

So, here are some of the best WordPress contact form plugins you can use:

1. WPForms

WPForms Plugin

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. 

Pricing: 

Although the WPForms plugin is free to use and able to download from WordPress.org, you can upgrade to the premium version. The premium version is given as:

  • Basic Plan: $31.60/year
  • Plus Plan: $79.60/year
  • Pro Plan: $159.60/year
  • Elite Plan: $239.60/year

2. Contact Form 7

Contact Form 7 Free WordPress Plugins

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.

Pricing: 

Contact Form 7 plugin is completely free to use and download from WordPress.org.


3. Ninja Forms

Ninja Forms Popular WordPress Contact Form Plugin

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.

Pricing: 

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.50
  • Professional Plan: $99.50
  • Agency Plan: $249.50

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 the Add New.

Install WPForms- contact form for WordPress

After that, you can see a search bar at the top-right side of your dashboard. There you need to type “WPForms” to search the plugin for installation.

Once you’ve found the plugin, click on the Install Now button.

Activate WPForms - contact form in WordPress

After completing the installation, you can see the Activate button. Click on it to see whether the plugin is working. 

WPForms Menu

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. 

Add New Form to create contact form in WordPress

First of all, go to the WPForms menu and click on Add New from your dashboard.

WPForms setup and search-bar

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. 

Simple Contact Form for WordPress site

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.

Editing Section of Simple Contact Form

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. 

Adding fields in form

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. 

Fields Options

Method 2: Create a Form From Scratch

Blank Form to create contact 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. 

Editing section of blank form

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 in 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. 

Delete Drag to reorder and Save

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 completion of 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.

General

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.

General settings while creating contact form for WordPress

Below that, you’ll also be able to configure advanced sections such as add 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.

Notifications

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. 

Notification settings while creating contact form for WordPress

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

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. 

Confirmation showing Message after submitting Contact Form

The first one is a Message which is displayed as soon as users submit their form. You can also customize the content of the message from the Confirmation Message element. 

Confirmation showing Page after submitting Contact Form

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.

Confirmation showing URL after submitting Contact Form

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 of the pages you want your visitors to redirect.


Step 4: Save Your Contact Form

Preview and Save

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

Adding New Page to create contact form in WordPress

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

Add WPForms in page

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”. 

WPForms Wizard

Once you’ve found the WPForms, click on it and the wizard of WPForms will appear in your text editor. Now, click on the “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.

Publish the created contact page in WordPress site

After you’ve added the form to your page, click on the Publish button at the top-right side to publish your contact page. 


Step 3: Display the Contact Page link on Your Site 

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 of 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

For that, log in to the dashboard, then go to the Appearance>Menus. There, you’ll see a Menu Structure on the right side. It contains a form to create a new menu. 

Creating Menu

Because it’s a header menu, you need to give the Menu Name by 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 which 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. 

Adding Contact Us Page in menu

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.

Contact us page link shown in menu

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 of 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. 

Back arrow to add contact form in sidebar

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. 

Main sidebar

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.

Search contact form to add

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 the 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

Footer 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”.

Edit footer

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. 

Adding footer menu

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 the Pages>All Pages. Now, you can see the Contact Us page, hover on it, and click on the View. You can see the image below on how the “Contact Us” page appears.

Previewing Contact Us page in WordPress site

You can also test how your contact form works. For that, fill 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.

Thank you- Confirmation message after submitting contact form

Hence, you’re all done with adding your contact form and pages.


Conclusion

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. 

You may also like our article on how to start a blog and how to add social media share buttons to WordPress.

Don’t forget to follow us on Facebook and Twitter for more helpful articles.

Written By SiteSaga Editorial
SiteSaga Editorial is a team of highly experienced writers, marketers, and web developers. We're here to help beginners get online with their self-made websites or blogs and succeed.

Leave a Reply

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

SIGN UP TO GET FRESH CONTENT

Subscribe to our blog and get exclusive content every week! We don't like spam, so we won't spam you with junk email.