Green Clook

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

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(); });

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:


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.

Did you know…

At Clook, one of our specialisms is providing WordPress hosting, if you’d like to find out more, please get in touch with us.

About The Author

Scott is a UX Designer and Developer at Clook. He’s passionate about UI Design, WordPress Development and Marketing.

Working on the creative, branding and marketing side of Clook. He's involved in creating a variety of digital and print designs for us.

Connect on Linkedin

Clook Logo

Get regular tips, tricks and updates!

Signup today for our awesome newsletter and recieve monthly emails with all sorts of helpful articles on hosting and web development.