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.
[contact-form-7 id=”28″ title=”Homepage CF”]
[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