How to Create a CONTACT FORM for WordPress (Step-by-Step)

How to Create a CONTACT FORM for WordPress (Step-by-Step)

How to create contact form for WordPress? In this quick and easy tutorial, I show you step-by-step how to create and set up both – your Contact form and Contact page.

No, I don’t mean a complicated Contact Information Page like some large corporations like Forbes (see here) or Entrepreneur (see here) have.

A really simple one. Such like Jeff Bullas uses on his blog (see here).

And hey! Here is a super-duper cool contact page, check this. (Don’t try to copy it, though.)

Back to this tutorial:

Also, I will show you how to protect yourself from spam and abuse by adding ReCaptcha to your contact form (if you should need it).

[Sidebar: If you want to learn about my #1 work-at-home opportunitycheck out THIS! You’re gonna like this (Yes, I am using it since 2013).]

So no more messing around. Let’s dig right into the details.

Probably the Best Contact Form Plugin for WordPress

There are quite a many contact form WordPress plugins available. However, I recommend using the Contact Form 7 Wordpress plugin. This one is by far the most popular anyway:

best contact form wordpress plugin - over a million times download

Do you want to know how its default contact form looks like?

Like this:

 

contact form 7 plugin - example of its default contact page

The good news is that Contact Form 7 offers you plug-n-play default contact form:

  1. Just install the plugin
  2. A default contact form is prepared for you. Minor (or no) changes needed.
  3. Create a new Contact page. Copy and paste the HTML code (an easy part) from the form to the newly created page.
  4. Publish the page.
  5. Add CAPTCHA, if you want.

That’s the whole process. And that’s what I am going to show you now (step-by-step)

 

READ ALSO: Blank Web Page Template in WordPress – How to Make It?

 

So here we go:

1. How to Install a Contact Form Plugin in WordPress

Log in to your WordPress Dashboard and navigate to Plugins → Add New. Then search for “Contact Form 7.”

Hit “Install Now” and then “Activate.”

That’s it. The plugin is now up and running.

Next stop:

 2. How to Use Contact Form 7 WordPress

After installing and activating the plugin, you should see a new section (Contact) in the WordPress left-hand side menu:

Contact Form 7 produces a new Contact section in WordPress menu

Step 1:

The ‘Contact‘ section will expand providing you additional options. Click on ‘Contact Forms.’ You will find a default contact form (‘Contact form 1’) and its shortcode – all prepared for you:

The default form and its shortcode of contact form 7

This shortcode is a piece of code that you later need to copy and paste into your Contact page.

Note! If you need a helping hand while customizing your form (by adding tags, etc.) here you will also find all the links to helpful examples and tutorials:

Contact form 7 links to examples and tutorials

Step 2: Customizing Your Form

Now, however, open the default form by clicking on its name. That’s what you will see under the ‘Form’ tab:

Customizing contact form 7 requires knowing a bit of coding

Here you understand why a basic knowledge of WordPress administration is required. However, at this point, everything you need, is already here. At this stage, you need to change nothing.

Step 3: Checking the Mail Settings

Next, navigate to the “Mail” tab. That too is pre-filled for you. Nothing to change here, except when you want visitors’ emails to land on a different email address:

The mail tab of contact form 7 is pre-filled for you

The trick is: When customers fill the form and send it to you, this plugin will send it by email to the very email address that you provide here.

Step 4: Messages

The next tab ‘Messages’ is also pre-populated for you. Scroll quickly through the list and see if you feel happy with the messages. If not, do your changes.

Step 5: Additional Settings

The final tab ‘Additional Settings’ is for those who feel comfortable with coding and want to make bigger changes to their forms. You can skip it.

Step 6: Saving Changes

After you have finished with the changes, click on the ‘Save’ button.

Step 7: Copy the Shortcode of Your Contact Form

Next, scroll up to the very top of the page. Here you will find the shortcode of your form:

Copy and paste the shortcode into your contact page

Or navigate back to Contact → Contact Form where there is also the same shortcode.

Copy the shortcode (Ctrl-V). (Note! Select and copy all, including [ and ].)

Step 8: Create a Contact Page in WordPress

Now you can leave from the Contact Form 7 plugin page. Go and create a create a new WordPress page (not a post). It’s simple, isn’t it? You know how to do it (Pages → Add new).

Name the new page ‘Contact’ or whatever you like your contact page to be.

Step 9: Paste the Shortcode into Your Contact Page:

Now paste the previously copied shortcode into your Contact page:

just copy the shortcode of contact form 7 into your contact page

That’s all you need to write into the contact page.

Next, publish the page. Then see how it looks like in real life.

Step 10: Test Your Contact Form

Send a test message through the newly created contact page and see if you receive the email.

Step 11: Add Your Contact Page to Your Blog’s Main Menu

Work your way into the WordPress ‘Menus’ section (Appearance → Menus), then add the Contact page to the main menu of your blog:

Add a contact page to your main menu

That’s it.

3. How to Set Up ReCAPTCHA on Your Contact Form

You don’t like spam, do you? Neither do I.

That’s why you may want to add ReCAPTCHA to your newly created form.

“ReCAPTCHA is a free service from Google that helps protect websites from spam and abuse. A “CAPTCHA” is a test to tell human and bots apart. It is easy for humans to solve, but hard for “bots” and other malicious software to figure out.” (Source: Google Support)

Well… How to do it?

First, you need to register your site with Google and get two important snippets (or scripts). Second, you need to include these snippets in appropriate places. So let’s do it.

Step 1: Register Your Site

Register your website with Google here. After logging in to Google, click on ‘Get ReCAPTCHA.’

Add the domain of your blog (follow the examples):

Here you can register your blog with Google

In the Label box, I wrote: egonsarvreviews.com: Contact page

In the Domains box, I wrote: egonsarvreviews.com

Click on ‘Register.’

Now you should see the API keys and the scripts that you need (in fact, the scripts are all you need here):Google reCAPTHCA keys and scripts

Step 2: Copy and Paste the First Script Into Your Header.php

Under the red headline (see the image above): “Step 1: Client-side integration,” copy (Ctrl-V) the first of the two snippets (or scripts).

Then open your Header.php file (In WordPress, navigate to Appearance → Editor, then from the right-side list, choose Theme Header (header.php).

Paste this snippet before the closing </head> tag on your HTML template:

Paste the recaptcha snippet here

Click on ‘Update file.’

Now your website is ready ta accept the Google ReCaptca service.

Step 3: Add the Second Script (ReCAPTCHA Snippet) to Your Contact Form

For this, copy the second snippet from the Google ReCAPTCHA page (see Step 1).

Go and open again your newly created Contact Form (Contact → Contact Forms, then open Contact form 1.

Paste the snippet before the [submit “Send”] tag:

paste recaptcha script here

Click on ‘Save.

Step 4: Test Your Contact Page with ReCAPTCHA.

It should looks like this:

Recaptcha added to a contact form

Does it work? Great!

If not, check if you did everything right. There must be some mistake.

Before You Go:

OK. That’s it. Short and sweet. How did it do? You tell me. Leave me comment into the comment section below. Thank you :)

If you liked this tutorial, you might also like these:

 

2 Comments

  1. Hello,
    I have started blogging myself. I am trying to find out the basic problems that my blog is having and looking for solutions. Also, I’m searching for some basic things like themes and other stuff.
    I have read your whole article, I am looking forward to getting a positive result after performing this myself.
    Can you suggest me any basic idea that I might need in the future as a new blogger?
    Thank you

    • Hey, Jamie, and thank you for the feedback.

      Now… My face is burning with embarrassment because of that 1 month late reply. I am sorry. I was away in August and thus could not answer your comment. Anyway, now I am back and ready to clean up my mess.

      So therefore, here are my answers:

      1. What are the basic problems that you blog has? Could you figure out.
      2. If you are looking for good WordPress themes, why not try WPZoom themes? Yes, I use their Diamond theme for my blog. Check out, maybe you find something for your blog as well.
      3. What do you mean with the “getting a positive result after performing this myself?” Can you explain it a little bit, please?
      4. I suggest to join Wealthy Affiliate as a Free Starter member, then start their free “Getting Started Certification Course. The course is awesome and will help you get the basic idea on how to become a successful blogger (and to max out your ability to bring in moolah…)

      So just “dive in” and take action. You’re in for a treat.

      If you have any other questions, just let me know, okay?

      Cheers,

      Egon

Leave a Reply

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