Increase Contact Form 7 Submissions

WordPress/ 15th Nov 2018/Jamie Hoyles

A great way of capturing leads is to include an email box on a web page. Here I look at how to increase Contact Form 7 submissions on WordPress built websites.

Create Your Contact Form

Contact Form 7 is the most popular email form available with over 50 million downloads. The first step is to create a very simple submission form – all I wish to do is capture the user’s email address so just one field is required..

Increase Contact Form 7 Submissions

Initial Appearance

The contact form appears as follows on the website:

Contact Form 7

Introduce Styling

Styling can be made manually, however an easier way to do so is to use a plug-in such as Contact Form 7 Skins. Once activated a new section will appear underneath the contact form edit page…

CF7 Skins

To apply I navigate to ‘Style’ and chose a theme. I have chosen the ‘Caspar’ theme which styles the form as follows:

This has resulted in a border being applied to the web form.

I’d like to style the form further in an attempt to draw visitors into submitting their details. I’m going to add a title to the form and introduce some formatting…

Contact Form 7 Styling

The contact form now looks much better:

Finally I’m going to look at the submission button – It’s possible to add formatting to this so that the width increases. To do so we will need to find the name of the form. I recommend using Firebug (shortcut {Ctrl + Shift + C}) in Firefox to do so.

Contact Form 7 Firebug

In the highlighted text the contact form name is shown : #wpcf7-f2163-p559-o2

To increase the width of the submit button, the following needs to be added to the active theme’s CSS:

#wpcf7-f2163-p559-o2 .wpcf7-submit {
width: 90% !important;
}

Here, I am telling the theme that the submit button’s width should be 90% of the available page…

Finally, I am going to rename ‘Send’ to ‘Email Me!’

The result…

Contact Form 7

Add Pre-Populated Text

To draw the visitor to the form I’m going tell them what to do… It’s possible to add placeholder text to the text area via the contact form configuration page:

Contact Form 7 Placeholder Text

The form now appears as:

CF7 Placeholder

Auto Select Form Fields

When a user visits Google, the cursor is ready and waiting in the search box. It is possible to add this feature to the capture form. Research has found that when enabling an auto select form field,  Contact Form 7 Submissions increase. To put this in place requires a piece of JavaScript code adding to the theme’s footer.php file:

<script type=”text/javascript”>
jQuery(document).ready(function($) { jQuery(‘.wpcf7-text:first’).focus(); });
</script>

Once in place the contact form appears with a flashing cursor when viewing via desktop:

Final Appearance

Even better, when the site is viewed via mobile the form is highlighted straight away:

Add reCAPTCHA

Finally, you may wish to add reCAPTCHA to your form to decrease spam / malicious submission. To do so please see our guide on stopping contact form 7 spam.

———————————————-

Implementing these steps should see Contact Form 7 Submissions increase. The contact form is now much more prominent and the visitor is able to enter their details without much effort.

If you have an accounts query it is likely Jamie will be the one to help you resolve it…! Away from the office he is a supporter of Tony Mowbray’s blue and white army, enjoys watching and playing cricket and appreciates a good meal out.

We have a very strong team here at Clook and we build on everyone's strengths and weaknesses, you have to be able to make a good brew too!

Chris James

Customer Login

Forgot Password? Cancel