Paste two lines of HTML into any page and your form appears inline, sized to fit its content.
1. The snippet#
In the Maxforms app, click Share on any form, switch to the Embed tab, and copy the Standard snippet. It looks like this:
<script>
(function(w,d,u){w.Maxforms=w.Maxforms||function(){(w.Maxforms.q=w.Maxforms.q||[]).push(arguments)};if(d.querySelector('script[src="'+u+'"]'))return;var s=d.createElement('script');s.async=1;s.src=u;d.head.appendChild(s)})(window,document,'https://embed.maxforms.com/v1/embed.js');
</script>
<div data-maxforms-form="YOUR_FORM_CODE" data-maxforms-dynamic-height="1"></div>
The <script> block bootstraps our SDK. The <div> is where the iframe mounts. Paste once per page; you can include any number of <div data-maxforms-form> nodes after it.
2. Options#
Add data attributes to the <div> to tweak appearance:
| Attribute | Value | Effect |
|---|---|---|
data-maxforms-dynamic-height |
1 |
Iframe auto-resizes to content (default on; set to 0 to disable). |
data-maxforms-show-title |
0 |
Show the form's title. It is hidden by default — set this to 1 to reveal it. |
data-maxforms-align-left |
0 |
Left-align (default is centered). |
data-maxforms-transparent-background |
0 |
Transparent iframe background. |
data-maxforms-width |
100% |
Iframe width. Always applied. |
data-maxforms-height |
500 |
Iframe height in px. Only applied when dynamic height is off. |
data-maxforms-min-height |
— | Minimum iframe height in px while the form loads. |
data-maxforms-skeleton |
1 |
Show a loading skeleton (set to 0 to disable). |
data-maxforms-track |
1 |
Emit lifecycle events (set to 0 to disable). |
data-maxforms-title |
Form |
title attribute on the iframe, read by screen readers. |
3. Pre-filling hidden fields#
Declare a hidden field in your form, then fill it one of two ways.
From the parent page's URL — attribution parameters only. For safety, only an allowlist of analytics parameters is forwarded from the embedder's URL: utm_*, ref, source, gclid, fbclid, and msclkid. Anything else on the host page's URL (session tokens, reset codes, OAuth state) stays there and is never sent to the form.
https://yoursite.com/landing?ref=launch&utm_campaign=spring
Explicitly, via data-maxforms-field-* — this is the channel for any other value, including field names outside the allowlist:
<div data-maxforms-form="ABC123" data-maxforms-field-ref="launch" data-maxforms-field-plan="pro"></div>
Undeclared parameters are ignored. A pair whose key exceeds 64 characters or whose value exceeds 512 characters is dropped entirely, not truncated.
4. Multiple embeds on one page#
Paste as many <div data-maxforms-form> elements as you want. Each gets a unique embedId (mf_1, mf_2, …) that's included in every event payload — useful when you want to route analytics by embed.