Welcome to our Google Analytics Goal Tracking guide!

Today, we’re going to go over how you can track form submissions on your website — this is a great way to measure how well your website is converting visitors, which is a pretty direct picture of site performance.

It will also give you more insight into what drives these conversions, making it easier to optimize your website and increase conversion rates over time.

Here are the most common approaches to forms for websites. We’ll go over them on an individual basis, providing detailed explanations on how to add tracking options for each one.

• Form with a separate ‘Thank You’ page
• Simple form on a PHP website
• Form added using a WordPress Plugin
  • Gravity Forms
  • Contact Form 7
  • Elementor

Tracking Prerequisites

To follow along, you’ll need Google Analytics’ gtag script installed on your website. 

To check for this, go to your website’s source code in the browser and search for “gtag”. You’ll also need to know how to create goals in analytics, which you can learn by following this guide.

Next, if you don’t have a ‘thank you’ page, you’ll need to have a basic understanding of PHP or WordPress form plugins so you can make small changes in the code.

Once you’ve got both of those things, we can dive into the different approaches and implementations for goal tracking on your website. 

Adding Form Tracking using a Thank You page

This is one of the simplest ways to go about tracking.

Generally speaking, the only way users would make it to a thank you page is by completing a form successfully. That means whenever there’s a page visit, you can trigger a form completion event.

To implement a form completion event, you’ll want to select “Destination” in the Goal Description section when you’re setting up the goal in Google Analytics. In Goal Details, just enter the path of your ‘thank you’ page. 

It’ll be something like /thankyou.html, instead of the usual www.yourwebsite.com/thankyou.html format.

Once you’ve got that set up, just click Save to update your settings. After that’s done, you will have successfully set up form tracking for your website.

This is a pretty simple and direct way to organize form tracking, so if you’re looking for other methods, you’ll have to set up your goals in a different way. We’ll cover that now.

Google Analytics Goal Set Up

To get started, you’ll want to create an event in Google Analytics. Use this format when you add the event details:

• Category – form
• Action – sent or submit
• Label – contact or inquiry – anything that helps you identify the form
• Value – (equals to) – 1
• Using Event value for conversion – Yes

Note the information you entered here, as you’ll use it for the next steps.

Adding form tracking in a PHP site

This next part is a bit technical if you’re unfamiliar with putting together a website.

For this method, we’ll need to create a PHP variable to store information that tells us whether the form has been submitted or not.

When you create this variable, define it before processing form data and set it to false ($isSubmitted = false). After the form logic has been finished, check to see if the form was submitted. If so, then update this variable to ‘true’.

At the very bottom of the page, put an ‘if’ statement that will check if our variable is true. If it is true, then we’ll specify the gtag script needed for the event.

<?php if (isset($isSumitted) && $isSumitted == true) { ?>
<script>
gtag(‘event’, ‘<event-action>’, {
‘event_category’: ‘<event-category>‘,
‘event_label’: ‘<event-label>‘,
‘value’: 1
});

</script>
<?php } ?>

Replace <event-action>, <event-category>, <event-label> with whatever you defined when creating the goal in Google Analytics.

Goal Tracking with WordPress Form Plugins

WordPress has a lot of different plugins to help users build and maintain forms, so we’ll cover a few of the most popular plugins. Specifically, we’re looking at Gravity Forms, Contact Form 7, and Elementor.

Gravity Forms

It’s a bit easier to add tracking to gravity forms compared to the other two plugins. There’s even an extension plugin that simplifies this process.

If you’re interested, go ahead and install this plugin on your site.

Once installed, this will add a new option under each form’s settings called Submission Tracking.

Before we can use this plugin, we’ll need to configure it.

• Go to Forms > Settings > Event > Tracking
• Insert your UA tracking ID (given by Google Analytics) and click save
• Go to Forms > Select the form you want to track > Settings > Submission Tracking
• Click ‘Add New’ and enter UA Code (the same you entered earlier)
• Add all other event information
• Click Save

And you’re all set up to track form submissions with Gravity forms.

Contact Form 7

Contact Form 7 will take a bit of extra code. You’ll need to add this code to the bottom of the page after your gtag script is initialized. This will most likely be added in the footer.php file.

However, before we jump into the code, get the id of the form that you want to track — this is mentioned when you go to ‘Contact’ from the menu on the left (as seen below):

Head over to your footer file and add this code:

<script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
if ( ‘<form-id>‘ == event.detail.contactFormId ) {
gtag(‘event’, ‘<event-action>’, {
‘event_category’: ‘<event-category>‘,
‘event_label’: ‘<event-label>‘,
‘value’: 1
});
}
}, false );
</script>

Replace <form-id> with the form id you got. Replace <event-action>, <event-category>, <event-label> with what was defined when creating the goal in Google Analytics.

The code implementation listens for the event when any form is submitted. Once done, we’ll verify if the submitted form is the one we want to track. If all checks out, we’ll run the gtag script that sends this event to Google Analytics.

Elementor

For this plugin as well, you’ll need to add some code at the bottom of the page. This code will go after your gtag implementation, which will most likely be in footer.php

Head over to your footer file and add this code:

<script>
jQuery( document ).ready(function( $ ){
jQuery( document ).on(‘submit_success’, function(){
gtag(‘event’, ‘<event-action>’, {
‘event_category’: ‘<event-category>‘,
‘event_label’: ‘<event-label>‘,
‘value’: 1
});
});
});
</script>

Replace <event-action>, <event-category>, <event-label> with what was defined when creating the goal in Google Analytics.

The code implementation listens for the event when the form is submitted. If it’s submitted successfully, we’ll run the gtag script that sends this event to Google Analytics.

Conclusion

We have covered how you can add tracking to some of the popular ways forms are added. These methods would work perfectly if your site has a single form. If you happen to have more than one, you’ll need to make some changes to the code.

As you have seen, even the slightest change in approach requires for the entire code to change. So be cautious when making any changes and always test when implementing.

That being said, if there are any other plugins or methods that you’ll like for us to cover, comment below your suggestions.