Embed Flowvi Forms in React

Create a FlowviForm component

Create a reusable React component that wraps the Flowvi iframe:

interface FlowviFormProps {
  formId: string;
  height?: number;
  className?: string;
}

export function FlowviForm({ formId, height = 600, className }: FlowviFormProps) {
  return (
    <iframe
      src={`https://flowvi.dev/submit/${formId}`}
      width="100%"
      height={height}
      frameBorder="0"
      className={className}
      style={{ border: 'none', borderRadius: 12 }}
      allowFullScreen
    />
  );
}

Use the component in your pages

Import and use the FlowviForm component anywhere in your React app:

import { FlowviForm } from './FlowviForm';

function ContactPage() {
  return (
    <div className="max-w-2xl mx-auto">
      <h1>Contact Us</h1>
      <FlowviForm formId="your-form-id" height={700} />
    </div>
  );
}

Listen for submission events (optional)

Use postMessage to detect when a form is submitted:

useEffect(() => {
  const handler = (event: MessageEvent) => {
    if (event.data?.type === 'flowvi:submitted') {
      console.log('Form submitted!', event.data);
    }
  };
  window.addEventListener('message', handler);
  return () => window.removeEventListener('message', handler);
}, []);

Test your integration

Run your React app, navigate to the page with the form, submit it, and verify the data appears in Flowvi.