React.js / Next.js Integration

Embed your form into any modern React or Next.js application effortlessly.

Using Iframe

The fastest way to get your form working in a React component is to use the standard <iframe> tag. It works flawlessly out of the box in both standard React and Next.js.

export default function ContactSection() {
  return (
    <div className="form-container">
      <h2>Contact Us</h2>
      <iframe 
        src="https://yourformapp.com/embed/YOUR_FORM_ID" 
        width="100%" 
        height="600px" 
        style={{ border: 'none' }}
      />
    </div>
  );
}

Next.js Specific Tip

If you are using the Next.js App Router (versions 13, 14, or 15), you don't need to make this a Client Component. The iframe runs independently, so it's perfectly safe to render it directly inside your Server Components!

Using Vibe Code & Generated Form API URL

If you are writing vibe code to build your form UI from scratch using custom React or Next.js components, you can either put your API URL directly in the JSX <form action="..." method="POST"> tag or handle it with React state:

Option A: Direct JSX <form action="..." method="POST"> Tag

Pass your generated Form API URL into the React JSX action prop directly:

export default function SimpleReactForm() { return ( /* DIRECT FORM API URL IN JSX ACTION ATTRIBUTE */ <form action="https://yourformapp.com/api/v1/submit/YOUR_FORM_ID" method="POST" className="space-y-4"> <input name="name" placeholder="Full Name" required className="p-2 border rounded" /> <input name="email" type="email" placeholder="Email" required className="p-2 border rounded" /> <button type="submit" className="bg-red-500 text-white px-4 py-2 rounded">Submit Form</button> </form> ) }

Option B: Dynamic React Handler with Fetch & Redirects

'use client'
import { useState } from 'react'

export default function CustomVibeForm() {
  const [loading, setLoading] = useState(false)
  const [submitted, setSubmitted] = useState(false)

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setLoading(true)
    const formData = new FormData(e.currentTarget)
    const payload = Object.fromEntries(formData.entries())

    // Submit directly to your system-generated Form API URL
    const res = await fetch("https://yourformapp.com/api/v1/submit/YOUR_FORM_ID", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ answers: payload })
    })

    const data = await res.json()
    setLoading(false)

    // Evaluate dynamic vibe conditions or redirects
    if (data.redirectUrl) {
      window.location.href = data.redirectUrl
    } else {
      setSubmitted(true)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
      <input name="name" placeholder="Full Name" required className="w-full p-3 border rounded-lg" />
      <input name="email" type="email" placeholder="Email Address" required className="w-full p-3 border rounded-lg" />
      <button type="submit" disabled={loading} className="bg-red-500 text-white px-6 py-3 rounded-lg font-semibold">
        {loading ? 'Submitting...' : 'Submit via Form API'}
      </button>
      {submitted && <p className="text-green-600 font-medium">✓ Form submitted successfully!</p>}
    </form>
  )
}