A Complete Guide to Jot Form Tracking with Google Tag Manager and Google Analytics

JotForm is a really powerful tool for making forms with lots of cool features. But if you want to track JotForm submissions with Google Tag Manager and Google Analytics, it can be a bit confusing. There are many ways JotForm can be included in your website for example using an embedded iframe, direct HTML code, or just by linking to the form page with a button.

In the following tutorial, I explained how to track different types of JotForm submissions. As well as I have also shared the way to collect form input values.

JotForm GTM DataLayer Code

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

// For iFrame Form
window.addEventListener('message', function (event) {
  if(event.origin.includes('jotform.com') && event.data.action === 'submission-completed')  {
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      event: 'jot_form_submit',
      formId: event.data.formID
    });
  }
});

// For Srouce Code Form
(function() {
  document.addEventListener('submit', function(event) {
    var form = event.target.closest('form[action^="https://submit.jotform.com"]');
    if(form) {
      var formData = new FormData(form);
      var formInputs = {};
      formData.forEach(function(value, key) {
        formInputs[key] = value;
      });
      delete formInputs['jsExecutionTracker'];
      delete formInputs['validatedNewRequiredFieldIDs'];
      delete formInputs['simple_spc'];
      delete formInputs['submitSource'];

      dataLayer.push({
        event: 'jot_form_submit',
        formId: formInputs.formID,
        inputs: formInputs
      });
    }
  });
})();
</script>