How To Add A WordPress Contact Form To Your Website or Blog

221
Wordpress Contact Form

Adding a WordPress Contact Form to Your Website or Blog

In this blog post I will be showing you how to create a very basic WordPress Contact Form for your blog or website.  Every website should have a contact page where a reader can easily contact support.  We are going to be using a WordPress Form Plugin to accomplish this task.

Disclosure: Some of the links on this website may be from our sponsors.

This blog post is part of a series on how to build a website or start a blog using WordPress.  You can check out the other articles in the series below:

How to Build a Website or Start a Blog Using WordPress

How to Write a Blog Post Using WordPress

How to Setup Google Analytics For Your Website or Blog

How to Make Money Blogging

How To Add A Support Email Address For Your Website

If you don’t already have a support email address setup for your website, we need to do that before we create your WordPress Contact Form.

Assuming you followed our WordPress setup guide, you should already have a Bluehost account for your website.

Go To https://my.bluehost.com

After logging into your Bluehost account click Email on the menu on the left side of the screen.

Bluehost-Add-Email

Make sure you are on the Add Email Account Tab.

Enter “support” in the email text box.  The @yourdomain will already be set with whatever your domain name is.

Create a password, you can make up your own or click generate to have Bluehost create one for you.

When done click the Create Account button.

Bluehost-Create-Account

You should get a success message and if you click the Email accounts page you should see your new support@yourdomain.com email address there.  You are now ready to move on to the next step in creating your WordPress Contact Form.

How To Access Your New Email Address

If you are not familiar with how to access a new email address, we will show you how to do this with Microsoft Outlook.  If you already have a support email address setup for your website you can skip this section.

From your start menu, choose Outlook.

From within outlook go to File and then select Add Account.

Outlook-Add Account

On the Welcome To Outlook screen enter your new support email address then click advanced options and check Let Me Setup My Account Manually.   Click connect when finished.

For account type select POP

For both Incoming Mail Server and Outgoing Mail Server enter mail.yourdomain.com where yourdomain is the name of your new website.  Click Next when finished.

POP-Account-Settings

Enter the password you created for your email address when you set it up on Bluehost.  Then click connect.  You should get an Account Setup Complete message confirming Outlook can access your new support mailbox.

Outlook-Account-Setup-Complete

You should now be able to access the inbox for your new email address within outlook.  You should already have an email that would have been sent from CPanel/Bluehost when you first created it.

The WPForms Plugin

Now that you have created your new support email address and you can access your new email address within Outlook, you are ready to add a WordPress Contact Form to your website.  We are going to be using a plugin for this.

The WordPress Forms Plugin we will be using is called WPForms.  They have a Lite version which you can download for free from the WordPress Plugin directory.  This will allow you to create the very basic WordPress Contact Form that we will be adding today.

But you should also check out their additional features & addons which will allow you to do much more advanced things such as:

  • Utilize their drag & drop builder to create amazing looking forms in minutes.
  • Create advanced and dynamic forms that can change available fields based on the user’s selections.
  • Create multi-page registration forms. Nobody likes filling out long forms.  This will allow you to break up entry into multiple pages.
  • Add a Captcha to your submission to prevent spam submissions.
  • Integrate with Paypal if you need to accept payments with your forms.
  • Create Get Subscriber forms that directly integrate with popular email marketing services like AWeber to help you quickly grow your email subscriber list.
  • Create Surveys and Polls for your website.
  • Easily embed your forms into blog posts, pages, sidebars and widgets.

If you do decide that you need some of these more advanced features be sure to check out the WPForms pricing page as they frequently have promo codes there which can knock a significant % of the price off of the cost of the upgrade.

WPForms

Creating Your WordPress Contact Form

Assuming you have either the WPForms Lite or the full WPForms plugin installed and activated, you should now see a WPForms menu within your WordPress Dashboard.

WPForms-Add-New

Click on the WPForms menu and then click Add New.  It should bring up a new Form Setup page that looks like the image below.

WPForms-Form-Setup

