The Headless Form Backend for React Developers.

import { useForgeForm } from "@forge/react";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const schema = z.object({
  email: z.string().email(),
  name: z.string().min(1),
});

export function ContactForm() {
  const { register, handleSubmit, formState } =
    useForgeForm({
      formId: process.env.NEXT_PUBLIC_FORM_ID!,
      resolver: zodResolver(schema),
    });

  return (
    <form onSubmit={handleSubmit}>
      <input {...register("email")} />
      <input {...register("name")} />
      <button disabled={formState.isSubmitting}>
        Submit
      </button>
    </form>
  );
}

// app/actions/submit.ts
"use server";

export async function submitForm(fd: FormData) {
  const res = await fetch(
    `https://api.useforge.cloud/f/${
      process.env.FORGE_FORM_ID
    }/submit`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${
          process.env.FORGE_API_KEY
        }`,
      },
      body: JSON.stringify({
        email: fd.get("email"),
        name: fd.get("name"),
      }),
    }
  );
  if (!res.ok) return { error: "Failed" };
  return { success: true };
}