Standard embed

Use a standard embed to show a Makeform form inline on your page. The SDK can resize the iframe to fit the form’s height.

Copy this snippet and replace FORM_ID and Form title:

<iframe data-makeform-src="https://makeform.ai/e/FORM_ID?mk-rm-bg=true&mk-align-left=1&__mf_standard_embed=1" loading="lazy" style="width:100%;height:auto;" data-makeform-auto-resize frameborder="0" marginheight="0" marginwidth="0" title="Form title"></iframe> <script async src="https://www.makeform.ai/widgets/embed.js"></script>

The SDK copies data-makeform-src to the iframe’s src. Keep data-makeform-auto-resize on the iframe to resize it to the form’s height. The iframe starts at 200px tall; the SDK sets its height to match the form, with a minimum of 200px.

The SDK also sets the iframe’s border to none, its width to 100% unless you set a width, and its referrer policy to strict-origin-when-cross-origin.

Adjust the size

Set a fixed width in pixels or as a percentage. Supported widths are 200–2000px or 1–100%. The default is 100%.

For a fixed height, set a pixel value from 200–2000px. Otherwise, the height is automatic.

Embed options

The URL in the snippet makes the background transparent and aligns the content left. Both are on by default, except left alignment is off for forms in compact or typeform mode.

To dispatch SDK window events for this iframe, add data-makeform-events:

<iframe data-makeform-src="https://makeform.ai/e/FORM_ID?mk-rm-bg=true&mk-align-left=1&__mf_standard_embed=1" loading="lazy" style="width:100%;height:auto;" data-makeform-auto-resize data-makeform-events frameborder="0" marginheight="0" marginwidth="0" title="Form title"></iframe> <script async src="https://www.makeform.ai/widgets/embed.js"></script>

Inline embeds dispatch the MakeForm:ready and MakeForm:submit window events when events are enabled.

Without the SDK

A plain iframe works if you do not need automatic resizing or SDK events:

<iframe src="https://makeform.ai/e/FORM_ID?mk-rm-bg=true&mk-align-left=1&__mf_standard_embed=1" loading="lazy" style="width:100%;height:600px;" frameborder="0" marginheight="0" marginwidth="0" referrerpolicy="strict-origin-when-cross-origin" title="Form title"></iframe>