As a website owner, you should definitely learn how to add a contact form to WordPress. Your website is not an anonymous entity. Most people want to know and occasionally interact with whoever is behind the content they read. Why do you think there are author profiles and blog comments?
For that reason, in this article, you will learn how to add a contact form to your WordPress website. The post will first go over the reasons why it’s a good idea and then you will get a step-by-step guide on how to include a contact form on your site via a plugin.
We will also talk about how to change the design of your form and implement spam protection. What’s more, we will examine contact forms and personal data protection – something that has come more into focus lately. Finally, you will find a list of plugins you can use to add a contact form in WordPress.
It might sound much, but don’t worry – we will keep it simple!
Why Should You Use a Contact Form on Your WordPress Site?
Before getting into how to let’s examine why it’s necessary. There are many good reasons to use a contact form on your site instead of posting your email address directly for example.
- Protection from email spam — Spam is a pest. You will notice it quickly when you have a WordPress website that uses blog comments. One thing spammers do is automatically scan websites for unprotected email addresses so that they can add them to their mailing lists. Contact forms keep that from happening by giving visitors a chance to get in touch without publishing your address online.
- Ask for the right information — People who get in touch with you don’t always send all the information you need. With a contact form, you can specifically ask for it upfront. It also gives you a way to filter inquiries, for example by type. This makes your life easier and reduces a lot of back and forth.
- Inform your clients — Conversely, contact forms can also act as the first point of information. You are able to include information for callers to let them know about the expected response time and steps they can take in advance to address their inquiry. This reduces the likelihood of multiple emails from the same impatient person.
Convinced that contact forms are useful? Then let’s get to the practical part of this tutorial.
How to Add a Contact Form in WordPress With Contact Form 7
There are many WordPress plugins out there to add a contact form to your site, both free and premium. We will talk about a few of them later in this article. For the following tutorial, we will be using Contact Form 7.
The plugin is available for free in the WordPress directory and has been consistently among the most popular plugins of all time (in fact, at the time of this writing it’s in the first place). In addition to that, it’s easy to use, has a nice feature list and sensible add-ons.
That’s why we are choosing it to teach you how to add a contact form in WordPress.
Step 1. Install Contact Form 7 Plugin
Installing Contact Form 7 is as easy as any other WordPress plugin. Simply log into your site, go to Plugins > Add New and type its name into the search box.
It should appear in the first place. Click on Install Now to download it on your site. When it’s done, click Activate to start using the plugin.
Step 2. Create Your New Contact Form
After the installation, you will find a new menu item named Contact in your WordPress sidebar. Clicking it gets you to this screen.
You get a number of tooltips for making your contact form better such as using spam protection. We will get to that stuff later.
More importantly, you will find a list of all contact forms on your site. It includes a sample form that you can, theoretically, use right away. Either click it to start editing or hit Add New at the top of the screen. Both will get you here:
It looks a bit cryptic at the beginning, but don’t worry – you will understand it soon.
In order to work, your contact form needs fields. Fields are where visitors input their name, email address or the message they want to send you, or anything else you might want them to add.
Contact Form 7 creates those with a little bit of HTML plus custom tags. Everything between
<label>...</label> denotes one field of your contact form plus the text description belonging to it. The actual fields are created by what’s between the square brackets.
Does that mean that in order to create a contact form you need to learn programming languages? Fortunately, the plugin comes with tools to generate these automatically.
Step 3. Configure Your Form
At the moment, the default form we have in the back end will look like this on the page.
It’s all standard. Let’s say that you want to add a drop-down menu to choose the purpose of getting in contact with you. That way, you are able to immediately see the messages which to give priority to.
To do so, you first need to place the cursor where you want the menu to appear in the contact form. In this case, that’s between the email address and subject.
Click on the drop-down menu in the toolbar on top. It gets you to this menu: