WordPress Contact Form 7 form submission and Google Analytics goal completion

For our first blog post on this new blog we're going to simply jump in to a problem that many people have: How do I set up goal completions from my WordPress Contact7 form submissions?

What is Contact Form 7?

Contact Form 7 bills itself as "Just another contact form plugin. Simple but flexible.", which explains its usage by over 3 million websites and inclusion in many popular WordPress themes. This plugin makes it incredibly easy to install a contact form into your WordPress website for various usages, but also includes some customization options that many users are not aware of.

What are Google Analytics goals?

In order to gain actionable intelligence from your Google Analytics reports, it is of primary importance to set up goals within your Analytics. Goals enable you to see goal conversions, which provide you with data regarding where those goals originated and other intelligence. You can read more about Google Analytics and gaining actionable intelligence here.

Steps to configure Contact Form 7 and Google Analytics Goals

In order to make this work we're going to take advantage of functionality that Contact Form 7 included to send Javascript on actions within the embeded form.

Step 1: Configure your form to send a Google Analytics event

Here we've got the forms we're currently using within the website. Click on Edit for the form you'd like to configure.

Click on Additional Settings and add the following code, then hit Save:

on_sent_ok: "ga('send', 'event', 'submission', 'submit');"

What this is doing is sending extra data to Google Analytics when you hit Submit which has the event category of "submission" and the event action of "submit". Keep in mind that if you are doing multiple forms you want to replace "submission" with unique identifiers of each form that you're using so you can keep them as separate goals if desired.

Step 2: Create the event goal in Analytics

Go into your Google Analytics, click on Admin, then in the right column click on Goals. Click on the red button that says New Goal to begin the process of adding a new goal.

Select "Contact Us" as the template to use.

Give the goal a name that keeps it separate if you have multiple forms. You can always rename this should you add multiple forms in the future and need a better naming convention. For Type, choose Event since we're going to create an event-based goal.

For the third step, we're going to put in the Goal details and Event conditions. For Category we're going to use the category information from above (in this case "submission") and for the action we're going to use "submit" from above. Both of these are using the "equals to" in the drop down.  Leave label and value empty. Then hit Save.

Congratulations, your event goal is now set up!

Step 3: Test live goal completion

Don't stop quite yet, you want to test your form submission and goal. The tricky part here is that most of the time Contact Form 7 is set up to not record submissions if you are logged in as an Admin user in your WordPress site. So to test, you'll either need to log out of your site admin first, or instead you can open an Incognito window in Chrome.

Once you've done that, in Analytics, go to the Real Time reporting in Analytics, and then go to Conversions. In your Incognito window, go to your form page and hit refresh. Then fill in your form and hit submit. Switch back to your Analytics real time reporting and you should now see a Goal Completion having occurred!