Increase Contact Form 7 Submissions

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..

Initial Appearance

The contact form appears as follows on the website:

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…

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…

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.

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…

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:

The form now appears as:

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.

Jamie Hoyles

Office Manager & Customer Account handler at Clook Internet. SEO Enthusiast & WordPress Web Developer in my spare time. Outside work I’m a supporter of Blackburn Rovers, like fast cars and watching fast bikes…