Embed Flowvi Forms in Next.js

Create a FlowviForm client component

In the App Router, create a client component for the iframe:

'use client';

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

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

Use in a Server Component or Page

Import the client component into your server component or page:

import { FlowviForm } from '@/components/FlowviForm';

export default function ContactPage() {
  return (
    <main className="max-w-2xl mx-auto py-12">
      <h1 className="text-3xl font-bold mb-8">Contact Us</h1>
      <FlowviForm formId="your-form-id" />
    </main>
  );
}

Or use dynamic import for Pages Router

For the Pages Router, use dynamic import to avoid SSR issues:

import dynamic from 'next/dynamic';

const FlowviForm = dynamic(
  () => import('@/components/FlowviForm').then(m => m.FlowviForm),
  { ssr: false }
);

Style the container

Wrap the form in a styled container for consistent layout:

<div className="w-full max-w-2xl mx-auto rounded-2xl overflow-hidden shadow-lg">
  <FlowviForm formId="your-form-id" height={700} />
</div>

Test your integration

Run your Next.js dev server, visit the page, submit the form, and verify the submission in Flowvi.