A Contact form on your blog or website enables visitors to easily contact you without you giving up your email address. It is also convenient for visitors too. But you must protect from spam.
There are many ways to add a contact form and you can see this site’s form at rawinfopages.co.uk/contact/
You can put a link to your contact form on a menu, in the sidebar, in the footer, and so on. I put a small link in the footer of every page in the Contact section, but it could be more prominent if you prefer.
A contact form can be placed on any number of pages and they can all be the same or all different. It is up to you how you use them. However, there can be only one per page.
There are many ways to insert contact forms in WordPress web pages and plugins like Jetpack, Contact Form 7 and Contact Form by WPForms are very popular indeed.
First I will look at Jetpack and then Contact Form 7. Jump to Contact Form 7
Add a Contact form with Jetpack
Jetpack, which has 4+ million active installations, is a comprehensive collection of tools that perform many functions and one of these is forms. Some WordPress sites come with Jetpack already installed, but it can easily be added if you do not have it. (People have a love/hate relationship with this plugin so read the Jetpack pros and cons and use Contact Form 7, see below) if you prefer an alternative.)
Install and enable Jetpack Contact Form
- Click Plugins in the WordPress sidebar
- Click the Add New button
- Enter ‘jetpack‘ into the sidebar
- Click the Install Now button next to Jetpack
- Click the Activate button when installation finishes
The Contact Form module is enabled by default, but if you don’t see it in the post editor toolbar, go to:
www.your-site.com/wp-admin/admin.php?page=jetpack_modules
The Contact Form module can be enabled here:
Add a contact form with Jetpack
A form can be inserted on any post or page, but I would recommend creating a page called Contact, which can then be put on a menu or linked to.
Enter any introductory text you want at the top of the page, such as ‘Please fill in this form if you want to contact me‘ and then on a blank line, click the Add Contact Form button in the toolbar. A default form is inserted automatically.
Customise the form
There are two problems with the default form and one is that it has a box for people to enter their website URL. This is not needed, in fact, some visitors may not even have a website.
Click somewhere in the form and it is highlighted. At the top is a pencil and a cross icon. Click the pencil to edit the form.
Click the cross on the right site of the Website section to remove it.
Click Update Form at the bottom and then publish the page.
This form may be all you need and you can publish the page and let visitors use it. If someone fills in the form and sends a message to you, where does it go?
There is a Feedback menu in the WordPress admin sidebar and submitted forms appear there. You can read them or deleted them. and it is very similar to the Comments admin section. You also receive contact form feedback by email too. Messages are sent to the email registered as the site admin in Settings > General, which is probably you.
Stop contact form spam
There is absolutely nothing to stop people sending you spam by filling in this form. However, the main aim of a spammer is to put their junk in front of as many people’s eyballs as possible. A contact form is only seen by you, so this is a bad deal for spammers.
Even if the contact form is easy to find on your site, you tend not to get much spam through it. If you find that spam does come through the contact form, there are ways to make it harder for spammers.
Most spam is automated and programs, bots, go from site to site adding spam comments. These bots are semi-intelligent and can fill in forms like the comments form on posts and the contact form.
However, you can often fool them by adding a simple question with a required answer.
Add a form field
Return to the contact form and click Add Field at the bottom.
Enter some text into the Field Label box
Set the field type to Checkbox
Tick the Required box to make it compulsory
Click the Update Form button, publish the page and here is what it looks like:
If a spam bot is not clever enough to tick the box, the form will not be submitted because a response is required.
Does it work? I started to get a few spam contact form submissions, so I added this checkbox. It is too early to say whether it is working, but I haven’t had any spam yet, so maybe it is!
Build your own custom Jetpack forms
Forms can be placed anywhere and for any purpose. Just add them when you need to collect information from visitors or when you need to get a response from them. You now know how to:
- Add a form
- Remove fields
- Add new fields
- Make fields required
One of the nice features of the contact form in Jetpack is that if you use the Akismet spam filtering plugin on your site, the contact form is sent to Akismet and spam is automatically discarded.
Information submitted using a contact form is not private or secure, so it cannot be used for collecting credit cards and other private information.
Add a contact form with Contact Form 7
Contact Form 7 is more powerful and flexible than Jetpack forms and you can do a lot more with it. It has extensions and add-ons that add features and functions, which is useful, and the plugin has over 1m users so it is very popular. It is a bit more difficult to use than Jetpack, but you get used to it and after making your first Contact form, you can try making other forms.
Install and enable Contact Form 7
- Click Plugins in the WordPress sidebar
- Click the Add New button
- Enter ‘contact‘ into the sidebar
- Click the Install Now button next to Contact Form 7
- Click the Activate button when installation finishes
View and edit the Contact form
The plugin comes with a contact form that is ready to use. To see it, select Contact in the sidebar, mouse over Contact Form 1 and click Edit (clicking a form’s name opens it in the editor, too).
The form itself is in code, but it is not too complicated and it is a bit like HTML with start and end tags enclosing text.
If this looks confusing, wait until you see it on the page because it makes more sense. You can change the text following <label> but the default is fine.
Stop Contact Form 7 spam
Spammers and bots fill in contact forms with junk, adverts, bad links and more, and they must be stopped. There are several ways to prevent abuse of the contact form and I have had good success with a simple question asking if the user is human.
Click the blank line before the last one with submit on and click the acceptance button in the toolbar.
The name is filled in automatically (do not copy mine), but you can enter any text you want in the Condition box.
The Acceptance Checkbox is useful for making sure people accept terms and conditions or have read your privacy policy and so on. Here we just want to check that people are human and not bots.
Clear the checkbox, Make this checkbox optional – we want to make it compulsory. Click Insert Tag.
This is what the form looks like. Save it with the button at the bottom of the page.
Configure Contact Form 7 email settings
Select the Mail tab and you might find the settings OK, but you might need to tweak them. When someone fills in the contact form and clicks the Send button, it is sent to you as an email. Make sure the To box has the email address that is to receive contact forms. The other boxes are fairly obvious.
Save it and now you are ready to create a Contact page.
Build the Contact page
Select Contact in the sidebar and copy the shortcode for the form you created.
Go to Pages and create a new page called Contact. It can be called anything, but it makes sense to call it Contact.
Here you can see the shortcode that was copied and pasted. It is optional, but useful to add some text and/or images above the form just to say what it is form. Save it and take a look.
How the Contact page looks depends on the theme you, so the colours, styles and sidebar will be different on your site. The contact form will look more or less like the one above.
Notice the Confirm that you are human checkbox at the bottom. The Send button will only work if the checkbox is ticked. (You can add another saying ‘I accept your terms and conditions’ or something similar.)
Check the Contact Form
Try filling in the form and sending a message. Check your email to see if it arrived. It works fine on both my WordPress websites but some people have found that their web hosting company has not enabled email or has not configured it correctly and contact form emails never arrive.
If you do not receive emails, double check the Email tab in Contact Form 7 editor. If you are sure it is correct, get a plugin called WP Mail SMTP. It lets you use a third party email service with your website that ensures emails are delivered. You might need to sign up for a free account at a site like SendGrid – select the Email API tab and get an API Key. Copy and paste it into WP Mail SMTP plugin settings.
