How to Create a Contact Form in WordPress – 3 Simple Steps

How to Eaily Create a Contact Form in WordPress in 3 Simple Steps

One of the most important aspects of your website is allowing your visitors to contact you. Whether that’s by phone or email, you need an easy way for them to connect.

Today, I’m going to show you how to create a contact form in WordPress, in three simple steps.

Sound good?

Let’s get going!

Short on Time / Visual Learner?

No need to read, we created this video that goes over everything in just two minutes!

 


Otherwise, you can keep reading below!

Step 1: Download Contact Form 7 Plugin

Before we go any further, we need a plugin that does all the hard work for us.

In this case, we’re going to use Contact Form 7. The best part? It’s free and extremely easy to setup.

a. Login to your WordPress website.

b. Hover over Plugins, click ‘Add New’

01 - Add New Plugin in WordPress

c. Type in Contact Form 7 in the search field and hit enter. We’ll then see “Contact Form 7”

02 - Contact Form 7 Search Plugin

d. Click “Install Now” and then “Activate”

03 - Install and Activate Contact Form 7

Now, we’re ready to start using this plugin on your website!

Step 2: Create Your Contact Form

Now that the plugin is installed, we have a new menu item in WordPress:

04 - Contact Form 7 New Menu Item

Go ahead and click the “Contact” menu.

This is where you’ll manage your contact forms in the future.

You’ll notice there’s a form already setup for us.

Click the Contact Form

05 - Form already created

For the sake of simplicity, let’s focus on two tabs: (1) Form and (2) Mail.

Let’s start with (1) Form:

Form

These are the fields that we’ll be using in our form. This is what the visitor will see on our website.

For instance, in the form that’s already created, we have:

  1. Name
  2. Email Address
  3. Subject
  4. Your Message
  5. Submit – this is the button the visitor will click when sending their message

06 - Contact Form fields

The only change I’d like to make is to remove the “Subject” field since it’s redundant.

Let’s go ahead and remove that (and the surrounding <label> tags) and click “Save.”

08 - Remove subject field and label tags

Now, click the “Mail” tab.

09 - Mail tab

Mail

This is the email template that will be sent to us when a visitor fills out the form.

07 - Mail fields

  1. To – The email address where we want the form sent. Type in your email address.
  2. From – Where we want the email to come from. You can leave this as-is.
  3. Subject – The subject line of the email when it’s sent to you. Feel free to change this to something relevant, as in “Contact from website.”
  4. Additional Headers – Leave this as-is.
  5. Message Body – Remove the Subject information as you see in the video below and click “Save.”

10 - Remove subject information

Now, we’re ready to place the form on your website!

Step 3: Including the Form on Your Website

If you haven’t saved your Contact Form, do that now by clicking “Save.”

11 - Save contact form

Now, we need to copy the shortcode to your contact form.

12 - Contact form 7 shortcode

Click it (it’ll automatically highlight it) right-click, and click Copy.

12 - copying the shortcode

Find the page to where you want to add the form. In this case, I’ve created a blank contact page.

Paste the shortcode into your page

13 - Paste shortcode in page and save

And…

Your page now has a contact form!

14 - Contact form on page

*Pro Tip! Preventing Spam

Now that you have your contact form ready to go, you should take one more step to help prevent spam.

We’ll create a “honeypot” field which when filled out will prevent the email from being sent to you. To better explain what’s going on, here is a description from the plugin we’ll be installing:

20 - Honeypot description

Luckily, to do this, it’s a quick extra step.

Just like before, hover over Plugins and click “Add New.” We’re going to add a plugin called “Contact Form 7 Honeypot.”

15 - Contact form 7 honeypot

Install and activate it

16 - Install and activate contact form 7 honeypot

Click Contact and then select the contact form we were working on earlier.

17 - go back to the contact form

Click the new button labeled “Honeypot.”

18 - Click honeypot button

A pop-up will appear.

In the Name field, remove the word “honeypot” and replace it with something else like “confirmemail.” This is for security purposes so “spam bots” can’t recognize it.

Click “Insert” and then arrange it after Name or Email, anywhere within the form. Feel free to copy what I did below.

19 - Editing and inserting the honeypot

Save your form and we’re done!

Questions? Comments?

That took some time and energy. Pat yourself on the back if you were able to follow everything laid out above.

If you ran into any problems and can’t figure it out on your own (or just don’t want to break anything!), you can hire us to add a contact form for you. We’ll not only create a form like you see above but we’re also capable of creating much more sophisticated forms with logic. The best part? We’ll take care of everything for you!

Give us a call (360) 450-3711 (or email) and we’ll create a form for your WordPress website!

Last updated on January 13, 2017. Shawn is the President of Graticle, Inc. You can follow him at Google+

Tags: , ,

Want a Quote on Your Project? Answer a Few Questions »

Our business was changing and we needed a new, customized and customizable website with shopping cart. However, we had very little time to research, develop, and launch it. Fortunately, we chose to hire Graticle Designs. They responded quickly, asked the right questions, advised on the best options, collaborated and worked tirelessly to meet deadlines, and delivered an excellent solution for our small business.

Tai Brown

CEO

Ascential Bioscience

www.AscentialBioscience.com

Ridgefield, Washington

I appreciate Shawn quickly helping me resolve an issue with my website. He clearly knows his stuff! Excellent and friendly service!

Dorina G.

Author / Teacher

Fresno, California