Documentation

React & Next.js

Embed a Formfacade form in a React or Next.js app with the @formfacade/embed-react component — with props for prefill, submit, and load callbacks.

Quick Answer

How do I embed a Formfacade form in React or Next.js?

Install @formfacade/embed-react, import the FormfacadeEmbed component, and pass your form's embed URL as formFacadeURL. Optional props handle prefill (prefillForm), submit (onSubmitForm), and load (onFormLoad). In Next.js App Router, render it in a Client Component.

For React and Next.js apps, Formfacade ships a dedicated component so the form renders as a first-class part of your app — no raw <script> tag needed.

Watch the walkthrough

Embed a Formfacade form in a React app

Install

npm i @formfacade/embed-react

Get your form's embed URL

In the Formfacade interface, open Share → Embed and choose Embed in my React.js web app. Copy the formFacadeURL it gives you — it looks like:

https://formfacade.com/include/<your-id>/form/<your-form-id>/classic.js?div=ff-compose

Basic usage

import React from "react";
import FormfacadeEmbed from "@formfacade/embed-react";

const FORMFACADE_URL =
  "https://formfacade.com/include/<your-id>/form/<your-form-id>/classic.js?div=ff-compose";

export default function ContactForm() {
  return <FormfacadeEmbed formFacadeURL={FORMFACADE_URL} />;
}

Props

PropTypeRequiredWhat it does
formFacadeURLstringYesYour form's embed URL (from Share → Embed)
onSubmitFormfunctionNoCalled when the form is submitted
onFormLoadfunctionNoCalled when the form finishes loading
prefillFormfunctionNoReturns a map of entry.<id> → value to prefill
flushbooleanNoDisables autosave when true

Full example (prefill + callbacks)

import React from "react";
import FormfacadeEmbed from "@formfacade/embed-react";

const FORMFACADE_URL =
  "https://formfacade.com/include/<your-id>/form/<your-form-id>/classic.js?div=ff-compose";

export default function App() {
  const prefillForm = () => ({
    "entry.1297600622": "@formfacade/embed-react",
    "entry.813617742": `${new Date()}`,
  });

  const onSubmitForm = () => console.log("----FORM SUBMITTED----");
  const onFormLoad = () => console.log("----FORM LOADED----");

  return (
    <FormfacadeEmbed
      formFacadeURL={FORMFACADE_URL}
      prefillForm={prefillForm}
      onSubmitForm={onSubmitForm}
      onFormLoad={onFormLoad}
      flush={true}
    />
  );
}

Next.js App Router

FormfacadeEmbed renders on the client, so in the Next.js App Router put it in a Client Component — add "use client"; at the top of the file that uses it (or of a small wrapper component you import into your server page).

Finding entry IDs for prefill

The entry.<id> keys in prefillForm are your Google Form's field IDs — the same ones Google Forms uses in its own pre-filled links.

Next steps