We may earn money or products from the companies mentioned in this post.
As a website owner, you should definitely learn how to add a contact form to WordPress. Your website is not some 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 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!
Before getting into the how, let’s examine the why. There are many good reasons to use a contact form on your site instead of posting your email address directly for example.
Convinced that contact forms are useful? Then let’s get to the practical part of this tutorial.
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 on 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.
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.
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 which 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.
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:
Here’s how I 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.
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:
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.
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. I find that these are already pretty good so I 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.
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 setting 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.
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 at 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.
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.
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:
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 about your forms’ design, you have all the tools to do so.
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.
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.
Below, you will find a number of tips on how to make your contact form GDPR compliant. These tips have been compiled to the best of our abilities.
However, nobody here at websitesetup.org is a lawyer nor do we play one on TV. For that reason, the below does not replace a professional law consultation and should not be seen as legal advice.
Ok, so much for the “if you get in trouble, please don’t come back and sue us” part. Let’s get to the tips!
Here’s how to build privacy-conscious contact forms:
From everything I 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. You can find out more here and here.
Aside from Contact Form 7, there are a bunch more plugins out there to create contact forms in WordPress. Here are a few other good candidates.
Jetpack is a suite of powerful plugins produced by WordPress.com (see our comparison of WordPress.org vs WordPress.com). These include a module for creating contact forms. When you switch it on, you can start inputting forms into your WordPress website right from the post and page editor.
Here are some standout features:
When you use Jetpack forms, be sure to implement some type of spam protection. I’m speaking from experience. The aforementioned WPBruiser is a free option.
HappyForms is relatively new on the market. It integrates with the WordPress Customizer, which makes getting started really easy. Aside from that, it has the following features:
With Contact Form 7 you can manage multiple different contact forms with a basic easy to use interface. They have an premium version as well, but it is meant as an donation. The premium doesn’t really do or give anything (besides a new mouse loading animation).
Great free option.
This plugin lets you build forms through a user-friendly interface. It has a free version but also offers a premium edition with additional features, add-ons, support, layouts and more. These include:
Memberships for Ninja Forms cost $99/year and upward.
Gravity Forms is probably the most popular premium solution. It is pretty advanced, has a good user interface and great support system. Unlike other entries on this list, this plugin is premium only, but you get a lot for your money.
If you are interested in Gravity Forms, their plans start at $59/year.
The final entry on this list also lets you build forms with a graphic interface. Aside from that, it has the following features:
Besides the free version, there is also a premium edition starting at $6.24/month.
Learning to add a contact form to WordPress is something anyone who owns a website should do. It’s one of the most important ways for people to get in touch with you. A contact form makes your site look more professional, protects you from spammers, makes sure you get the information you need and acts as a doorman.
In this article, we have covered how to add a contact form to WordPress using Contact Form 7. We have gone over advanced styling and spam protection for your form. Besides that, the post covered the important topic of GDPR compliance for contact forms and tips on how to achieve it. Finally, we looked at a number of other excellent plugins you can use to add a contact form to your WordPress site.
By now, you know everything you need to add a form to your own website. We hope it will lead to great opportunities and interesting new contacts.
Do you have any questions on how to add a contact form to your site? If so, please let us know in the comments section below.
The post How to Add a Contact Form to Your WordPress Website or Blog appeared first on websitesetup.org.