The script embed is a small loader plus a JavaScript call, and it's what powers everything the plain iframe embed can't do: pop-ups, side tabs, the chatbot layout, the full-page layout, the slider, auto-resizing height, and prefilled/passed-in data.
A script embed has up to two parts, depending on the layout:
- A placeholder element the script hydrates into the live form, either a hidden
<iframe data-formsapp-src="...">(standard and full-page layouts) or a<button formsappId="...">that acts as the trigger (pop-up and slider layouts). Chatbot and side-tab layouts create their own trigger and need no placeholder at all. - A
<script>tag that loadsembed.jsfrom forms.app's CDN and, once loaded, callsnew formsapp(...)to render the form.
new formsapp(formId, layout, options, domain);| Parameter | Type | Description |
|---|---|---|
formId | string | Your form's ID, for example '69d4bd130b443bda40c8f65a'. |
layout | string | One of 'standard', 'fullscreen', 'popover', 'sidetab', 'popup', 'slider'. |
options | object | Layout-specific settings such as width, height, button styling, and animations. See Embed options. |
domain | string | Your account's data-region base URL, for example 'https://eu.forms.app'. Must match the domain shown on your form's Share page. |
The default layout: the form renders inline, in place of the placeholder iframe.
<iframe data-formsapp-src="https://eu.forms.app/form/69d4bd130b443bda40c8f65a" title="Cake Order Form - Made with forms.app"></iframe>
<script src="https://cdn.formsapp.io/embed.js" type="text/javascript" async defer onload="new formsapp('69d4bd130b443bda40c8f65a', 'standard', {'width':'100vw','height':'600px'}, 'https://eu.forms.app');"></script>Update the title attribute to describe your own form; it's used as a fallback accessible name.
Pass 'height':'formHeight' instead of a fixed pixel value so the embed resizes itself as the form's content changes, for example across multi-step forms or conditional logic:
<script src="https://cdn.formsapp.io/embed.js" type="text/javascript" async defer onload="new formsapp('69d4bd130b443bda40c8f65a', 'standard', {'width':'100vw','height':'formHeight'}, 'https://eu.forms.app');"></script>| Layout value | Also known as | Best for |
|---|---|---|
'fullscreen' | Full page | A dedicated page or route for the form. |
'popover' | Chatbot | A chat-bubble widget in the corner of the screen. |
'sidetab' | Side tab | A small tab on the screen edge that expands into the form. |
'popup' | Pop-up | A modal, opened by click, page load, or after a delay. |
'slider' | Slider | A panel that slides in from the screen edge. |
If you're embedding more than one widget on the same page (for example a pop-up and a side tab), include the <script src="https://cdn.formsapp.io/embed.js"> tag only once. Call new formsapp(...) once per widget after it loads.
The onload inline attribute shown above works in plain HTML, but isn't idiomatic in React, Next.js, or Vue. See Examples for the framework-appropriate way to load the script and call formsapp().
- Embed options for the full settings reference of every layout.
- Passing data to your form.
- Examples for React, Next.js, Vue, and Kotlin.