How to add a contact form to a WordPress website

If you are in business, you want your customers to be able to get in contact with you. A contact form is a simple and effective Call To Action which encourages customers to tell you the information you need in an efficient way.

A secure contact form can also be a useful addition to your security arsenal, because using a contact form means you don’t have to display an email address or a phone number on your site, which spambots could harvest and use to attack you and your business.

It’s worth noting that contact forms in themselves can still attract spam if they aren’t properly secured. That’s why you’ll often see additional layers of security by way of elements such as reCAPTCHA.

If you have a WordPress website, possibly with a tsoHost customised managed WordPress hosting package, you’ll be glad to know that you can install a ready-made contact form.

There are some great free contact form plugins available for WordPress, such as Contact Form 7, which is one of the simplest and most popular WordPress plugins, with over 5 million active users.

Using reCAPTCHA adds security

An additional layer of security you can employ is to add reCAPTCHA to your contact form. This will ensure that the person trying to contact you is a genuine human being and not a robot.

reCAPTCHA is operated by Google, so it has the reassuring support of one of the biggest names in IT.

Adding a contact form plugin and securing it with reCAPTCHA is a simple process which we walk you through in this video...

Video Transcript

You start by logging in to your WordPress dashboard, as usual.

Then you’ll need to install a new plugin - as per our previous tutorial ‘How to install WordPress plugins’. In this case, we’ll choose ‘Contact Form 7’

When it’s installed, scroll down the menu on the left – and you’ll see a new item - ‘Contact’ – has been added. Select ‘Contact Forms’.

You’ll see ‘Contact Form 1’ – that’s the default template included in ‘Contact Form 7’. Yes, it’s confusing, don’t worry about it.

To personalise this and create your OWN contact form – click on it, Then go to ‘Add New’. Give your new form a name.

You’ll notice that your new form is pre-filled with basic fields - Name ... email ... subject and message. Now, the buttons along the top add form tags for new fields such as URL, telephone, menus, buttons and so on.

You can then copy the html from the other form. Let’s say you want to add a field for ‘Telephone’, click on the button. We’re going to make this a ‘Required Field’, you don’t have to. Then give it a name.

The options available to you when you add a new tag like this are -

Required Field, where the user needs to give information to send the message.

Default Value will pre-fill the field, the checkbox underneath will make it placeholder text instead.

ID and Class Attribute allow the user to style the field using CSS – but we don’t need to concern ourselves with that, here.

That’s all we’re doing, so we then click ‘Insert Tag’. Your new field has been inserted, Then you can just copy the html from the other form tags – just change the text to an appropriate label. Then click “Save”

Now, how to set up Mail Notifications for your new contact form?

Go to the ‘Mail’ tab. This is the template for the email you will receive when a contact form is sent. Check the ‘To’ field, this should be the email where you want to receive your Contact Form messages. Then, scroll down to the ‘Message body’ and add the extra form tags you’ve just added to your Contact Form – this ensures you receive all the information you want. Click ‘Save’ again.

You might notice the other tabs at the top of this page are:

‘Messages’ - which allows you to customise the ‘success’ or ‘failed to send’ messages that users might see when using your contact form.

And ‘Additional settings’ – which allows customisation using CSS to style the contact form and, again, we’re not digging into that, today.

Now, to actually add your new Contact Form to your website page, navigate back to ‘Contact’ and to the ‘Contact Forms’ page. Go down to your new form – in our case it’s ‘Contact Form 2’, highlight the ‘shortcode’ and copy it. Then, you navigate to the page you want to add it into.

So, we’re going to ‘Pages’ on the menu and, for our purposes, we’ll use this sample page. Click ‘Edit’, then paste the shortcode into the text area where you want the Contact Form to appear. Go up to the top and click ‘Update’.

Now, we’re going to ‘Preview’ and there we can check what we’ve done.

The fields are active. Just publish it and your job’s done. Your website has a contact form your customers can use.

Now, to protect yourself against spam and nuisance bots, you may want to add reCaptcha to your contact form.

First you need to register your site with reCaptcha and claim your API key. reCaptcha is owned by Google, so you need to log on to your Google account. If you don’t already have a Google account, simply visit Google dot com, click ‘Sign In’, then ‘Create New’. Fill out the appropriate fields, then, once your account is active, go to google.com/recaptcha/admin/create or, simply search for ‘reCaptcha’ and click ‘Admin Console’.

In the ‘Label’ field, you type your site name then select which version of reCaptcha you want to use. We chose version 3, as that works best with Contact Form 7.

Enter the domain of your site in the ‘Domains’ field. Accept the Ts and Cs. Yes, you want it to send your alerts. Then you ‘Submit’.

Now you’ve been registered, you can add reCaptcha to your site. Switch back to your WordPress dashboard. Go back into ‘Contact’, then down to ‘Integration’. You’ll see there’s a reCaptcha panel there, waiting for you.

Go into ‘Setup Integration’, nip back to reCaptcha and copy your unique ‘Site Key’, then paste first that, then your ‘Secret Key’ and ‘Save Changes’.

Now, reCaptcha is active on your site.

You have a contact form and you’ve secured it.