Embed events

Hosted forms can notify the page that embeds them when they load, become ready, change height, or submit. Use the SDK for window events, or listen for iframe messages directly.

Listen with the SDK

Add data-makeform-events to an embed to dispatch window events. For popup and slider embeds, set dispatchEvents: true in the config or API options. The SDK accepts messages only from the iframe it created and from trusted Makeform origins. For modals, it also trusts the origin of a configured embedUrl.

Event	`event.detail`
`MakeForm:open`	`{ formId }`
`MakeForm:ready`	`{ formId }`
`MakeForm:submit`	`{ formId, data }`, where `data` is the answers object keyed by field name
`MakeForm:close`	`{ formId }`

Inline iframes dispatch only MakeForm:ready and MakeForm:submit.

<iframe
  data-makeform-src="https://makeform.ai/e/FORM_ID"
  data-makeform-events
  title="Contact form"></iframe>
<script async src="https://www.makeform.ai/widgets/embed.js"></script>
<script>
  window.addEventListener("MakeForm:ready", (event) => {
    console.log("Form ready:", event.detail.formId);
  });

  window.addEventListener("MakeForm:submit", (event) => {
    console.log("Form submitted:", event.detail.formId, event.detail.data);
  });
</script>

For a popup or slider, the JavaScript API also accepts callbacks. onOpen, onReady, and onClose each receive { formId }; onSubmit receives { formId, data }. Errors thrown inside callbacks are caught and do not break the SDK.

window.MakeForm.openPopup("FORM_ID", {
  dispatchEvents: true,
  onSubmit: ({ formId, data }) => console.log(formId, data),
});

For a fullpage embed, event tracking uses data-makeform-src, data-makeform-events, __mf_emitEvents=1 in the form URL, and the SDK script.

Listen without the SDK

Messages from an embedded form arrive on the parent page’s message event as JSON strings. An /e/ page sends load, height, layout-ready, and background-color messages. MakeForm.LayoutReady fires once after fonts are ready. MakeForm.SetHeight fires when the form’s height changes.

An /f/ page sends messages only when its URL includes one of these flags:

URL flag	Messages enabled
`__mf_emitLayout=1`	Height messages only
`__mf_emitEvents=1`	All events
`__mf_emitSubmitSignal=1`	The data-free `MakeForm.Submitted` signal after a successful submit

The SDK adds the appropriate flags automatically for type: "form" popups: __mf_emitLayout=1 always, __mf_emitEvents=1 when callbacks or dispatchEvents are set, and __mf_emitSubmitSignal=1 when only auto-close is set.

Add __mf_emitEvents=1 to an /f/ URL to receive its event messages.

<iframe
  id="contact-form"
  src="https://makeform.ai/e/FORM_ID"
  title="Contact form"></iframe>
<script>
  window.addEventListener("message", (event) => {
    if (event.origin !== "https://makeform.ai" &&
        event.origin !== "https://www.makeform.ai") return;
    if (typeof event.data !== "string") return;

    let message;
    try {
      message = JSON.parse(event.data);
    } catch {
      return;
    }

    if (message.type === "MakeForm.Loaded") {
      console.log("Form loaded");
    } else if (message.type === "MakeForm.SetHeight") {
      document.getElementById("contact-form").style.height =
        message.payload.height + "px";
    } else if (message.type === "MakeForm.LayoutReady") {
      console.log("Form layout ready:", message.payload.height);
    } else if (message.type === "MakeForm.SetBackgroundColor") {
      console.log("Form background:", message.payload.backgroundColor);
    }
  });
</script>

The message payloads are {} for MakeForm.Loaded, { height } in pixels for MakeForm.SetHeight and MakeForm.LayoutReady, { backgroundColor } for MakeForm.SetBackgroundColor, and {} for MakeForm.Submitted. A password-protected form sends its load message after unlock. A closed form does not send it.

There are no field-change, page-change, or partial-save events sent to the parent page.