{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-embeds/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition","cards","card"]},"type":"markdown"},"seo":{"title":"Embeds","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":"embeds","__idx":0},"children":["Embeds"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add a forms.app form to any website or app: a plain ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<iframe>"]},", or a small JavaScript snippet that unlocks pop-ups, side tabs, a chatbot-style widget, a full-page layout, and prefilled fields."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This section covers both embed methods, every layout forms.app supports, how to pass data into a form from your page's URL, and framework examples for React, Next.js, Vue, and Kotlin."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"get-your-embed-code","__idx":1},"children":["Get your embed code"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Every code sample in this section is built around a real form ID and domain, both of which are specific to your account:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Open the form in forms.app and go to the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Share"]}," page."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Choose ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Embed"]},", then pick ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Iframe"]}," or ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Script"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Configure the layout and settings, then click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Get the code"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Copy the generated code as-is. Always copy from the Share page rather than hand-editing the domain or form ID, since these reflect your account's data region."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Two IDs, one form"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The long string in the embed code (for example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["69d4bd130b443bda40c8f65a"]},") is your form's ID. It appears in both the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["src"]}," URL and, for script embeds, as the first argument passed to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["formsapp()"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"two-ways-to-embed","__idx":2},"children":["Two ways to embed"]},{"$$mdtype":"Tag","name":"Cards","attributes":{"columns":2,"cardMinWidth":240},"children":[{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Iframe embed","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/embeds/iframe-embed"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A single ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<iframe>"]}," tag. No JavaScript required. The simplest way to place a form inline on a page."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Script embed","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/embeds/script-embed"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A loader script plus a small snippet. Required for every layout besides a basic inline form, plus auto-resizing height and prefilled data."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"embed-options","__idx":3},"children":["Embed options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Beyond a plain inline form, the script embed supports five additional layouts:"]},{"$$mdtype":"Tag","name":"Cards","attributes":{"columns":3,"cardMinWidth":240},"children":[{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Full page","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/embeds/embed-options/fullscreen"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The form fills the entire browser viewport."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Chatbot","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/embeds/embed-options/chatbot"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A chat-bubble button that opens the form in a compact window."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Side tab","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/embeds/embed-options/sidetab"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A small tab on the edge of the screen that expands into the form."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Pop-up","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/embeds/embed-options/popup"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A modal dialog, opened by a click, on page load, or after a delay."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Slider","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/embeds/embed-options/slider"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A panel that slides in from the edge of the screen."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"pass-data-into-the-form","__idx":4},"children":["Pass data into the form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Prefill fields or pass along context, like a referral code or UTM parameter, from your page into the embedded form. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/passing-form-data"},"children":["Passing data to your form"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":5},"children":["Examples"]},{"$$mdtype":"Tag","name":"Cards","attributes":{"columns":4,"cardMinWidth":240},"children":[{"$$mdtype":"Tag","name":"Card","attributes":{"title":"React","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/embeds/examples/react"},"children":[]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Next.js","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/embeds/examples/nextjs"},"children":[]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Vue","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/embeds/examples/vue"},"children":[]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Kotlin","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/embeds/examples/kotlin"},"children":[]}]}]},"headings":[{"value":"Embeds","id":"embeds","depth":1},{"value":"Get your embed code","id":"get-your-embed-code","depth":2},{"value":"Two ways to embed","id":"two-ways-to-embed","depth":2},{"value":"Embed options","id":"embed-options","depth":2},{"value":"Pass data into the form","id":"pass-data-into-the-form","depth":2},{"value":"Examples","id":"examples","depth":2}],"frontmatter":{"seo":{"title":"Embeds"}},"lastModified":"2026-08-18T10:09:54.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/embeds","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}