Trigger a form in a centered modal or a panel pinned to the bottom-right corner. Click a button, follow a hash link, or call the JavaScript API.
1. Trigger types#
Button click#
<button data-maxforms-popup="YOUR_FORM_CODE">Open form</button>
Hash link#
<a href="#maxforms-open=YOUR_FORM_CODE" data-maxforms-popup="YOUR_FORM_CODE">Open form</a>
The hash is read once, when the page loads. There is no hashchange listener, so a link that only changes the hash on the current page won't open anything on its own — keep data-maxforms-popup on the anchor (as above) so the click trigger fires too. Use the bare hash form for links arriving from another page.
JavaScript API#
Maxforms('openPopup', { formId: 'YOUR_FORM_CODE', position: 'center' });
See JavaScript API for full options.
2. Positions#
Two positions via data-maxforms-position:
center(default) — centered modal over a backdropbottom-right— panel pinned to the bottom-right corner of the viewport
3. Options#
| Attribute | Default | Effect |
|---|---|---|
data-maxforms-position |
center |
center or bottom-right. |
data-maxforms-width |
560 |
Popup width in px. |
data-maxforms-overlay |
1 |
Show backdrop (set to 0 to disable). |
data-maxforms-hide-on-submit |
0 |
Hide the form after successful submission. |
data-maxforms-hide-delay |
— | Milliseconds to wait before hiding. Only applies when data-maxforms-hide-on-submit="1". |
data-maxforms-show-title |
0 |
Show the form's title (hidden by default). |
data-maxforms-align-left |
0 |
Left-align the form. |
data-maxforms-transparent-background |
0 |
Transparent form background. |
data-maxforms-track |
1 |
Emit lifecycle events (set to 0 to disable). |
data-maxforms-field-* |
— | Pre-fill a declared hidden field, e.g. data-maxforms-field-ref="launch". |
Opening without a click#
Put these on any element carrying data-maxforms-popup:
| Attribute | Effect |
|---|---|
data-maxforms-open="auto" |
Open automatically after data-maxforms-delay ms (default 5000). |
data-maxforms-open="exit-intent" |
Open the first time the pointer leaves the document. |
4. Accessibility#
Popups ship with role="dialog", aria-modal="true", focus trap (Tab cycles inside the popup), ESC-to-close, and backdrop-click-to-close. Focus returns to the trigger element when the popup closes.