Updated: March 6th, 2018. Gravity Forms is a customizable WordPress plugin which enables you to add simple or complex forms to your website, blog, or whatever you’re running on WP. But just like any important interaction, form submissions must be tracked in order to better understand visitors’ behavior. In this blog post, I’ll show you how to track Gravity forms with Google Tag Manager and send Form submission events to Google Analytics.


#1. how to track Gravity Forms with Google Tag Manager [short version]

If you’re in a hurry, just follow these quick steps. But if you want to understand why I chose one or another way, read the full blog post.


#1.1. Gravity Forms Listener

Create a Custom HTML tag with the following code:

Fire it on all pages that have the Gravity form embedded (e.g. Page Path contains “contact-us”). This JavaScript code will listen to successful form submissions and fire a Data Layer event, called formSubmission.

IMPORTANT: This listener supports only AJAX-based Gravity Forms. If the page does not refresh after the successful submission, then this listener will work fine. If (after successful submission) the visitor is redirected to a separate Thank you page, you’ll have to add some additional code to form’s settings. Read the next chapter to find out more.


#1.1.1. What if my Gravity form refreshes the page or redirects a visitor to a ‘thank you page’?

In that case, the aforementioned Gravity Form Listener will not work. What you’ll need to is to log in to WordPress, find the form and add an additional code snippet which will help us identify that the form was submitted successfully.

  1. Go to Forms and open the one you wish to track.
  2. Then go to its Settings
  3. Click Confirmations.
  4. Usually, the Confirmation type is “Text” and what you’ll need to do is to add a small JavaScript code there. It will create a Data Layer event “formSubmission” which we’ll use later as a trigger.

Gravity forms settings in WP

The code snippet that you need to add after the Confirmation message is:

Two important things to keep in mind:

  1. Before pasting the code, switch the text editor to “Text” mode (instead of “Visual”)
  2. Disable the auto-formatting in that editor (there’s a checkbox at the bottom), otherwise, it will break the code.
    disable auto formatting

How to test if this is working? Save the Confirmation settings, enable GTM Preview and Debug mode, go back to your form (on the website), and submit it. If you see “formSubmission” event in the Preview console, the code is working fine and you can move on to the next chapter.

One more thing. If you have two or more Gravity forms on the same page and those forms refresh the page, then you need to modify a bit the window.dataLayer.push code I’ve recently mentioned. In this case, both forms should different codes. The adjusted code of the first form could look like the this:

As for the 2nd form, its code should contain ‘formID’: ‘2’.

Why did we do that? different formIDs will help you identify (in the data layer) which form was submitted.

By the way, if the form redirects a visitor to another page (a.k.a. “Thank you page”), read this guide how to track such forms.


#1.2. Custom Trigger and (optional) Variable

In your GTM account, go to Triggers > New > Custom Events

Custom Event Trigger - Form Submission

Also, create a Data Layer variable called formID if you want to pass its value to Google Analytics. This variable is optional, you can skip it if you wish. Also, you don’t need this variable if your form refreshes the page and you used the solution described in the 1.1.1 chapter of this blog post.

Form ID - Data Layer Variable


#1.3. Google Analytics Event Tag

Finally, pass the data to Google Analytics, by creating an event tag with the following settings:

GA - Form Submission

Feel free to remove the {{dlv – formID}} variable if you wish. Assign formSubmission custom event trigger you have created in the previous chapter of this blog post.

That’s it! Don’t forget to test various scenarios:

  • Submit the form when all required fields contain some values. Expected result: the GA Event tag should fire.
  • Try leaving at least one required field empty and try to submit the form. Expected result: the GA Event tag should not be fired.

Also, don’t forget to check Google Analytics Real-time Event reports as all successful form submissions should be visible there.

#2. How To Track Gravity Forms with GTM [Long version]

