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.
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.
Let’s get started…
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:
Here’s how to fill in different fields:
- Field type — Choose whether the field is required to submit the contact form or not.
- Name — This denotes the name used in the tag. It won’t appear for visitors but makes it easier for you to remember the purpose of the tag and also configure the email sent to your account later.
- Options — Input the options available for visitors using the drop-down menu. Put one per line. You also have the option to allow multiple selections and use a blank item as default.
- Id/Class attribute — In this place you can assign a CSS class or id to the field. This is very useful for custom styling. We will talk about it later.
Here’s how we filled it out:
When you are satisfied, click on Insert Tag to put it into the form.
Be aware that once you understand how the tags work, you can also create them or make changes in the text field. For example, to make the new drop-down menu a non-required field, you could simply delete the asterisk after select. The more you use the plugin, the better you understand how it works.
Now all that’s left is to add a label. That is the text which accompanies the contact form field to explain what it does. Simply copy and paste the existing code from other fields and then adjust it to your needs.
Step 4. Edit Email Settings
Next up, you have to configure the email sent to you from the contact form. Unsurprisingly, you do this under the Mail tab at the top.
You will find the fields pre-filled with similar tags as the contact form earlier. It also provides you with available field tags including any new ones you created earlier (if you have saved the form). You can use those to customize how you will receive messages from your contact form.
Here’s what each field means:
- To — The email address to which the messages will be sent. You can usually leave this as is.
- From — Sender of the email. By default, it is set to the name of the person using your contact form.
- Additional Headers — Space for additional message header fields. The standard settings send your response to the email of the person contacting you, not the email it came from (i.e. your site) when you hit Reply. It’s also possible to put addressees to CC or BCC in there.
- Message Body — The body of the email you will receive.
- Exclude lines with blank mail-tags from output — When you check this, if any of the used tags are empty, the plugin will exclude them from the message.
- Use HTML content type — By default, the message is sent in plain text. Check this box to use HTML instead.
- File Attachments — If your form allows file uploads, the tags for these files belong here. You can also use it to attach files hosted on your server.
- Mail (2) — An additional mail template often used as an autoresponder. Check to activate.
The standard options are pretty good. The only thing we need to change for our example is the subject line.
Using the format above, you can now set up a filter in your mail program to sort messages by subject line, giving priority to business inquiries. That’s all about mail settings for now.
Step 5. Add a Form Messages
Next up is the Messages tab. You have the ability to configure the messages your visitors might encounter while using the form.
These are error messages, success messages or just hints on how to use the form correctly. We find that these are already pretty good so we usually leave everything as is. If you have a reason to change any of them (for example, to fit the tone of your website), feel free to do so.
Step 6. Customize Additional Settings
Finally, you get to the additional settings.
By default, these are empty. You can do different things – from limiting the ability for only logged-in people to submit the contact form to set the form to demo mode for testing purposes. It’s not important for our purposes but you can find all the different options in the documentation.
Step 7. Add The Form To Your Website
Now that you are done configuring the form, it’s time to get it on your site. The first thing you need to do is save the form via the button of the same name.
Before you do that, you might want to add a name to the top. This will make the form more distinguishable in case you create several ones.
Once you saved your form, a shortcode will appear on the screen:
You will use it to place the form wherever you want. The first thing you want to do is to mark and copy it. Once it’s done, go to the page where you want to place the form. For example, you might simply create a new page and name it Contact. Paste the shortcode into the WordPress editor.
When you now publish the page and go to the front-end:
There it is. Notice the drop-down menu we created earlier. It is now part of the contact form as needed.
Simple, right? Plus, you can use the same method to place the form anywhere else.
Step 8. Include a Contact Form in a Sidebar (Optional)
There’s nothing easier than placing the contact form in a sidebar. Just go to Appearance > Widgets. Add a text widget to whatever widgetized area you want the contact form to appear and paste the shortcode.
Don’t forget to save the widget! When you now go back to the front-end of your site, there it is:
You have just mastered the basics of adding a contact form in WordPress. We are not at the end yet. There’s still a bunch of things to do to further improve your forms.
Contact Forms in WordPress – Next Steps
Once you have the form on your site, the work doesn’t end. There are still some important things to take care of, e.g styling your form, protecting it from email spammers and implementing protective measures for personal data. Let’s do this in order:
1. Changing the Form Design
Ideally, there is no need to change the styling of your contact form. This is likely in our case because Contact Form 7 uses standard HTML code like
input[type="text"] to create form fields.
In good WordPress themes, these are defined in the style sheet. Consequently, the contact form most likely automatically fits your site design. You could see this in the example website above. In case you still need to make adjustments, you have several options.
As mentioned, Contact Form 7 forms have standard HTML markup. You may simply change the associated CSS and thus the way the forms look. Just keep in mind that this also has consequences for other input fields on your site which share the same markup.
Additionally, every form created with Contact Form 7 comes with a plugin-specific code. You can find the code by using the developer tools in your browser.
For example, you are able to make changes to the entire form’s styling by using the
.wpc7-form CSS class. Be aware that it has consequences for all forms created with Contact Form 7, but leaves other input fields on your site untouched.
If you want to get even more specific and change the styling only for particular forms, you are in luck. As you can see from the screenshot above, every Contact Form 7 form gets its own CSS id.
You can use this to target elements on a per-form basis. Additionally, it is possible to give to the elements on your forms their own CSS classes and ids.
With those, you are able to target them even more specifically.
In short, whatever you want to change your forms’ design, you have all the tools to do so.
2. Implementing Spam Protection
Spam is a big topic when it comes to the web and websites in general. If you leave your email address unprotected on your site, there are a lot of automatic programs out there that will pick them up and start sending you unsolicited offers, fishing emails and worse.
Unfortunately, the same is true for contact forms. Unless you set measures in place to prevent it, there are also programs that can send you spam via contact forms.
Fortunately, Contact Form 7 offers easy ways to prevent this. One of them is simple: include a quiz into your form that bots can not answer, like a simple equation.
The quiz tag makes it possible. It is as easy to use as all other tags in Contact Form 7 and you can find additional information here.
Aside from that, there is reCAPTCHA. This is a Google service for fighting spam. You need an API key and integrate it with Contact Form 7. Find instructions here. This might have consequences for protecting personal information. More on that in the next section.
You can use the reCAPTCHA tag to add it to your form. The maker of Contact Form 7 also has a Captcha plugin called Really Simple CAPTCHA that you can use for the same purpose.
3. Make it GDPR Compliant
You might be aware that there have recently been some changes to Internet privacy laws in Europe. On 25 May 2018, the General Data Protection Regulation (GDPR) came into effect.
It brought a number of changes to laws that concern the use of personal information online. It also threatens hefty fines for anyone in violation of the regulations.
Why is that important? Contact forms collect personal data. For that reason, if you fall under the jurisdiction of the regulations (and most people do now), you need to pay attention to some things.
- Don’t collect data you don’t need — Contact forms give you a choice of which fields to include. If there’s any data you don’t actually need, stop collecting it. That way, if there’s a breach, you can’t lose it.
- Disable any tracking — If you are using a contact form that tracks cookies, user agents, and/or user IPs, you need to disable this to be GDPR compliant. Contact Form 7 seemingly does neither, so there’s nothing to do. Check your contact form of choice if you use anything else.
- Implement HTTPS — Using SSL/HTTPS encrypts the data exchange between browser and server. This is important for contact forms to keep personal data safe. It is also considered common practice now. Check out our guide for how to implement it.
From everything we have read, the above should be enough for making contact forms compliant with the new law. Of course, there’s more to this topic for website owners.