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.
iframe
JavaScript snippet
React component
An iframe is the simplest option and works on any website, CMS, or landing page builder (WordPress, Webflow, Framer, Squarespace, etc.).
1
Copy your form ID
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.
2
Paste the iframe snippet
Add the following snippet wherever you want the form to appear in your HTML:
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).
3
Enable auto-resize (optional)
To have the iframe expand to fit the form’s full height automatically, add the resize script immediately after the iframe:
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).
1
Add the loader script
Paste this script tag once in the <head> of your page, or just before </body>:
Opens the form in a centered modal overlay. You control when it triggers — attach it to a button, a timer, or exit intent:
<!-- Trigger: button click --><button id="open-form">Get in touch</button><script> window.addEventListener('FormFlowsReady', function () { // Button click document.getElementById('open-form').addEventListener('click', function () { FormFlows.embed('FORM_ID', { mode: 'popup' }); }); // Timer (opens after 5 seconds) setTimeout(function () { FormFlows.embed('FORM_ID', { mode: 'popup' }); }, 5000); // Exit intent (fires when cursor leaves the browser window) FormFlows.embed('FORM_ID', { mode: 'popup', trigger: 'exit-intent', }); });</script>
Slides a panel in from the right side of the screen — useful for feedback widgets and support forms:
<button id="open-slider">Leave feedback</button><script> window.addEventListener('FormFlowsReady', function () { document.getElementById('open-slider').addEventListener('click', function () { FormFlows.embed('FORM_ID', { mode: 'slider', position: 'right', // 'right' or 'left' }); }); });</script>
3
Handle submission events (optional)
Listen for the formflows:submit event to run custom code after a successful submission — for example, to fire analytics events or redirect the user:
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.
1
Install the package
npm install @formflows/react
2
Render the component
Import FormFlowsEmbed and pass your form ID. The component renders an auto-resizing, accessible iframe by default:
import { FormFlowsEmbed } from '@formflows/react';export default function ContactPage() { return ( <main> <h1>Contact us</h1> <FormFlowsEmbed formId="FORM_ID" /> </main> );}
3
Use display mode props
Pass mode to switch between inline, popup, and slider. Additional props control the trigger and appearance:
import { FormFlowsEmbed } from '@formflows/react';// Popup triggered by a custom buttonexport function FeedbackButton() { return ( <FormFlowsEmbed formId="FORM_ID" mode="popup" trigger="button" buttonLabel="Send feedback" buttonClassName="btn btn-primary" /> );}// Inline with pre-filled fieldsexport function PrefilledForm({ userEmail }: { userEmail: string }) { return ( <FormFlowsEmbed formId="FORM_ID" mode="inline" prefill={{ email: userEmail }} /> );}
4
Handle submission callbacks
Use the onSubmit prop to respond to successful submissions inside your React component tree:
import { FormFlowsEmbed } from '@formflows/react';export function SignupForm() { function handleSubmit(submissionId: string) { // redirect, show a toast, update state, etc. console.log('Submitted:', submissionId); } return ( <FormFlowsEmbed formId="FORM_ID" onSubmit={handleSubmit} /> );}
For Next.js App Router, add 'use client' at the top of any file that imports FormFlowsEmbed, since the component uses browser APIs.
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.
