Add a form to an existing React app

Install the form0 packages:

Code
npm install form0-react form0-core

Download the schema from Build a case intake form. If you built that form, copy your own schema.json to this path instead.

Code
mkdir -p src/forms
curl -o src/forms/case-intake.form0.json https://docs.form0.dev/guides/assets/case-intake-form/case-intake.form0.json

Create src/CaseIntakeForm.jsx:

Code
import { FormRenderer } from "form0-react"
import "form0-react/index.css"
import schema from "./forms/case-intake.form0.json"

export function CaseIntakeForm() {
  return (
    <FormRenderer
      engineOptions={{ events: { recordKind: "new" } }}
      formWidth="100%"
      schema={schema}
      onSubmit={(record) => console.log(record)}
    />
  )
}

recordKind tells form0 whether this form creates a new record or opens a saved one, and FormRenderer requires it. formWidth sets the maximum width of the form, which is 30vw by default.

Show the form on a page. In a new Vite application, replace the contents of src/App.jsx:

Code
import { CaseIntakeForm } from "./CaseIntakeForm"

export default function App() {
  return <CaseIntakeForm />
}

In your own application, render <CaseIntakeForm /> on the page where the form belongs.

Start the application and open the URL it prints, usually http://localhost:5173:

Code
npm run dev

Fill in the required fields and click Submit. The browser console shows the structured record.

Replace src/CaseIntakeForm.jsx with this version, which sends each record to /api/cases:

Code
import { useState } from "react"
import { FormRenderer } from "form0-react"
import "form0-react/index.css"
import schema from "./forms/case-intake.form0.json"

export function CaseIntakeForm() {
  const [formKey, setFormKey] = useState(0)
  const [sending, setSending] = useState(false)
  const [message, setMessage] = useState(null)

  async function sendCase(record) {
    setSending(true)
    setMessage(null)

    try {
      const response = await fetch("/api/cases", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(record),
      })

      if (!response.ok) throw new Error(`The server answered ${response.status}`)

      setMessage("Case saved.")
      setFormKey((key) => key + 1)
    } catch (error) {
      setMessage("The case was not saved. Try again.")
      throw error
    } finally {
      setSending(false)
    }
  }

  return (
    <main>
      {message && <p role="status">{message}</p>}
      <FormRenderer
        key={formKey}
        engineOptions={{ events: { recordKind: "new" } }}
        formWidth="100%"
        schema={schema}
        submitBlockedReason={sending ? "Sending the case" : undefined}
        onSubmit={sendCase}
      />
    </main>
  )
}

Three details matter here:

• fetch does not reject on a 500 response, so the code checks response.ok and throws.
• The catch block shows a message and then rethrows the error. Without the throw, FormRenderer treats the save as successful.
• Changing key replaces the form with a new, empty one after a successful save.

Create server/cases-api.mjs. This example uses only Node.js and form0-core:

Code
import { readFileSync } from "node:fs"
import { createServer } from "node:http"
import {
  buildFormRecordSnapshot,
  createRecordEvaluator,
  createStructuredRecord,
  flattenFields,
} from "form0-core"

const schema = JSON.parse(readFileSync("src/forms/case-intake.form0.json", "utf8"))
const fields = flattenFields(schema.form.elements)

async function checkRecord(record) {
  const { raw_values, repeatable } = buildFormRecordSnapshot(schema, record)
  const result = await createRecordEvaluator({ schema }).prepareSubmission(
    {
      values: raw_values,
      repeatable,
    },
    { validateHiddenValues: true },
  )

  if (!result.eligible) {
    return {
      issues: result.validationSummary.orderedIssues.map(({ fieldName, message }) => ({
        fieldName,
        message,
      })),
    }
  }

  const checkedRecord = createStructuredRecord(result.snapshot, fields, {
    originalElements: schema.form.elements,
  })
  return { checkedRecord }
}

function reply(response, status, body) {
  response.writeHead(status, { "Content-Type": "application/json" })
  response.end(JSON.stringify(body))
}

createServer(async (request, response) => {
  if (request.method !== "POST" || request.url !== "/api/cases") {
    return reply(response, 404, { error: "Not found" })
  }

  try {
    let body = ""
    for await (const chunk of request) body += chunk

    const { checkedRecord, issues } = await checkRecord(JSON.parse(body))
    if (issues) return reply(response, 422, { issues })

    console.log("Saved case:", checkedRecord.form_values)
    reply(response, 201, { saved: true })
  } catch (error) {
    console.error(error)
    reply(response, 400, { error: "The record could not be read." })
  }
}).listen(3001, () => console.log("Cases API listening on port 3001"))

The server reads the same schema file as the form, so both apply the same rules. It creates a new evaluator for each request because a prepareSubmission() call cancels any earlier call still running on the same evaluator.

Forward /api requests to that server during development. Replace vite.config.js with:

Code
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: { "/api": "http://localhost:3001" },
  },
})

Start the API in a second terminal, from the project root:

Code
node server/cases-api.mjs

It prints Cases API listening on port 3001.