{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-embeds/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"type":"markdown"},"seo":{"title":"Embedding forms in Next.js","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":"embedding-forms-in-nextjs","__idx":0},"children":["Embedding forms in Next.js"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Examples use the App Router."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Client Components only"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The script embed reads and writes to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["window"]}," and the DOM, so any component that calls ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["formsapp()"]}," needs the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'use client'"]}," directive. The plain iframe embed has no such requirement and can render from a Server Component."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"iframe-embed","__idx":1},"children":["Iframe embed"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"export function CakeOrderForm() {\n  return (\n    <iframe\n      title=\"Cake Order Form\"\n      src=\"https://eu.forms.app/form/69d4bd130b443bda40c8f65a\"\n      allowTransparency\n      allowFullScreen\n      allow=\"geolocation; microphone; camera\"\n      style={{ width: '100vw', minWidth: '100%', height: 600, border: 'none' }}\n    />\n  );\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"script-embed-with-nextscript","__idx":2},"children":["Script embed with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["next/script"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://nextjs.org/docs/app/api-reference/components/script"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["next/script"]}]}," instead of manually injecting a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<script>"]}," tag; it handles load scheduling and de-duplication for you."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"'use client';\n\nimport Script from 'next/script';\n\ndeclare global {\n  interface Window {\n    formsapp: new (\n      formId: string,\n      layout: string,\n      options: Record<string, unknown>,\n      domain: string,\n    ) => void;\n  }\n}\n\nexport function CakeOrderPopup() {\n  return (\n    <>\n      <button formsappid=\"69d4bd130b443bda40c8f65a\" />\n      <Script\n        src=\"https://cdn.formsapp.io/embed.js\"\n        strategy=\"lazyOnload\"\n        onLoad={() => {\n          new window.formsapp(\n            '69d4bd130b443bda40c8f65a',\n            'popup',\n            {\n              overlay: 'rgba(45,45,45,0.5)',\n              button: { color: '#ff9e24', text: 'Click here!' },\n              width: '800px',\n              height: '600px',\n              openingAnimation: { entrance: 'animate__fadeIn', exit: 'animate__fadeOut' },\n            },\n            'https://eu.forms.app',\n          );\n        }}\n      />\n    </>\n  );\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"reading-url-parameters","__idx":3},"children":["Reading URL parameters"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://nextjs.org/docs/app/api-reference/functions/use-search-params"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useSearchParams"]}]}," from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["next/navigation"]},", together with the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["answers"]}," option from ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/passing-form-data"},"children":["Passing data to your form"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"'use client';\n\nimport Script from 'next/script';\nimport { useSearchParams } from 'next/navigation';\n\nexport function ReferralForm() {\n  const searchParams = useSearchParams();\n  const ref = searchParams.get('ref') ?? '';\n\n  return (\n    <>\n      <div data-formsapp-src=\"https://eu.forms.app/form/69d4bd130b443bda40c8f65a\" />\n      <Script\n        src=\"https://cdn.formsapp.io/embed.js\"\n        strategy=\"lazyOnload\"\n        onLoad={() => {\n          new window.formsapp(\n            '69d4bd130b443bda40c8f65a',\n            'standard',\n            { width: '100vw', height: 'formHeight', answers: { '63ebad419442ad0448b9e9b6': ref } },\n            'https://eu.forms.app',\n          );\n        }}\n      />\n    </>\n  );\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Wrap in Suspense"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useSearchParams"]}," opts a route into client-side rendering for the part of the tree that calls it. Wrap the component in a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<Suspense>"]}," boundary, per the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://nextjs.org/docs/app/api-reference/functions/use-search-params#behavior"},"children":["Next.js guidance"]},", to avoid deopting the whole page."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"whats-next","__idx":4},"children":["What's next"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/examples/react"},"children":["React"]}," for the Pages Router / plain React equivalent."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/embed-options"},"children":["Embed options"]}," for every layout's settings."]}]}]},"headings":[{"value":"Embedding forms in Next.js","id":"embedding-forms-in-nextjs","depth":1},{"value":"Iframe embed","id":"iframe-embed","depth":2},{"value":"Script embed with next/script","id":"script-embed-with-nextscript","depth":2},{"value":"Reading URL parameters","id":"reading-url-parameters","depth":2},{"value":"What's next","id":"whats-next","depth":2}],"frontmatter":{"seo":{"title":"Embedding forms in Next.js"}},"lastModified":"2026-08-18T10:33:31.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/embeds/examples/nextjs","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}