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>

Leave a Comment

Your email address will not be published. Required fields are marked *

Contact Us

Please contact us for expert guidance & personalized solutions to maximizing the potential of Google Analytics for your business.

Send Us A Message