When it comes to owning a website or blog, one of the most important things to have is a way to contact you. People that read your blog or visit your website sometimes want to interact with the person behind the site. Much like an about page or an author page can put a face to the words, people want a way to actually get hold of a real human being. This is where a contact form comes in. Whilst it may seem like a daunting task to get your contact form set up, this article is going to guide you step-by-step through the process & you’ll figure out exactly how to set up a contact form in WordPress.
What you’ll learn:
- How to install the Contact Form 7 Plugin
- Create & customize a new form with Contact Form 7
- How to insert contact forms onto posts & pages.
If you want to read this later, please save it to Pinterest.
Related: How to start a blog for beginners.
Why use a contact form on your blog?
A contact form does three fundamental things.
- It prevents bots from crawling your site & adding your email address to spam email lists.
If you’ve ever owned an email address, you’re probably quite familiar with spam. When it comes to running a WordPress blog, you’ll find that spam comments can be just as annoying. One way to combat the spam comments is to install the free Akismet Anti-Spam plugin. When it comes to protecting your email address from spam though, the best way is to utilize a contact form.
By using a contact form, your email address isn’t clearly on show for spammers & bots to take and add you to shady email lists.
- You can ask for all of the right information when someone tries to contact you.
It can be very frustrating and time-consuming when someone contacts you without providing all the required information you may need to help them. They may not have known what to send, but it can still be rather time-consuming having to write back asking for more information.
With a contact form, you can ask for all of the right information up front, saving time. You can even sort your inquiries by type & urgency.
- It looks more professional & is more functional.
A neat & tidy contact form looks more professional than leaving an email address with information on how to contact you. As the people are on your website already, they do not have to open another tab or program to send you an email. Since they’re still on your site when they’re done, there is a much higher chance they stick around and explore the rest of your website.
Related: Which is the best blogging platform?
Contact Form 7 Features
I thought I’d let you know why I use & recommend Contact Form 7, but it may be more beneficial to simply mention all of the awesome features. 😉
- Easily create & manage multiple contact forms
- Customize form fields with the click of a button
- Input forms into posts & pages using shortcodes
- Supports Akismet spam filtering & CAPTCHA
The best feature is that all of this is completely free.
Contact Form 7 is used in over 5 million websites, this one included, so let’s take a look at how to get it set up on your site in a matter of minutes.
How to set up a contact form in WordPress for your blog
The first thing that we need to do is find the plugin on your WordPress dashboard. To do so, select Plugins > Add New from the menu on your left.
Step 1: Install Contact Form 7
In the search bar, type in Contact Form 7, the plugin will then appear.
Select Install > Activate and once it’s installed, you’ll see a new option on the left, Contact. This is where you can create contact forms & edit the Contact Form 7 settings.
Step 2: Setting up your form
To set up your first form, and however many more you may want to create in the future, select Contact > Add New.
Now you’ll see the contact form template area.
At the top, you can give your form a name (this doesn’t show up when you place it on your site, it’s only to allow you to filter through your forms more easily).
Scroll down to the Form area and you’ll find the editing space.
This is where you can include the different fields, drop-down menus, text, etc. that you want to show on the front end of your website.
By default, Contact Form 7 includes a few fields already, including name, email, subject, message & send. You’ll most likely want to keep all or most of these, but you can also easily include new fields by selecting one of the buttons above the content area.
Step 3: How to use custom field tags
If you’re unfamiliar with HTML or shortcodes, this may look rather confusing at first, but I’ll simplify things a little further.
The text inside the square brackets  is the field that will appear on your form. In this case, the email field. The asterisk* means that the field is required to be filled out in order for someone to send the contact message.
This is not something you should worry about though. To input a new field, you simply have to select the appropriate field (or tag) from the top.
For example, let’s input a URL field, where if someone wants to contact me, they are required to fill in their URL.
First make sure your cursor is on a new line, then select the URL tag. A pop up will now appear to help you with the field creation process.
As we want this to be a required field, we will tap the Required Field box, next, we can give it a unique Name, let’s leave it as URL-434 for now though, as this does not show up on your form.
We can input a Default value, and if we check the Use this text as the placeholder of the field box, then this default value will appear inside of the field. This is useful to give instructions as to what should be typed into the field for visitors.
The last three fields are for security and custom CSS, which, we can leave blank. Contact Form 7 should automatically adopt the CSS of your WordPress theme, making it automatically fit in with your site design.
Once we’re done adding all the relevant information to the field, select Insert Tag to include it in the contact form.
Now you may still be wondering what some of the other text means, so let’s look at that.
<label> Your Email (required) [email* your-email] </label>
The text marked inside of the <label> tags is the wording that will appear above the field in your Contact Form.
If we look at the front end of this contact form on my website you will see this.
P.s. The styling may look slightly different from yours, depending on the theme that you are using.
That is how you create a contact form in a nutshell, remember to select Save at the bottom of the screen when you’re done.
Step 4: Setting up email notifications
Next, we need to have a look at the backend of things, i.e. what you receive when someone contacts you. This is the email notification.
When someone responds to your newly created contact form, the custom fields you’ve created do not automatically show what the information is related to in the email you receive.
You can customize this however in the Mail tab.
Here you can include the various mail-tags at the top of the page in the email that you receive when someone contacts you. We added the URL field tag into our form, and if you remember, it was named URL-434. If you have a look at the top by the mail-tags, you’ll see the option in square brackets [url-434].
All we need to do now is copy that code and place it wherever we would it in our template below.
In this case, I’ve placed it in the message body and written Website so that it’s clear when someone contacts me.
You can include other field tags that you’ve included in the same way.
At the top of the screen, you can also include to which email address contacts should be sent, subject line, etc.
Remember to select Save at the bottom of the screen when you’re satisfied.
Step 5: Inserting the contact form onto a page on your blog
To insert this form into a page (or post), all we need to do is copy the shortcode.
You’ll find the shortcode beneath the name of your form.
Or in the Contact Form 7 main menu area.
Once we have that shortcode we can copy it and include it on whichever page we’d like using the text editor.
If you’d like to include a contact form in the sidebar or footer area (depending on your theme) you can copy the shortcode to a text-widget.
Select Appearance > Widgets, drag a text widget into your sidebar widget area & paste the shortcode in & select save.
That’s it. You now know how to include contact forms on your website. 😃Need a contact page for your website? Here's the easiest way to add one!
Earlier in this article, I mentioned that you should NOT include your email address on your website as spammers can automatically scan them and add you to Spam email lists.
This is not always possible in some countries, like in Germany, where you are required to display an Impressum (legal notice/company details) with your contact details.
When the law requires you to include an email address and contact details, go ahead and include it. Research the laws that apply to your website to avoid any problems later on down the road.
Regardless, there is one time when I do recommend including your email on your contact page.
If you are an influencer, photographer, writer, etc. If you offer a service or can be hired to promote something, including your email address on your contact page, can act as a huge benefit.
This is because a lot of marketing and recruitment agencies do not fill out contact forms when they’re putting together a shortlist. They collect emails. This is much easier for them to contact potential partners when they’re reaching out and you can get added to their database much more easily.
You can include spaces and brackets to reduce the amount of spam lists your email gets added to, just make sure an actual person can still read it. 😉
With Contact Form 7 you can easily add custom contact forms that provide you with all of the information you may require when someone tries to contact you.
Set up your form in a matter of minutes and start communicating with your readers.
Don’t forget to include an email address though for marketing departments to easily add you to shortlists & contact you.
If you enjoyed this article, please save it to Pinterest.
Have you set up a contact form for your blog yet? Do you have any questions? I’d love to hear from you in the comments below.