> ## Documentation Index > Fetch the complete documentation index at: https://docs.formflows.ai/llms.txt > Use this file to discover all available pages before exploring further. # Embed a form > Add a FormFlows.ai form to any website or app using an iframe, JavaScript snippet, or React component. You can embed any published form directly into your website or application without sending visitors to a separate page. FormFlows.ai supports three embedding methods — choose the one that fits your tech stack. An iframe is the simplest option and works on any website, CMS, or landing page builder (WordPress, Webflow, Framer, Squarespace, etc.). Open your form in the dashboard. The form ID appears in the URL: `app.formflows.ai/forms/FORM_ID`. You can also click **Share → Embed** to go directly to the embed panel. Add the following snippet wherever you want the form to appear in your HTML: ```html theme={null} ``` Replace `FORM_ID` with your actual form ID. Set `height` to match your form length, or use `style="min-height: 600px;"` and let the snippet auto-resize (see tip below). To have the iframe expand to fit the form's full height automatically, add the resize script immediately after the iframe: ```html theme={null} ``` This script listens for height change events from the embedded form and adjusts the iframe accordingly. For better performance, add `loading="lazy"` to the iframe tag. This defers loading until the iframe scrolls into view, which reduces initial page load time. The JavaScript embed gives you more control over how and when the form appears. It supports three display modes: **inline** (replaces a container element), **popup** (modal overlay), and **slider** (panel slides in from the side). Paste this script tag once in the `` of your page, or just before ``: ```html theme={null} ``` Call `FormFlows.embed()` after the script loads. Choose the mode that fits your UX. Renders the form inside an existing element on your page. Add a container `

` where you want the form, then call `embed()` with that element's ID: ```html theme={null}

``` Opens the form in a centered modal overlay. You control when it triggers — attach it to a button, a timer, or exit intent: ```html theme={null} ``` Slides a panel in from the right side of the screen — useful for feedback widgets and support forms: ```html theme={null} ``` Listen for the `formflows:submit` event to run custom code after a successful submission — for example, to fire analytics events or redirect the user: ```javascript theme={null} window.addEventListener('formflows:submit', function (event) { console.log('Submission received:', event.detail.submissionId); // your custom logic here }); ``` All `FormFlows.embed()` calls accept a `prefill` object to pre-populate fields from page context — for example, `prefill: { email: currentUser.email }`. This saves your visitors from retyping information you already have. If your site runs on React or Next.js, use the official `@formflows/react` package for a fully typed, framework-native integration. ```bash theme={null} npm install @formflows/react ``` Import `FormFlowsEmbed` and pass your form ID. The component renders an auto-resizing, accessible iframe by default: ```tsx theme={null} import { FormFlowsEmbed } from '@formflows/react'; export default function ContactPage() { return (

Contact us

); } ``` Pass `mode` to switch between inline, popup, and slider. Additional props control the trigger and appearance: ```tsx theme={null} import { FormFlowsEmbed } from '@formflows/react'; // Popup triggered by a custom button export function FeedbackButton() { return ( ); } // Inline with pre-filled fields export function PrefilledForm({ userEmail }: { userEmail: string }) { return ( ); } ``` Use the `onSubmit` prop to respond to successful submissions inside your React component tree: ```tsx theme={null} import { FormFlowsEmbed } from '@formflows/react'; export function SignupForm() { function handleSubmit(submissionId: string) { // redirect, show a toast, update state, etc. console.log('Submitted:', submissionId); } return ( ); } ``` For Next.js App Router, add `'use client'` at the top of any file that imports `FormFlowsEmbed`, since the component uses browser APIs. ## Allowed domains By default, FormFlows.ai allows embeds from any domain. To restrict your form to specific origins — which prevents others from embedding it on their own sites — add your domains to the allowlist. Go to **Form settings → Embed → Allowed domains** and add each domain where the form will be embedded (for example, `https://yourcompany.com`). Requests from unlisted origins will be blocked with a CORS error. Leave the list empty to allow all origins. ## Full-page embed To display a form as a full-page experience — filling the entire browser viewport — apply these styles to both the iframe and its parent: ```html theme={null}

``` ## What's next Share your form via a direct URL, QR code, or email — no embedding required. Restrict who can view or submit your form.