Capturing Forms in iframes with Navattic JS

Due to browser security restrictions, Navattic JS﻿ can’t automatically capture form submissions from iframes. For those cases, as a workaround, it is possible to add code to the form that will send the submission to the parent page so that Navattic JS can identify the visitor and associate them with the demos elsewhere on your site.
For Pardot and other form providers that allow you to include a script tag within the form, below is an example of a script that can be added to your form that will pass the form submission to Navattic JS.
Note: you may need to update the KEYS_TO_SEND and the element ID values of your script with values that are specific to your form configuration.
HTML
<script>
function sendFormToNavattic(event) {
  event.preventDefault();

  const form = event.target;
  const formData = new FormData(form);
  const KEYS_TO_SEND = ["name", "email", "phone"]; // This can be customized

  const data = {};

  for (const [key, value] of formData.entries()) {
    if (KEYS_TO_SEND.includes(key)) {
      data[key] = value;
    }
  }

  if (Object.keys(fields).length > 0) {
    window.parent.postMessage({
      kind: "navattic:iframe-form-submission",
      fields,
    });
  }
}
const formElement = document.getElementById("iframe-form"); // use the actual form selector
formElement?.addEventListener("submit", sendFormToNavattic);
</script>
<script>
function sendFormToNavattic(event) {
  event.preventDefault();

  const form = event.target;
  const formData = new FormData(form);
  const KEYS_TO_SEND = ["name", "email", "phone"]; // This can be customized

  const data = {};

  for (const [key, value] of formData.entries()) {
    if (KEYS_TO_SEND.includes(key)) {
      data[key] = value;
    }
  }

  if (Object.keys(fields).length > 0) {
    window.parent.postMessage({
      kind: "navattic:iframe-form-submission",
      fields,
    });
  }
}
const formElement = document.getElementById("iframe-form"); // use the actual form selector
formElement?.addEventListener("submit", sendFormToNavattic);
</script>
﻿
﻿
Did this page help you?
Google Tag Manager
Tracking Scripts