Embed Forms

Add a Formidable form to any website with two lines of HTML.

Setup

1. Publish your form.
2. Open the form detail page, click the ... menu, and select Copy embed code.
3. Paste the snippet into your website's HTML.

The copied snippet looks like this:

<script src="https://app.formidable.software/embed.js" async></script>
<iframe
  src="https://app.formidable.software/f/my-form?embed=true"
  width="100%"
  height="600"
  frameborder="0"
  style="border:none;"
></iframe>

The embed.js script handles auto-resizing. It listens for height updates from the form and adjusts the iframe to fit the content. Include it once per page, even if you embed multiple forms.

Parameters

Append these to the iframe src URL as query parameters.

Parameter	Default	Description
embed=true	Required	Enables embed mode (transparent background, compact padding, container-responsive layout)
hideTitle=true	false	Hides the form title and description. Useful when your page already has its own heading.

Example with hidden title:

https://app.formidable.software/f/my-form?embed=true&hideTitle=true

info

The "Powered by Formidable" footer follows your subscription plan, same as the standalone form page.

Events

The embedded form sends events to the parent page via postMessage. All event types are prefixed with formidable:.

Event reference

Event	Key fields	When
formidable:ready	height, formId	Form loaded and interactive
formidable:resize	height	Content height changed (validation errors, page navigation, conditional fields)
formidable:submit	submissionId, computedOutputs	Form submitted successfully
formidable:navigate	url	Form requests a redirect

info

embed.js already handles formidable:ready and formidable:resize for auto-sizing. You only need a custom listener for formidable:submit or formidable:navigate.

Listening for submissions

window.addEventListener("message", function (event) {
  if (event.data?.type === "formidable:submit") {
    console.log("Submitted:", event.data.submissionId);

    // Access computed outputs (e.g. calculator results)
    if (event.data.computedOutputs) {
      // Each output has { value, label, format }
      Object.entries(event.data.computedOutputs).forEach(([key, output]) => {
        console.log(`${output.label}: ${output.value}`);
      });
    }

    // Example: redirect after submission
    window.location.href = "/thank-you";
  }
});

Tracking with analytics

window.addEventListener("message", function (event) {
  if (event.data?.type === "formidable:submit") {
    gtag("event", "form_submission", {
      form_id: event.data.submissionId,
    });
  }
});

Without auto-resize

If you prefer not to use embed.js, set a fixed height:

<iframe
  src="https://app.formidable.software/f/my-form?embed=true"
  width="100%"
  height="800"
  frameborder="0"
  style="border:none;"
></iframe>