Any Questions?

02476 252 345

Contact Form 7 Tips & Tricks

Contact Form 7 for WordPress allows you to manage multiple contact forms across your website, and today I am going to share with you some useful tips for those who are just getting started using the plugin on their websites.

Tracking Contact Form 7

Contact Form 7 comes out the box with a nifty same page Ajax submission feature that is great for front-end users. However it can be slightly confusing when first figuring out how to track contact submissions via Google Analytics. To track Contact Form 7 simply navigate to your contact form in the backend of WordPress and scroll to the bottom of the page to the section titled ‘Additional Settings’. In this box we are able to trigger our tracking codes. Dependant on what version of Google Analytics you are using on your website (Universal or Classic), you will require a different line of code.

Universal Analytics Code

on_sent_ok: "ga('send', 'pageview', '/goal/');"

Class Analytics Code

on_sent_ok: "_gaq.push(['_trackPageview', '/goal/']);"

Okay, so all you need to do now is simply change the last parameter to the path you prefer. Once you have added this simply head over to your analytics account, set up a goal for your website and track the path we entered above.

Styling Error Messages

The error messages that pop up on Contact Form 7 when your submission has errors often can look nasty and can sometimes seriously break your layout. The custom styling used for the error messages should only be left the same for input fields that ARE NOT inline otherwise the input fields will misalign.

Floating Validation Tip

Luckily there is a very simple fix, we need to make the error message float. To do this we need to make two simple changes. Firstly we need to ensure we alter the embed code to include a new parameter.

Before

[contact-form-7 id=”28″ title=”Homepage CF”]

After

[contact-form-7 id=”28″ title=”Homepage CF” html_class=”use-floating-validation-tip”]

This tells contact form 7 that we will be using floating validation tips.

Then we just need to pop over to our form and wrap our input field short codes with span tags with the class “use-floating-validation-tip”.

Simply save your contact form and you will now have floating tips that will disappear on hover.

Contact Form Honey Pot

Unless you have been hiding under a rock you will know that if you do not protect your contact forms, spam bots will have a field day. Luckily a Honey Pot plugin exists developed by Dao By Design called Contact Form 7 Honeypot which works perfectly with the original Contact Form 7 plugin. Simply head over to your plugin search and run a search for Contact Form 7 Honeypot and install the plugin. All you need to do now is head over to your contact form and add the honey pot short code into your form. Wave goodbye to spam. This concludes a small selection of tips that I find really improve Contact Form 7

Written by:

Creative Director - info@mash-webdesign.co.uk - 07541987924 - DOB: 02/1993/27

With over five years commercial experience in the web industry, Adam specialises in all things web related. Adam has a passion for CRO, ensuring that the websites he creates don't just look great but also make his clients money.

Mash Web Design