{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-embeds/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"type":"markdown"},"seo":{"title":"Script embed","description":"Build integrations, automate workflows, and manage forms and responses programmatically with the forms.app API.","siteUrl":"https://developers.forms.app","image":"/assets/formsapp-developer-docs.6ffba4f5ff7d394698661bcdb0ed2a8452f27acaf4e82754e5d0f4109563471c.9c1bb791.png","lang":"en-US","projectTitle":"forms.app Developer Docs","llmstxt":{"sections":[{"title":"llmtxt for forms app documents","includeFiles":["**/*"],"excludeFiles":[]}]},"jsonLd":{"@context":"https://schema.org","@type":"Organization","additionalType":"https://en.wikipedia.org/wiki/Software_as_a_service","url":"https://forms.app","name":"forms.app","logo":"https://cdn.forms.app/icons/all/brands/formsapp-logo-dark.svg","description":"forms.app is a free online form builder designed for teams. forms.app offers a modern, easy-to-use form builder and allows unlimited responses and team members.","foundingDate":"2018","sameAs":"https://linkedin.com/company/formsapp","contactPoint":{"@type":"ContactPoint","contactType":"Customer service","email":"support@forms.app","url":"https://forms.app/en/contact-us"}}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"script-embed","__idx":0},"children":["Script embed"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The script embed is a small loader plus a JavaScript call, and it's what powers everything the plain ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/iframe-embed"},"children":["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."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"how-it-works","__idx":1},"children":["How it works"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A script embed has up to two parts, depending on the layout:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["A placeholder element the script hydrates into the live form, either a hidden ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<iframe data-formsapp-src=\"...\">"]}," (standard and full-page layouts) or a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<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."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["A ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<script>"]}," tag that loads ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["embed.js"]}," from forms.app's CDN and, once loaded, calls ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["new formsapp(...)"]}," to render the form."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"the-formsapp-constructor","__idx":2},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["formsapp()"]}," constructor"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"new formsapp(formId, layout, options, domain);\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["formId"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Your form's ID, for example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'69d4bd130b443bda40c8f65a'"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["layout"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["One of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'standard'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'fullscreen'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'popover'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'sidetab'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'popup'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'slider'"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["options"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Layout-specific settings such as width, height, button styling, and animations. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/embed-options"},"children":["Embed options"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["domain"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Your account's data-region base URL, for example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'https://eu.forms.app'"]},". Must match the domain shown on your form's Share page."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"standard-inline-layout","__idx":3},"children":["Standard (inline) layout"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The default layout: the form renders inline, in place of the placeholder iframe."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<iframe data-formsapp-src=\"https://eu.forms.app/form/69d4bd130b443bda40c8f65a\" title=\"Cake Order Form - Made with forms.app\"></iframe>\n<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>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Update the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["title"]}," attribute to describe your own form; it's used as a fallback accessible name."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"auto-resizing-height","__idx":4},"children":["Auto-resizing height"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'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:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<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>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"other-layouts","__idx":5},"children":["Other layouts"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Layout value"},"children":["Layout value"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Also known as"},"children":["Also known as"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Best for"},"children":["Best for"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'fullscreen'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/embed-options/fullscreen"},"children":["Full page"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A dedicated page or route for the form."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'popover'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/embed-options/chatbot"},"children":["Chatbot"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A chat-bubble widget in the corner of the screen."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'sidetab'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/embed-options/sidetab"},"children":["Side tab"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A small tab on the screen edge that expands into the form."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'popup'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/embed-options/popup"},"children":["Pop-up"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A modal, opened by click, page load, or after a delay."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'slider'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/embed-options/slider"},"children":["Slider"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A panel that slides in from the screen edge."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"loading-the-script-once-per-page","__idx":6},"children":["Loading the script once per page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you're embedding more than one widget on the same page (for example a pop-up and a side tab), include the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<script src=\"https://cdn.formsapp.io/embed.js\">"]}," tag only once. Call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["new formsapp(...)"]}," once per widget after it loads."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Using a JavaScript framework?"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onload"]}," inline attribute shown above works in plain HTML, but isn't idiomatic in React, Next.js, or Vue. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/examples"},"children":["Examples"]}," for the framework-appropriate way to load the script and call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["formsapp()"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"whats-next","__idx":7},"children":["What's next"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/embed-options"},"children":["Embed options"]}," for the full settings reference of every layout."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/passing-form-data"},"children":["Passing data to your form"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/examples"},"children":["Examples"]}," for React, Next.js, Vue, and Kotlin."]}]}]},"headings":[{"value":"Script embed","id":"script-embed","depth":1},{"value":"How it works","id":"how-it-works","depth":2},{"value":"The formsapp() constructor","id":"the-formsapp-constructor","depth":2},{"value":"Standard (inline) layout","id":"standard-inline-layout","depth":2},{"value":"Auto-resizing height","id":"auto-resizing-height","depth":3},{"value":"Other layouts","id":"other-layouts","depth":2},{"value":"Loading the script once per page","id":"loading-the-script-once-per-page","depth":2},{"value":"What's next","id":"whats-next","depth":2}],"frontmatter":{"seo":{"title":"Script embed"}},"lastModified":"2026-08-18T10:09:54.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/embeds/script-embed","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}