How to Add a contact form to your wordpress site.
Add a contact form to your WordPress. In this post I’ll be talking about how to add a contact form to your WordPress, why you’re likely to need a contact form, and the benefits of using a contact form on your site.
I’d recommend reading my post about email deliverability and how to improve this, and the post covering SMTP authentication when using WordPress as both affect the emails generated by contact forms on a WordPress site, and more importantly, how likely it is that these emails will be received. It’s advisable to apply what’s mentioned in both of these posts before you deploy your contact form.
It’s probably a better idea to read the supporting information on this page, as it covers dos and don’ts for when you add a contact form to your site, but if you really, really want to skip this you can find out how to actually add a contact form to your WordPress by clicking here.
You’re going to need to log in to Google’s captcha service when working through this guide, which you can do using a GMail address, so it might be worth registering a GMail address if you don’t already have one.
Why you’d want to add a contact form to your WordPress.
You’re most likely to want to add a contact form to your WordPress so that you can be contacted via your site.
While it is possible to simply put an email address on your site, there are downsides to doing this (which I’ll cover in a moment), and a contact form also gives more of a defined, site based mechanism that can be used to get in touch with you.
A contact form also has predefined fields to allow you to clearly state the information site visitors will need to provide when getting in touch, such as their email address or telephone number. Contact forms in most cases can be customised to request different types of information in addition to this, so they can also be used to provide information you’d need to be able to provide a quote for a service you offer, or a date to check to see if you’re available.
If you simply put an email address on your site, you might receive an email that says something like:
“Hi, how much do you charge?”
But you could used a contact form to make a quote form that asks for information instead. To use a removals company as an example, the quote form might ask for things like locations, approximate date, and the number of rooms in the house being moved from. That would mean that instead of receiving:
“Hi, how much do you charge?”
You’d instead receive:
- Moving from location
- Moving to location
- Approximate date
- Number of furnished rooms
- “Hi, how much do you charge?”
The information that can be gained when doing this can then be used to provide a quote without as much need to work this out after the initial contact.
So whilst you might want to add a contact from to your WordPress to allow someone to contact you, they can be used for more than this alone.
The benefit of adding a contact form to your WordPress.
As I’ve mentioned above, it is possible to simply state your email address on a website, rather than add a contact form to your WordPress. Whilst it is easier simply to state your email address on a site, there is a downside to doing this.
Spam.
Yes, that’s right, if you simply state your email address on your website, this will increase the amount of spam you’ll be sent.
There are bots that crawl (read) the internet, just like the Googlebot does, except instead of reading sites to work out what they’re about and establish where they should come in search results, these other bots are looking for email addresses. The reason they’re looking for these is to build lists of valid email addresses that can then be spammed. If you present your email address on your website and one of these types of bots reads your website, your email address will end up on spammers mailing lists, and you’ll start getting spam.
If you add a contact form to your WordPress, although an email is ultimately sent, your email address is masked by the form itself. Consequently, using a contact form reduces the amount of spam you’ll receive.
Or will it?
There are quite a few different types of bad bots that crawl the internet. As well as the type that looks for email addresses to spam, there are also bots that look for contact forms that aren’t adequately protected and then use them to send spam. The fun never stops!
The de facto mechanism used to protect contact forms is the “captcha”. I would have thought you’ve come across the “I’m not a robot” tick box, or the “click on all the pictures containing bicycles” when filling out forms on websites. These are captchas and they’re used to protect forms on websites from bad bots. Captchas work in different ways, some by displaying something that makes sense to a human, but not to a bot, others simply introduce a delay in to the contact from submission, which in itself prevents the bot from being able to make a form submission.
Adding a captcha protected contact form to your site will reduce the amount of spam you’ll receive, compared to simply stating your email address on your website.
So you should add a captcha when you deploy a contact form. There’s also something you shouldn’t do when adding a contact form to your website, and that’s sending a “thanks for your message” email. Simply displaying “thanks for your message” on the page after the contact form message has been sent is a much better practice.
Why?
If, for any reason, your captcha fails, and you’re sending “thanks for your message” emails, this would allow some kind of nasty bot to make contact form submissions on your site, and effectively “fire” loads of “thanks for your message” emails to any email address it enters in to your site’s contact form.
You might think something along the lines of “what are the chances of that actually happening?” after reading the above, but if it does, it could result in your site ending up on a blacklist, or your domain being blacklisted as a source of spam (there goes your efforts with the email deliverability side of things!) Neither of which are much fun to sort out.
As always, prevention is better than cure. Avoid getting blacklisted by not sending the “thanks for your message” email in the first place, even if the chances are slim.
How to add a contact form to your WordPress.
The contact form plugin we’ll be using is Contact Form 7. As far as contact forms go, it’s got most things covered. You can easily integrate a captcha, and it provides a wide variety of form fields that cover all sorts of things (not just text) such as calendar date pickers, the ability to add attachments, allows you to set up multiple different forms and you use a shortcode to put the contact from on site pages, so it’s quite a flexible plugin. The only thing it doesn’t do out of the box is conditional form logic (if this is selected present these additional options, if that’s selected present some different options), but if you do decide you need this there’s an add on plugin called Conditional Fields for Contact form 7 that can be used to add this functionality if you need it later.
For now, we’ll just be keeping things simple for now, by using this plugin to create a name, email address, telephone number, and message type contact form.
You install this plugin just like you would for any other plugin, so star by hovering over “Plugins” in the menu on the left hand side of your WordPress dashboard, then click on “Add New”:
Then, in the search box type contact form 7 wait for the search to complete, then click “Install Now” in the Contact Form 7 section:
Then wait for the installation to complete, and once it has, click the “Activate” button in the Contact form 7 section:
Once the activation has taken place, you’ll see “Contact” in the menu on the left hand side of your Worddpress dashboard. Hover over this, then click on “Integration”:
Then scroll down until you see the “reCAPTCHA” section, then click “Setup Integration” button in this section:
And you’re then presented with two boxes asking for a site key and a secret key.
We need to generate these with Google (as it’s Google that are effectively providing the captcha functionality). To do this, you’ll need to go to this page (and sign in with your GMail username and password:
https://www.google.com/recaptcha/about/
Up at the top of this page, click on “V3 Admin Console”:
On the next page, click the + toward the top right hand corner:
On the next page enter:
- Label: The address of your site
- Recaptcha type: Score based (V3) (this makes it a hidden captcha so people don’t see the “I’m not a robot” but it is effectively there
- Domain: The domain of your site (the address of your site with no https:// or https://www.)
Then click the “Submit” button:
And you’ll then be presented with the site key and the secret key:
Now it’s just a case of copying and pasting these keys in to the respective boxes in the Contact Form Integration page we were looking at a moment ago, and once you’ve copied and pasted both in to the respective fields, click “Save changes”:
And you should then see a “settings saved” message. On the left hand side, click on “Add New” to start setting up the form itself:
As you can see, there’s already a basic form set up! How nice! So you don’t really need to do anything on this page other than to give the form a sensible name, and then click on “Save” in the top right hand corner:
But if we want to add a telephone number to the form, we can do so by, adding one in.
The white area in the middle of the screen works like a normal text area, so you can add to this, just like you would a text editor. Initially add a few lines by clicking on the blank line below the email section and pressing return a few times. You should end up with this:
Now press the up arrow on your keyboard to move the cursor up a line so that it’s half way between the “Your email” and “Subject” sections, then click on the “tel” button at the top:
A pop up box will appear to add the telephone number field with a randomly generated ID. You might also notice the “Required field” tick box. If you click this, whoever fills out the form will, have to enter a telephone number to be able to submit the form and send you the message.
I’m not going to tick “Required field” as this allows people to be able to submit the form without providing a telephone number. They can still enter one if they want, but I’m not going to make them fill this field out.
We’re going to tidy it up a bit so that it’s all very obvious what this field in the form does. We’re going to do this by changing the ID to telephone-number. To do this, type telephone-number in the “Name” field, then click somewhere else on screen and you’ll see the tag at the bottom update accordingly, then click on “Insert Tag”:
You’ll see that the telephone number field has been added:
But if we just leave it like this, there will be an unlabelled telephone number box (so it will appear as just a box with no label text) on the form. So we need to add a label to the form field (as below), by manually adding (typing) this before the telephone number tag:
<label> Your telephone number
And this after the telephone number tag:
</label>
You can see how I’ve done this below, you’ll need to do the same, then click “Save”:
Now we’ve set up the form, we need to set up what form fields get put where in the email that gets generated when someone submits a contact form message via your site. To do this, click on the word “Mail” toward the top:
And what you’ll see is this:
Before we start configuring all these options I’ll explain what they mean:
- To: This is the email address the contact form generated email will be sent to. At the moment it’s set to [_site_admin_email] so if left unchanged the contact form email would be set to whatever the administrator email is set to in your WordPress. You can update this to your own email address, but if you manually specify an email you need to wrap it in the pointy brackets, such as <jeff_smith7@gmail.com>
- From: This is the email address that will be set as the from header in the contact form generated email. This currently defaults to what the site administrators email is set to in WordPress. Remember how you set up SMTP authentication for your WordPress? Well we’re going to want to use the same from address as the email address we’re using for SMTP Authentication. Again, the email address needs to be wrapped in pointy brackets. When I set up the SMTP authentication above, I did so using website@someguycalledralph.co.uk so I’m going to use <website@someguycalledralph.co.uk> . The [_site_title] part is used to set the from name, so say I left [_site_title] in place, the contact form email I receive would have a from name that’s the site title and a from address of website@someguycalledralph.co.uk. It’s the from address that affects email deliverability (rather than the from name) so you’re definitely best to set this as the same email address you used to set up the SMTP authentication.
- Subject: This is what will appear in the subject line of the email. We know that [_site_title] will put the title of the site at the beginning of the subject. The [your-subject] adds what the person making the contact form submission put in the “Subject” field of their contact form submission. They effectively set part of the email’s subject line by writing in the “Subject” field of the contact form.
- Additional headers – Reply to: This sets the reply-to header of the contact form generated email. As the person filling out the form entered their email address in the “Your email” field, this gets used as the reply-to email. Due to this when you receive a contact form email from someone, when you reply to that email, it will be sent to the address that was entered in the contact form on your website.
- Message body: What’s in here will be in the body of the generated email. As you can see there’s From: [your-name] [your-email] which will display as From: What was entered as “Your name” on the form, plus what was entered as “Your email” on the form, and the same applied for the subject and the message (whatever was entered as these will be displayed in the respective parts of the generated email.
At this point you’ve probably noticed that there’s no telephone number in the generated email. We’ll have to add that. When we added the telephone number to the form, we set the id of telephone number field to:
telephone-number
So to make this display on the form, we need to add this to the form:
[telephone-number]But that would show JUST the number entered in to the contact form, so we might want to make it appear in a more obvious format on the form by using:
Telephone number: [telephone-number]
You can see all of what I’ve set here, make sure you click save once you’ve set yours:
As you’ve probably figured out, you can do the same as what we did for the telephone number to add additional form fields. As long as you set the ID of additional form fields in the Mail section (using [field-ID] in the email) what’s entered in the added form field, will then be included in the generated email.
By clicking the “Messages” tab toward the top you can customise displayed messages for things like the message that’s displayed when a contact form is submitted. Generally speaking the default messages are fine, but you ca customise yours if you want (click the “Messages” tab, customise messages as you see fit, then save:
Now we just need to add the form to a page.
You might have noticed this at the top of the form:
This is the shortcode of the contact form you’ve just set up. All you need to do to put this on a page on your site is copy and past this shortcode on to one of your site’s pages, just like you would text.
Although I’ve just got a sample “Hello World” post on my home page at the moment, I’ll add the form by taking a copy of the shortcode:
And then I’ll edit the Hello World that’s currently set as my homepage (in my case by clicking on Posts > All Posts > Edit) and then just right click and paste to paste the shortcode on to the page:
And then once the code is pasted in, I just click the publish button to save the change to this page, and when I browse to the page, I now see the form:
And now I’m going to test the form, by filling out some details and clicking the submit button:
And then I check to see if I’ve received the email containing all the information I entered, which I do!:
In conclusion.
- Email deliverability is important even if your site only sends you contact form emails.
- Email deliverability can, in part, be improved with SMTP authentication.
- When configured your WordPress will sue SMTP authentication for all site messages.
- You can use a contact form to allow site visitors to email you without displaying your email address.
- Contact forms need to be captcha protected to prevent them being used to send spam.
- Contact forms can be set up and customised in your WordPress dashboard.
- You can place contact froms on site pages by adding the contect form’s shortcode as text.