Move the mouse over the Simple Contact Form template and then click Create A Simple Contact Form.

WPForms will open up the Simple Contact Form editor.

WPForms-Contact-Form-Editor

You can now edit your Contact Form.  You can add or remove any of the standard fields that you want on your contact form.  If you want or need to add any of the Fancy Fields or Payment Fields, you will need to upgrade from the WPForms Lite version.  You can check out the WPForms pricing page to see if they are running any current promotions and get the latest promo codes.

When you are satisfied with the fields on your contact page, click on Settings on the left hand side menu to finish setting up your contact form.

Under General you can change the text of the submit button if you would like it to say something else like Contact Us or Join Now or whatever you want it to say depending on the content of your form.

WPForms-Settings-General

Under Notifications you can change how you are notified when a user on your website uses your contact page.  By default, it will send an email to the email address of the administrator user for your website.  As you can see I am modifying the Send To Email Address to be the support email address I setup earlier which was support@wpstepbystep.net.

WPForms-Settings-Notifications

Under confirmation, you can change the message the user will see after they have clicked on the submit button.  You also have the option to redirect them to another URL if you would prefer.

WPForms-Settings-Confirmation

Now that you have all of your WordPress Contact Form settings completed, click on the save button at the top right-hand side and then exit out of the Contact Form Editor.

Create Your WordPress Contact Page

Now that you have your WordPress Contact Form created the next step is to create a contact page for your website and add the contact form to this page.  In your WordPress Dashboard, click on Pages and then click Add New.  It should bring up the Add New Page window.

Wordpress-Page-Add-New

Name your page Contact.  Next click on Add Form.  You should see the simple contact form you created earlier in the drop down box.

Wordpress-Add-Form

Click the Add Form button to add the contact form to your contact page.  You will notice it will add code like wpforms id=”47″ to your page.  This is the Shortcode for the form to add it to any page.  You can find the Shortcode for your form when you view your list of forms inside WPForms.  You don’t need to know the Shortcode though, you can just use the Add Form button on the page builder.

At this point, you can preview your contact page by clicking the Preview button.  When you are ready, click the Publish button to make the contact page live on your website.

Testing Your WordPress Contact Form

At this point your Contact Page should be live on your website.  Currently the only way to get to it would be to go to the URL https://www.yourdomain.com/contact.  If I visit my page https://wpstepbystep.net/contact you can see the contact form we added is now available.

Wordpress-Contact-Form

At this point we want to test that the Contact Page is working as expected before we add it to our Main Menu for people to utilize.  Go to your contact page in your web browser and enter a Name, Email Address and a Test Message and then click on Submit.

Wordpress-Test-Contact-Form

You should have gotten a reply message on the screen indicating the contact submission was successful.

Wordpress-Test-Contact-Response

You should also confirm that an email was sent to the email address that you setup earlier.  If I check my support@wpstepbystep.net account, I can see that I received the following email from my test submission.

Wordpress-Test-Contact-Email

Adding Your WordPress Contact Form To Your Main Menu

Now that we have a confirmed working WordPress Contact Form, the last thing to do is to add our Contact Page to the Main Menu of our website.  Within the WordPress Dashboard, click on Appearance and then Menus.

Make sure you are editing your main menu.  Under Pages, click on View All and then check your Contact Page and click Add to Menu.  When finished you should see the Contact Page listed under your Menu Structure.

Wordpress-Contact-Menu-Structure

Click on Save Menu to save the changes to your menu then head back to the home page for your website.  You should now see a link for the Contact Page on your main menu and clicking it should take you directly to your WordPress Contact Form.

Wordpress-Contact-Main-Menu

Congratulations, you’ve now added a fully functional contact page to your website.  If you are enjoying our series on building a website using WordPress, check out our next article in the series on How To Setup Google Analytics for your WordPress website.

If you have enjoyed this tutorial, please like us on Facebook and please consider sharing this blog post on your favorite social media sites using the buttons below.  We would also love to have you join our Newsletter Subscriber List so that we can keep you updated on new additions to our site.