Jet FormBuilder Form Tracking with GTM & GA4

Jet FormBuilder in WordPress is a super handy tool for making forms. If you want to keep track of who fills out your forms using Google Analytics, you’ll need some special tracking codes. In this easy-to-follow guide, I’ll show you exactly how to set it all up step by step. Plus, these tracking codes don’t just log form submissions, they also keep tabs on important stuff like email addresses and phone numbers. That means you can better track how your forms are helping you get more. conversions.

Jet Form Tracking Code

<script>
  /**
  * Author: Md Hasanuzzamna
  * Linkedin: https://linkedin.com/in/md-h
  * Youtube: https://youtube.com/@leomeasure
  * Email: info@leomeasure.com
  */

  (function() {
    var origXMLHttpRequest = XMLHttpRequest;
    XMLHttpRequest = function() {
      var requestURL;
      var requestMethod;
      var requestBody;
      var xhr = new origXMLHttpRequest();
      var origOpen = xhr.open;
      var origSend = xhr.send;
      xhr.open = function(method, url) {
        requestURL = url;
        requestMethod = method;
        return origOpen.apply(this, arguments);
      };
      xhr.send = function(data) {
        if (requestURL.includes('?jet_form_builder_submit=submit&method=ajax')) {
          xhr.addEventListener('load', function() {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                if (response.status === 'success' && (data instanceof FormData)) {
                  requestBody = {};
                  data.forEach(function(value, key) {
                    if (!key.includes('captcha')) {
                      requestBody[key] = value;
                    }
                  });
                  window.dataLayer = window.dataLayer || [];
                  dataLayer.push({
                    event: 'jet_form_submit',
                    form_id: requestBody['_jet_engine_booking_form_id'],
                    inputs: requestBody
                  });
                }
              }
            }
          });
        }
        return origSend.apply(this, arguments);
      };
      return xhr;
    };
  })();
  document.addEventListener('submit', function(event) {
    var form = event.target.closest('form.jet-form-builder.submit-type-reload');
    var requiedError = false;
    var formData = new FormData(form);
    var inputValues = {};
    formData.forEach(function(value, key) {
      if (key) {
        var inputField = form.querySelector('[name="' + key + '"]');
        if (inputField) {
          var isRequiredField = inputField.getAttribute('required');
          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;
            }
          }
        }
      }
      inputValues[key] = value;
    });
    var requiredCheckboxesRadio = form.querySelectorAll('input[type="radio"][required="required"],input[type="checkbox"][required="required"]');
    var filelsName = [];
    requiredCheckboxesRadio.forEach(function(input) {
      var name = input.getAttribute('name');
      if (!filelsName.includes(name)) {
        filelsName.push(name);
      }
    });
    filelsName.forEach(function(name) {
      if (!form.querySelector('input:checked[name="' + name + '"]')) {
        requiedError = true;
      }
    })
    if (!requiedError) {
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        event: 'jet_form_submit',
        form_id: inputValues['_jet_engine_booking_form_id'],
        inputs: inputValues
      });
    }
  })
</script>

Create a new Tag first

For Triggering, make it all pages

Now, copy the page link of the form and preview it from your Google Tag Manager

Fill out the form and submit it

Go to GTM data layer preview

Now, we will create custom tag for Google Analytics 4

Go to tag manager again and create a trigger first. Here we will track the event.

We want to collect the source of visitors from the form as it has the field. so, we will do it also.

Copy the form ID key name from the Google Tag Manager

create a new variable

step 1: create new variable

step 2: name it as your wish.

Step 3: select the variable type as data layer variable

step 4: copy the form ID key from the preview section of GTM and paste it here

step 5: save it now

create another variable to collect the lead source

Now, we have two variable and one trigger. Now create a complete tag to sending information to google analytics

Preview it again

Fillup the form and submit it again

For further inspection, check it from the debug view of Google Analytics

Now, publish it