There has always been several preferences when it comes to contact forms for WordPress.
Although many choose to go down the route of using non WP JavaScript or PHP forms, most are likely to choose a plugin to do the job.
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: 

 

1
2
3
4
5
6
7
[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"]
[submit "Send"]

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* --- Form and wrapper --- */
.wpcf7{width:70%;}/* Set width of form and elements here */
.wpcf7-form{margin-bottom:100px; font-size:15px !important;} /* All font sizes *//* --- Form elements --- */
.wpcf7-form input, .wpcf7-form select, .wpcf7-form textarea{border:1px solid #ccc; padding:10px 10px 10px 15px; margin:0 0 10px 0 ; width:100%; -webkit-appearance: none; outline:none; box-sizing: border-box;}
.wpcf7-form input{}/* Inputs only */
.wpcf7-form select{ background-image:url(img/drop-arrow.png); background-repeat:no-repeat; background-position:center right 15px; color: #999; padding:10px;}/* Select boxes only */
.wpcf7-form textarea{resize:vertical; padding-top:15px;}/* Textarea only */
.wpcf7-submit{width:60% !important; background-color:#555; color:#fff !important; display:block; margin:0px auto !important; font-size:14px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; padding:10px; }/* Submit button *//* --- Form elements on hover --- */
.wpcf7-form input:hover, .wpcf7-form select:hover, .wpcf7-form textarea:hover{background-color:#f9f9f9;}
.wpcf7-submit:hover{background-color:#666 !important;}/* --- Form elements on focus --- */
input[type="text"]:focus, select:focus, textarea:focus {outline:0; border:1px solid #555; color:#555; background-color:#f9f9f9;}/* --- Placeholder text --- */
::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder {-webkit-appearance: none; color:#ccc;}/* --- Hide placeholder text on focus --- */
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color:transparent;}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { color:transparent;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { color:transparent;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { color:transparent;}/* Loading gif on submit */
.wpcf7-form .ajax-loader{position:relative; margin:-27px 0 0 20px; width:20px; height:auto;}/* Text box after submission */
.wpcf7-response-output{}

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.

Just paste the below into your scripts.js file within your theme, add your JavaScript tracking snippet to your header.php file and alter each element in the script to include the information you require.

1
2
3
4
5
6
7
8
9
10
11
12
// - 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.