Tracking iframe form submissions

I'm currently working on tracking Jotform submissions for a project, and I've found the following script, which successfully listens for submission events from an embedded form via iFrame:

// 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

  });

 }

});

This works as expected in terms of detecting the submission and pushing a custom event to the dataLayer. However, the only piece of data I receive is the formID.

I would also like to retrieve the values of the submitted form fields, so I can use them in further analytics or tagging.

Is it possible to include the form field data in the event.data object or access it in another way from within this script?

Thanks in advance for your help!

Best regards,

Mike Vereijken

Hi Mike,

the event.data object only includes limited information such as the formID. It does not include the submitted form field values directly due to cross-origin security restrictions.

To work around this, here are some options you can consider:

• You can use Jotform's built-in integrations or webhooks to capture full submission data on your server or analytics platform.
• For advanced tracking, you might embed the form using the full source code instead of the iframe. This allows you to use Google Tag Manager or custom scripts to capture form field values on submission.