Believe it or not, but you could have solved this puzzle by yourself, even if you don’t know how to code. In this blog post, I’ll explain various details of how a non-developer can write a little piece of code, use it in Google Tag Manager, and precisely track only successful Gravity form submissions.


#2.1. Important: Before we continue

If for some reason, this blog post fails to help you track Gravity forms with Google Tag Manager, there is a bunch of other form tracking techniques.

After tracking hundreds (if not thousands) of various forms, I have polished the most common solutions, so you should definitely check the form tracking guide.


#2.2. Gravity Forms Listener

The entire form tracking process looks like this:

  1. We implement an auto-event listener which tracks only successful form submissions and pushes those events to the Data Layer.
  2. Create Custom Event trigger (which recognizes the Data Layer Event) and a Data Layer Variable (this one’s optional).
  3. Create a Google Analytics Event tag, link it to the aforementioned Custom Event Trigger.

You have probably already tried a built-in Google Tag Manager Form Submission trigger and it failed you with Gravity Forms. Otherwise, you wouldn’t be here, right? Well, you’re not alone because that trigger almost never works.

So what’s the solution? We should get (or maybe create) a Gravity Forms Listener, a JavaScript function which listens only to successful form submissions and fires a Data Layer event. As a result, we could utilize that event as a trigger and fire a Google Analytics Event tag.

Shall we start?



In 2017, I’ve published a blog post How to write an auto-event listener which no coding skills which received a very positive feedback from the community. Today, I’ll demonstrate that technique in action with Gravity Forms.



Open Google and enter Gravity Forms Javascript API. It’s crucial that you look for JavaScript API, not regular API. Your search results should look like this:

Gravity Forms JavaScript API

The 2nd search result looks promising. Let’s click it. We should be one step closer to writing an auto-event listener.

Google Tag Manager Course - Learn More


Now, check whether the API is well documented and easy-to-understand even for those who do not know how to code. Since we want to track ONLY successful form submissions we should keep looking for some terms which contain “success”, “form submission”, “confirmation”, etc. You get the idea, right?

What we are looking for is some kind of API method which is related to successful submissions. Honestly, it took me a while to find a proper page in Gravity Form’s documentation (because they offer A LOT of stuff).

On the left side of the Gravity Forms API reference, you’ll find a navigation bar. Go to Hooks > Filters > Confirmations > gform_confirmation_loaded. This JavaScript hook (gform_confirmation_loaded) fires when the form’s “Success” page is loaded (which is exactly what we’re looking for!).

Gravity Forms Confirmation Loaded API Reference

Bingo! We’re one step closer to the success but there’s still something we need to verify.



Even if the API offers useful methods and the documentation is very well written, there’s still one requirement left. Is the API Reference really dummy-proof? Will a non-developer be able to use it with ease?

Honestly, it is not a very common practice to write super simple code examples in API references which could be useful for non-devs or beginners. Sometimes it’s even next to impossible.

For example, Wistia offers a very well-written Javascript API reference, but examples are not designed for entry-level developers, thus you and I won’t able to write our own custom auto-event listeners.

In Wistia’s case, we’re lucky to have Lunametrics because their developers posted this awesome Wistia listener for GTM. But there are still lots of situations where a ready-made tracking solution just simply does not exist.

OK, let’s go back to Gravity Forms. I have navigated to gform_confirmation_loaded JavaScript hook and found this example of code:

gform_confirmation_loaded javascript snippet

This is perfect! Let me explain what’s happening.

This code is ready to use. It states: if gform_confirmation_loaded occurs, initiate a function. Currently, that function is empty but we can easily embed the dataLayer.push event just by replacing the text //code to be trigger when confirmation page is loaded with the actual data layer code.


Copy that code from Gravity Forms API documentation and paste to some plain text or code editor (e.g. Notepad, Notepad++, Sublime, etc.)

Remove //code to be trigger when confirmation page is loaded

Prepare dataLayer.push event code (various GTM experts recommend to use window.dataLayer.push instead of plain dataLayer.push):

