Popup embed
Use a popup to show a hosted form in a modal over your page. You can open it from a button, when the page loads, after a delay, on exit intent, or at a scroll depth.
Open from a button
Add the popup attributes to a button and load the embed SDK:
<button
data-makeform-popup="https://makeform.ai/e/FORM_ID?__mf_modal_embed=1"
data-makeform-width="400"
data-makeform-position="bottom-right"
class="makeform-popup-trigger">
Open form
</button>
<script async src="https://www.makeform.ai/widgets/embed.js"></script>The popup defaults to a width of 400px and the bottom-right position. That position has no overlay by default, so the page remains scrollable. For a centered popup, set data-makeform-position="center"; centered popups always have a dark overlay.
You can also set these attributes on the trigger button:
| Attribute | Description |
|---|---|
data-makeform-width | Popup width in pixels, clamped to 360–800. |
data-makeform-position | center or bottom-right. |
data-makeform-overlay | Include the attribute to enable the overlay. Set it to "false" or "0" to disable it. |
data-makeform-bg | Initial modal color as a CSS color. |
data-makeform-auto-close | Seconds after submit before the popup closes, from 0 to 30. |
data-makeform-events | Dispatch window events for the popup. |
Open automatically
Use a config object to open the popup on page load, after a delay, on exit intent, or at a scroll depth. This example opens it after five seconds, once per browser:
<script>
window.MakeFormConfigs = window.MakeFormConfigs || [];
window.MakeFormConfigs.push({
formId: "FORM_ID",
popup: {
width: 400,
open: { trigger: "time", ms: 5000 },
showOnce: true
}
});
</script>
<script async src="https://www.makeform.ai/widgets/embed.js"></script>For page load, omit open. For exit intent, use open: { trigger: "exit" }. For scroll depth, use open: { trigger: "scroll", scrollPercent: 50 }; the percentage defaults to 50. Time delays range from 500 milliseconds to 120 seconds. Exit intent works with a desktop mouse and has no mobile equivalent. Scroll triggers do not fire on pages that cannot scroll.
You can also set position, overlay, bgColor, doNotShowAfterSubmit, autoClose, hiddenFields, and dispatchEvents on the popup entry. autoClose is in milliseconds, from 0 to 30,000. showOnce and doNotShowAfterSubmit are remembered in the browser. Automatic triggers do not replace a popup the visitor opened manually.
Open with JavaScript
After the SDK loads, call MakeForm.openPopup with the form ID and options:
<script async src="https://www.makeform.ai/widgets/embed.js"></script>
<script>
window.addEventListener("load", () => {
window.MakeForm.openPopup("FORM_ID", {
position: "center",
overlay: true,
hiddenFields: { utm_source: "pricing" }
});
});
</script>openPopup also accepts width, initialBgColor, autoCloseMs, dispatchEvents, and callbacks. The popup can show an /e/ embed or, with type: "form", an /f/ form page.
The popup follows the form’s height, up to 85vh, and is fullscreen at viewport widths of 640px or less. Escape, the close button, and clicking the overlay close it. Only one modal can be open at a time.