Gravity Forms GTM Event Listener

Gravity Forms

Overview

Gravity Forms is a premium WordPress form plugin used for complex multi-step forms, conditional logic, and payment integrations. This listener uses jQuery's gform_confirmation_loaded event, which Gravity Forms fires when the confirmation message renders after a successful submission, to push a clean conversion event into the GTM dataLayer.

Event fired: formSubmissionSuccess Trigger type: Custom Event Credit: Julius Fedorovicius (Analytics Mania)

Why Use This Listener

Gravity Forms shows a confirmation message after submission. The gform_confirmation_loaded event fires at exactly this moment, making it the most reliable conversion signal available. GTM's built-in Form Submit trigger fires on button click (before validation), which leads to inflated conversion counts.

Common Use Cases

• Track confirmed lead submissions on contact and quote request forms
• Measure form completion rates by form ID
• Fire Google Ads GCLID-based conversions on form confirmation
• Build GA4 funnel steps: page view → form view → form start → form submit
• Create remarketing audiences of form submitters in Google Ads and Meta
• A/B test different form layouts and compare conversion rates

How It Works

Gravity Forms uses jQuery's event system. When the confirmation is displayed, it triggers gform_confirmation_loaded with the formId passed as an event argument. The listener binds to this event and pushes the formSubmissionSuccess event to the dataLayer.

flowchart TD
    A[User Submits Form] --> B{GF Validation}
    B -->|Fail| C[Show Inline Errors]
    B -->|Pass| D[Process Submission]
    D --> E[Show Confirmation Message]
    E --> F[gform_confirmation_loaded fires]
    F --> G[dataLayer.push formSubmissionSuccess]
    G --> H[GTM Trigger Fires]
    H --> I[GA4 / Ads / Meta Tags Fire]

GTM Setup Guide

Step 1: Create the Custom HTML Tag

1. GTM → Tags → New → Custom HTML
2. Name: cHTML – Gravity Forms Listener
3. Paste the code below
4. Trigger: All Pages or DOM Ready

Step 2: Create the Custom Event Trigger

1. Triggers → New → Custom Event
2. Event name: formSubmissionSuccess
3. Fires on: All Custom Events (or add condition for specific form)

Step 3: Create DataLayer Variable

Step 4: Connect Your Tags

Add the formSubmissionSuccess trigger to your GA4 Event, Google Ads Conversion, or Meta Pixel tag.

Installation

<!-- GTM Custom HTML Tag: Gravity Forms Listener -->
<!-- Trigger: All Pages -->
<script>
jQuery(document).ready(function() {
  jQuery(document).bind('gform_confirmation_loaded', function(event, formID) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'formSubmissionSuccess',
      'formID': formID
    });
  });
});
</script>

Requirement: jQuery must be loaded before this tag fires. Gravity Forms includes jQuery by default, but if you're deferring scripts, use Window Loaded as the firing trigger instead of DOM Ready.

Example Implementation

Multi-Form Tracking (Different Events per Form)

jQuery(document).ready(function() {
  jQuery(document).bind('gform_confirmation_loaded', function(event, formID) {
    window.dataLayer = window.dataLayer || [];
    
    var eventName = 'formSubmissionSuccess';
    var formType = 'general';
    
    // Map form IDs to descriptive names
    var formMap = {
      1: { name: 'contact', type: 'lead' },
      2: { name: 'demo_request', type: 'high_intent' },
      3: { name: 'newsletter', type: 'awareness' }
    };
    
    var formInfo = formMap[formID] || { name: 'unknown', type: 'general' };
    
    window.dataLayer.push({
      'event': eventName,
      'formID': formID,
      'formName': formInfo.name,
      'formType': formInfo.type
    });
  });
});

Data Layer Output

{
  "event": "formSubmissionSuccess",
  "formID": 1
}

With extended version:

{
  "event": "formSubmissionSuccess",
  "formID": 2,
  "formName": "demo_request",
  "formType": "high_intent"
}

Trigger Configuration

All Gravity Forms

Specific Form Only

Variables to Capture

GA4 Mapping Recommendations

Debugging

GTM Preview Mode

1. Enable Preview mode in GTM
2. Submit a Gravity Form on your site
3. Check for formSubmissionSuccess in the Events panel
4. Confirm formID is correct

Common Issues

Best Practices

1. Map form IDs in a Lookup Table, In GTM, create a Lookup Table variable that converts numeric IDs to human-readable names (e.g., 1 → "Contact Form")
2. Use per-form conversion actions, In Google Ads, create separate conversion actions for high-intent vs. low-intent forms
3. Don't track newsletter signups the same as demo requests, Create separate GA4 events: newsletter_signup and demo_request
4. Combine with Gravity Forms entry notifications, For PII compliance, avoid pushing full field data to the dataLayer

Performance Considerations

• Adds one jQuery event listener to the document on DOM Ready
• Negligible performance impact
• Only fires after confirmation renders, so no false positives

Related Listeners

• Contact Form 7
• Ninja Form
• Formidable Form
• Forminator Form
• WSForm

FAQ

Q: Does this work with multi-page (multi-step) Gravity Forms? A: Yes, gform_confirmation_loaded only fires after the final page is submitted successfully.

Q: Does it work with Gravity Forms payment integrations? A: The event fires when the confirmation is shown. For payment forms, test whether the confirmation appears after payment processing.

Q: Can I capture field values like email? A: The standard listener doesn't capture field values. You can access them via jQuery('#gform_1 input[name="input_3"]').val(), but be careful with GDPR/consent obligations.

Q: What if I have 20+ forms? A: Use one listener and a GTM Lookup Table to map all form IDs to names. Create one GA4 event with form_id as a parameter rather than 20 separate events.