In this blog, I will be showing you how to add a simple contact form to your website by using a plugin called Contact Form 7.
What is Contact Form 7?
Contact Form 7 is a free WordPress plugin you can use to add a contact form to your website. It is very easy to use yet highly customizable. This plugin also supports anti-spam protection such as reCAPTCHA and Akismet.
How to add a contact form
The plugin already has a simple template which you can use as is. Just install the plugin and add the shortcode to your contact page!
- Step 1Install Contact Form 7 plugin
Go to the WordPress dashboard and install a plugin called “Contact Form 7” and activate it. Once you activated it, an icon named “Contact” will appear under the dashboard menu.
[Click to View] - Step 2Configure the basic setting for Contact Form 7
Go to your dashboard and click Contact → Contact Forms. There, you’ll see a default form named “Contact form 1”. Click the form to edit.
[Click to View] Once we click the form (Contact form 1), we will see the following tabs:
- Form: Not edited
- Mail: Edited
- Messages: Not edited
- Additional Settings: Not edited
[Form tab] This defines what information you want to add to your form. The template is set with name (1), email (2), subject (3), message (4), and a submit button (5) and you can use this template as is.
[Click to View] [Mail tab] This specifies who receives the form and how the message will be presented to you. To field is the only field I edited. By default, [_site_admin_email] tag will grab the email address information which you used for WordPress registration.
If you registered with a free email address such as Gmail, and if you wish, you can remove this tag and replace it with your site domain email address (see the below images). If you made changes to the form don’t forget to hit the save button.
[Before – Click to View] 
[After – Click to View] [Messages tab] This defines different types of messages used as per form submission. Messages contain successful, failure, and error messages. You can reword the default messages if needed.
[Additional Settings tab] You can add additional settings with code snippets. Read the official website for more information.
- Step 3Make a contact page, add a shortcode, and publish it
Now, we will go back to the WordPress dashboard and go to “Pages” and make a contact page.
Go back to “Contact” where Contact Form 7 is and copy the shortcode.
On your contact page, paste the shortcode directly into the page. WordPress recognizes it as a shortcode and the shortcode is embedded in the page as below image.
[Click to View] Once you added the shortcode, publish the page. The form will look like below and it is ready to be used.
- Step 4Test
Please test it to see if it works as expected. Below is an image of a message I sent from the contact form.
Customizing the form
The form will appear like the one below if CSS is not customized (left – BEFORE).
An example of my form with CSS customized (right – AFTER).
Please note that all the fields (Name, Email, Subject, and Message) are identical and that only “id” has been added to each field so that we may use CSS to modify each field.
Use the modified template below in lieu of the original template.
Edit: Form
Original template:
Edited template:
Replace the original template with the following template.
<label> Your name (required)
[text* your-name id:formname] </label>
<label> Your email (required)
[email* your-email id:formemail] </label>
<label> Subject
[text* your-subject id:formsubject] </label>
<label> Your message
[textarea your-message id:formmessage] </label>
[submit id:formbtn "Submit"]Edit: Theme CSS
WordPress dashboard:
Once you replaced the original template with the edited template, go to your WordPress dashboard. Click Admin menu → Customize → Additional CSS
Paste the below CSS to Additional CSS:
In the additional CSS of your theme, paste the following CSS.
#formbtn {
width: 150px;
background: #ffffff;
display: inline-block;
padding: 0.3em 2em;
text-decoration: none;
color: #333333;
border: solid 1px #444444;
border-radius: 3px;
transition: .4s;
margin: 1em 0 2em;
font-size: 16px;
border-radius: 99px;
font-weight: bold;
}
#formbtn:hover {
background: #444444;
color: #ffffff;
border: 2px solid #444444;
}
#formname, #formemail, #formsubject, #formmessage {
background: #eff1f5;
border: none;
}About reCAPTCHA
You may have noticed that my form has the below sentence for reCAPTCHA on the contact page. This is because my website has reCAPTCHA and I prefer to add a disclaimer for visibility on the contact page. Please be noted that you do not need to add a disclaimer unless you hide the reCAPTCHA badge. If you want to know more about how to add reCAPTCHA to your website, please read my blog here.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
If you added reCAPTCHA and wanted to add a disclaimer, you can use the following template for your form, which includes reCAPTCHA sentence at the end.
<label> Your name (required)
[text* your-name id:formname] </label>
<label> Your email (required)
[email* your-email id:formemail] </label>
<label> Subject
[text* your-subject id:formsubject] </label>
<label> Your message
[textarea your-message id:formmessage] </label>
[submit id:formbtn "Submit"]
<small>This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy"> Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.</small>
Comments
Thx
Thank you!
If some one wishes expert view on the topic of running
a blog afterward i propose him/her to visit this webpage, Keep up the
good job.
Thank you!
I found your article enlightening and thought-provoking. Thanks for expanding my understanding!
Thank you!
This article offers a new view on the subject. Thank you for sharing your knowledge.
This is exactly what I needed to read today. Thanks!
Hey there! I’m at work browsing your blog from my new iphone 4!
Just wanted to say I love reading your blog and look forward
to all your posts! Keep up the outstanding work!
Thank you!
I came across this article and discovered it to be an excellent source. Thank you for sharing!
Thank you!
Thanks for this insightful information. It really helped me understand the topic better. Nice!
Thank you!
I appreciate the effort and time you’ve spent in putting together this information. Thank you for sharing this with us.
Thank you!
Hi! Do you use Twitter? I’d like to follow you if that would be okay. I’m definitely enjoying your blog and look forward to new posts.
I don’t use Twitter but thank you so much for you comment!
Well done! This article provides a fresh perspective on the topic. Thanks for sharing your expertise.
Thanks!
I really enjoyed reading this blog. It’s brief, yet loaded with important details. Thanks!
Thanks!
Keep on working, great job!
Thanks!