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.
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 opportunity, check 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:
Do you want to know how its default contact form looks like?
The good news is that Contact Form 7 offers you plug-n-play default contact form:
- Just install the plugin
- A default contact form is prepared for you. Minor (or no) changes needed.
- Create a new Contact page. Copy and paste the HTML code (an easy part) from the form to the newly created page.
- Publish the page.
- Add CAPTCHA, if you want.
That’s the whole process. And that’s what I am going to show you now (step-by-step)
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.
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:
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:
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:
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:
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 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:
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:
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:
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):
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):
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:
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:
Click on ‘Save.‘
Step 4: Test Your Contact Page with ReCAPTCHA.
It should looks like this:
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: