Paste two lines of HTML into any page and your form appears inline, sized to fit its content.
1. The snippet#
Copy the snippet from the form's Share tab under Embed Form (steps in Embed your form in your website). 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 |
None | 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. In both, the key is the field's code, the identifier the builder assigns; the edit-field modal does not show it, but the Share tab's Embed Form section lists the codes of your hidden fields as examples if you need to look one up.
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.