A Comprehensive Guide to Gravity Form Tracking with Google Tag Manager

Gravity Forms is one of the most powerful and popular form plugins for WordPress. However, finding good resources online to perfectly track Gravity Form submissions with form input data using Google Tag Manager can be challenging. To address this, I’ve crafted a comprehensive GTM dataLayer code specifically designed to track Gravity Form submissions via Google Tag Manager. What makes this code great is its ability to capture all form input values. Additionally, the code has undergone extensive testing, ensuring that GTM won’t fire unless all valid information is provided in the form before submission.

In the following tutorial, I’ve provided a step-by-step guide to tracking Gravity Forms using this helpful code.

Gravity Form DataLayer Code

(function() {
    var form = document.querySelector('form[id^="gform_"]');
    var submitButton = form.querySelector('form[id^="gform_"] input[type="submit"]');

    if(form && submitButton) {
        submitButton.addEventListener('pointerdown', function() {
            
                var formId = form.getAttribute('data-formid');
                var isAjaxForm = form.getAttribute('target') === ('gform_ajax_frame_' + formId);
                var formData = new FormData(form);
                var gformData = {formId: formId};

                var errorRequired = false;

                formData.forEach(function (value, key) {
                    if(key) {
                        var inputField = form.querySelector('[name="'+key+'"]');

                        if(inputField && inputField.offsetParent) {
                            var isRequiredField = inputField.getAttribute('aria-required') === 'true';

                            if(isRequiredField) {

                                if(inputField.tagName === 'SELECT') {
                                    var selectedOptionVal = inputField.options[inputField.selectedIndex].text;
                                    if(!selectedOptionVal) {
                                        errorRequired = true;
                                    }
                                }else if((inputField.getAttribute('type') === 'email') && (!value || !value.includes('@'))) {
                                     errorRequired = true;
                                }
                                else if(!value) {
                                    errorRequired = true;
                                }
                            }
                        }

                        var formattedKey = key.replace('.', '_');
                        gformData[formattedKey] = value;
                    }
                });

                var requiredCheckboxesRadio = form.querySelectorAll('.gfield--type-checkbox.gfield_contains_required, .gfield--type-radio.gfield_contains_required');
                requiredCheckboxesRadio.forEach(function(fieldSet) {
                    if(fieldSet.querySelector('input[type="radio"]') || fieldSet.querySelector('input[type="checkbox"]')) {
                        if(!fieldSet.querySelector('input:checked')) {
                            errorRequired = true;
                        }
                    }
                });

                if(!errorRequired) {
                    window.dataLayer = window.dataLayer || [];
                    delete gformData['formId'];
                    delete gformData['state_1'];
                    delete gformData['version_hash'];
                    dataLayer.push({event: 'gravity_form_submit', formId: formId, inputs: gformData});
                }
        });
    }
})();

Create a tag first

Submit your Gravity form

Send formation to Google Analytics

Create a variable for form id

another variable for industry

Another variable for source of customer

Now, create a trigger

Create a new tag

Preview it

Fill the form and submit again

For further inspection go to google analytics debug view

Everything is fine. So, submit it now.