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: , ,

Ready to Get Started? Let's Talk About Your Project »

My experience with Graticle has been excellent. They are incredibly intuitive and seem to get exactly what we are looking for. They ask the right questions and return excellent work with very few drafts needed.

Among many projects, we hired Graticle to redo our company website. They presented us with an amazing site that was clean and very simple to use. They learned about our product and developed a site that our customers enjoy using.

They also redesigned our sales page which increased our conversion rate almost immediately. Again, focusing on prospective buyer experience.

They are cordial, friendly, and care about their customers. It is a pleasure working with Graticle and we have recommended their services to other companies.

Carlos Chacon

Audiotech, Inc.

www.Audiotech.com

Chicago, Illinois

Shawn at Graticle Design has been a tremendous resource for all things related to website design and IT solutions. It is without reservation I highly recommend his organization and services to futher advance your internet presence as well as quality and personal customer interaction.

Greg Peters

Owner

American Crane Training

http://americancranetraining.com/

Orcutt, California