Sharing & Publishing
Embedding & popups
Put your form inside any webpage as an inline embed or a popup overlay. You configure it in the Share panel and paste one snippet into your site.
Both snippets are built from the share link you have selected, so they carry that link’s expiration, response limit, custom domain, and analytics. Create the link first — see share links. Query parameter defaults set on the link are the one exception: they are not added to embed or popup snippets.
Inline embed
An inline embed places your form directly inside a page using an iframe. Open the Share panel, click the Embed card, and copy the generated snippet into your site’s HTML.
Layout
| Setting | What it does |
|---|---|
| Height (px) | iframe height in pixels. Default is 600. |
| Auto-resize height | Adjusts the iframe height to fit the form content, so respondents never see a scrollbar inside the embed. Off by default. Turning it on adds a small script to the snippet. |
| Lazy load | Defers loading until the iframe is visible, by adding loading="lazy". Off by default. Speeds up the initial page load when the form sits further down the page. |
Display
| Setting | What it does |
|---|---|
| Hide cover image | Removes the form cover image inside the embed. Useful when your host page already has its own header. |
| Hide logo | Removes the form logo inside the embed. |
| Color scheme | Let user specify (the default, follows the visitor's system preference), Dark mode, or Light mode. See Color scheme below. |
Click View code to see the generated HTML. Use Copy embed code to copy it, then paste it into your site. Reset to defaults restores every setting.
What the snippet contains
With auto-resize off, the snippet is a single iframe pointing at your share link with ?embed=1 appended. The display options
add their own parameters: hideCover=1, hideLogo=1, and theme=dark or theme=light.
<iframe src="https://form.formbase.so/Abc12XYz?embed=1" width="100%" height="600" style="border: none;"></iframe>With auto-resize on, the iframe is wrapped in a div and followed by a script. The embedded form posts a
formbase:resize message on every height change; the script checks the message origin and the sending frame, then sets the
iframe height. Nothing else on your page is touched, and no external script is loaded.
Popup
A popup shows your form as an overlay on top of your page. Open the Share panel, click the Popup card, set up your options, and paste the generated code snippet into your site.
Trigger
Choose how the popup opens:
| Trigger | How it works |
|---|---|
| When a function is called | The default. The snippet defines a global function named after your share link code or custom slug — for example window.openFormbasePopup_Abc12XYz. Call it from a button, a link, or any event handler on your site. |
| Automatically on page load | The popup opens once the page finishes loading. Two extra settings appear: Delay (seconds) and Show once per session, which records a flag in the visitor's sessionStorage so the popup does not re-open on every page. |
Layout
| Setting | What it does |
|---|---|
| Position | Where the popup appears: Center, Bottom Right (the default), Bottom Left, Top Right, or Top Left. Center makes the popup 80% of the viewport height; the four corner positions make it 600 px tall. |
| Width (px) | Popup width in pixels, capped at 90% of the viewport width. Default is 500. |
Display
| Setting | What it does |
|---|---|
| Hide cover image | Removes the form cover image inside the popup. |
| Hide logo | Removes the form logo inside the popup. |
| Color scheme | Same three options as the embed. See Color scheme below. |
Popup styling
| Setting | What it does |
|---|---|
| Overlay opacity (%) | Darkness of the backdrop behind the popup, 0 to 100. Default is 50. |
| Border radius (px) | Corner roundness of the popup. Default is 12. |
Behavior
| Setting | What it does |
|---|---|
| Close on Escape key | On by default. Pressing Escape dismisses the popup. |
| Close on overlay click | On by default. Clicking the backdrop outside the popup closes it. |
| Auto-close after submission | Off by default. The popup closes three seconds after the respondent submits. The delay is fixed. |
Click View code to see the generated snippet. Use Copy popup code to copy it, then paste it into your site. Reset to defaults restores every setting.
What the snippet contains
The popup snippet is one self-contained <script> block. It builds the overlay, the close button, and the iframe in plain
JavaScript when the popup opens — nothing is added to your page before that, no stylesheet is injected, and no external script is loaded.
The comment under the script tells you the function name to call:
<!-- Call window.openFormbasePopup_Abc12XYz() to open the form popup -->A hyphen in a custom slug becomes an underscore in the function name, because a hyphen isn’t valid in a JavaScript identifier. Copy the name from the comment rather than deriving it yourself.
Color scheme
Embeds and popups share the same three options, and both override the form’s own theme inside the frame:
Let user specify — the default. The form follows the visitor’s operating system or browser dark/light preference.
Dark mode — forces dark mode regardless of the visitor’s preference.
Light mode — forces light mode regardless of the visitor’s preference.
Match your site's theme
If your website is always dark, set the embed or popup to Dark mode so the form blends in. If your site respects the visitor’s preference, choose Let user specify. To theme the form itself, see appearance & theming.