Why did I add formId? Well, that’s because the Gravity Form’s JavaScript webhook returns the ID of the form (see function(event, formId) ?). It’s optional, so feel free to remove it.

Now, merge the Gravity Form’s code snippet with window.dataLayer.push. This is what the final result should look like:

Great! We’re very close to finishing the Gravity Form auto-event listener!



In Google Tag Manager account, create a new Custom HTML tag. Paste the code you have created in the previous step.

Gravity Forms Listener

Done! Save the tag and assign the trigger you want, e.g. All Pages (or, preferably, just on those pages where the form is located).

Don’t forget to test the listener with GTM Preview and Debug mode. Load the page with any Gravity Form and complete a test submission. A Data Layer event called formSubmission should appear in the event stream. Click it and check what data was passed to the Data Layer. It should look like this.

Form Submission Data Layer Event


#2.3.5. STEP 5. SUCCESS

Victory dance! But don’t relax too soon. There’s still something left to do in order to track Gravity Forms with Google Tag Manager.

victory dance

#2.4. Create Trigger (and, optionally, a Variable)

Even though there is a formSubmission event in the Preview and Debug console, you cannot use it as a trigger. Why? Because GTM, by default, does not recognize what’s happening in the Data Layer.

So what’s the solution? Create a Custom Event trigger. Go to your Google Tag Manage account and click Triggers > New. Create a Custom Event trigger with the following conditions:

Custom Event Trigger - Form Submission

In the next step, we’ll create a Google Analytics Event tag. If you want to pass a form ID with it, create a Data Layer Variable. It’s useful if you have more than one Gravity form on a page or a website.

Form ID - Data Layer Variable


#2.5. Google Analytics Tag

Finally, let’s pass the data to Google Analytics by creating an event tag with the following settings:

Google Analytics Event Tag - Form Submission

As I have mentioned before, feel free to remove the {{dlv – formID}} variable if you wish. Assign formSubmission custom event trigger you have created in the previous chapter of this blog post.

That’s it! Don’t forget to test various scenarios with a GTM Preview and Debug mode:

  • Submit the form when all required fields contain some values.
  • Try leaving at least one required field empty and try to submit the form.

Also, don’t forget to check Google Analytics Real-time Event reports, all successful form submissions should be visible there.


Final Words: How To Track Gravity Forms with Google Tag Manager

I hope that this blog post was useful. Not only did you manage how to track Gravity forms, but also you have learned how to write auto-event listeners without coding skills.

In conclusion, here’s the entire tracking workflow:

  • First, you need to check how your form works after the successful submission. If it refreshes itself (but not the entire page), implement an auto-event listener with a Custom HTML tag. A listener is a function which listens to particular interactions on a page. In this case, it’s a successful Gravity Form submission. You can either use a ready-made listener (if possible), try to write your own (here’s a guide for non-developers), or ask a developer to help you. A listener must push the event of a successful form submission to the Data Layer.
    • If the form refreshes the entire page, you need to edit its confirmation message by adding a little code snippet with window.dataLayer.push. After the successful form submission, it creates an event which you’ll be able to catch with a custom trigger.
    • If the form redirects a visitor to a Thank you page, you’ll need to use this tracking method.
  • Create a Custom Event Trigger which would recognize the form submission Data Layer event, it’s a necessary ingredient for the Google Analytics Tag to fire. Optionally, you can create a Data Layer Variable which would help transfer Form ID to Google Analytics.
  • Finally, create a Google Analytics Event tag which is dispatched when a successful form submission occurs on a page.

If this guide did not help you, don’t feel bad because I have a bunch of alternative solutions how to track forms with Google Tag Manager. Give it a shot.

Julius Fedorovicius

Head of Developer Operations at Omnisend. I am highly interested in Google Tag Manager, Google Analytics, Adwords, Email marketing, Email Deliverability, Digital Marketing in general. You can follow me on Twitter or Linkedin.