There has always been several preferences when it comes to contact forms for WordPress.
Of all the plugins available to create and manage contact forms in WordPress, Contact Form 7 is definitely the most popular, considering its current 1 million + active installations.
It is of course easy to see why Contact Form 7 has gained such a strong following, given it’s regular updates, simple user interface and multitude of features.
This page has been created to save development and setup time, as well as improve overall user experience on both the front and back end.
Creating and editing the contact form
Main WordPress menu > Contact > Your form
Your form code should be as simple as possible.
Remove paragraphs and line breaks to avoid display variations, name each element in uniformity, and make sure you use the appropriate elements where possible (ie email for email input.)
Consider making use of the placeholder where suitable as well. Place holders are a HTML5 pseudo element supported by all modern browsers, as well as Contact Form 7. You can use these to add default text to your form inputs and textareas, making for a better looking form that takes up less screen real estate (browser support here). When creating a form in Contact form 7, placeholders can be added using placeholder”place holder text” (example below).
Reduce and remove browser display differences within your CSS using elements like -webkit-appearance: none; . Feel free to use the CSS provided below to save some time. Most browser bugs and display issues have been taken into account when it was written.
A good example of form code:
[text* your-name placeholder"Name"]
[email* your-email placeholder"Email"]
[tel your-phone placeholder"Phone Number"]
[text your-subject placeholder"Subject"]
[select your-selection "Choose an option" "1" "2" "3" "4" "5"]
[textarea your-message placeholder"Message"]
Using jQuery to add Google Analytics event tracking on submit
This is about the fastest way to add event tracking to your form for Google analytics.
Using a simple snippet of jQuery, we can add a submit listener to the WPCF7 submit button.
The output of this will be: ga(‘send’, ‘event’, [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);.
In the below setup, the eventLabel will be ‘/pathName.html_formName’, an easy automatic way track the page URL and form used.
There are two different onClick options at the bottom, the first of which will register one particular event no matter which form is submitted. The second can be copied and pasted with the form class changed to register different events depending on which form is submitted.
// - Tracking WPCF7 form submit
// Data added to tracking
var gaContent = "ga('send', 'event', 'eventCategory', 'eventAction', ";
var pathName = window.location.pathname; // Path name of page
var gaContent2 = ", 'eventValue', 'fieldsObject');";
$(".wpcf7-submit").attr('id', 'submitListener'); // Add id submitListener to all WPCF7 submit buttons
// All WPCF7 forms as same event
$(".wpcf7-submit").attr("onClick", gaContent + " '" + pathName + "_addFormNameHere" + "'" + gaContent2);
// To add individual event to different forms, copy as many as needed or don't use at all
$(".aSpecificFormClass .wpcf7-submit").attr("onClick", gaContent + " '" + pathName + "_addFormNameHere" + "'" + gaContent2);
Stop spam without reducing usability
Anti-spam features like Captcha or quizzes are both inconvenient and often unsuccessful. Fortunately, Contact Form 7 Honeypot plugin exists.
This plugin allows you to insert a hidden form input that humans will not see or use. Spam bots on the other hand will fill out the input, and in this scenario, the form will not be submitted to the recipient address. The best part about this is it only takes a minute to set up, and is extremely effective.
To make use of this, simply download and install the plugin, then edit your form and add ‘Honeypot’ from the Generate Tag area.