Embed Your Form

Want your form right on your website instead of sending people to a separate page? Embed it. FormGrid lets you embed any published form in three different modes, each with a live preview before you copy the code.

Choosing an embed mode

Open your form, publish it, and go to the Share tab. Under Embed in website you’ll find three modes to choose from:

  • Standard: an inline frame placed directly in the flow of your page. Best for landing pages, contact pages, and any spot where the form should sit alongside your other content.
  • Popup: a modal dialog that opens on top of your page. Triggered by a button click, page load, scroll position, or exit intent. See Popup Embeds for the full set of trigger options.
  • Full-page: an iframe that fills the entire viewport. Useful when you want to host the form on your own domain without competing chrome around it.

Click any of the three cards to open the embed dialog. The left side has the configuration options, the right side shows a live preview that updates as you change settings.

Opening the embed dialog

  1. Publish your form so it has a live URL
  2. Go to the Share tab in the editor
  3. Under Embed in website, click Standard, Popup, or Full-page
  4. Adjust the options on the left, watching the preview on the right
  5. Click Copy code and paste the snippet into your website’s HTML

You can come back to the dialog any time to tweak options and copy a fresh snippet.

General options

The General section holds the embed mode along with toggles that control which parts of the form are visible inside the embed. By default, the embedded form looks just like the standalone version.

  • Hide page background: removes the page-level background and card so the form blends into your site’s own background.
  • Hide background: only available for Standard and Full-page modes once Hide page background is on. Removes the form’s own background as well, leaving just the form fields.
  • Hide title: hides the form title at the top of the form.
  • Hide cover image: hides the cover image. This option only appears if your form has a cover image set.

Size

The Size section controls the dimensions of the embed.

  • Width is a number plus a unit (px or %). Standard embeds default to 100% so they fill the container they’re dropped into. Popup embeds default to 500px.
  • Height has two modes:
    • Auto is the default. The embed resizes itself to match the form’s content, so there’s no empty space below the last field and no inner scrollbar. This is what you want for almost every embed.
    • Fixed lets you set a specific height. Use this when you want the form to occupy a known amount of space regardless of its content.

Full-page embeds always fill the viewport, so there are no size controls in that mode.

Forward URL parameters

The Forward URL parameters toggle in the Behavior section passes the parent page’s query parameters into the embedded form. With this on, a visitor landing on yoursite.com/contact?utm_source=email has utm_source=email available inside the embedded form, where it can fill a hidden field.

Without this option, only query parameters on the iframe’s src URL reach the form. Forwarding is useful when you want the same embed snippet to work across many pages and pick up whatever parameters happen to be on the parent URL.

Open redirects within the embed

The Open redirects within the embed toggle in the Behavior section controls where an Open website block sends visitors. With it off (the default), the redirect navigates the entire parent page, so the visitor lands on the redirect target as a regular page. With it on, the redirect navigates only the iframe, so the redirect target loads inside the embedded area while the rest of your page stays in place.

Most embeds want the default. Top-level redirects always work, including cases where the redirect target sets X-Frame-Options or frame-ancestors headers that would otherwise refuse to load inside an iframe. Turn the toggle on only when you specifically want the redirect to stay within the embed, for example a wizard where the redirect target is just the next step rather than a destination outside your site.

This setting only matters if your form has an Open website block. Full-page embeds always use top-level redirects since the iframe is the whole page, so the toggle isn’t shown there.

About the embed script

The generated snippet includes a small <script> tag alongside the iframe or trigger element whenever the embed needs to talk to the parent page. That covers Auto height, Forward URL parameters, top-level redirects (the default), and any Popup mode. The script powers the runtime that handles content-based resizing, parameter forwarding, popup mounting, and the redirect handoff to the parent page.

A few things worth knowing:

  • The script tag is safe to include once per page even if you have multiple embeds. It will set up every embed on the page.
  • The script is small and loads asynchronously, so it doesn’t block your page from rendering.
  • A Standard embed with a fixed height, no parameter forwarding, and Open redirects within the embed turned on works without the script. The snippet won’t include it in that case.

Tips

  • The form keeps your theme, fields, and submission handling. Embedding doesn’t change behavior, only presentation
  • Make sure your website’s styling doesn’t conflict with the embedded form’s theme
  • Test the embedded form on different screen sizes, especially if you’ve set a fixed width in pixels
  • For popups, see the dedicated Popup Embeds article for trigger options and modal behavior

Related articles