React Integration

Building forms in React doesn't require a backend. With Forge's Headless API, you can submit data securely directly from your client-side React components while maintaining total control over your UI.

Installation

You don't need any special SDKs. Standard fetch works perfectly. However, we highly recommend using react-hook-form for state management.

npm install react-hook-form

Basic Example

Here is a minimum working example of a React form posting to a Forge endpoint.

import { useState } from 'react';

export default function ContactForm() {
  const [status, setStatus] = useState("idle");

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("submitting");
    
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);

    const response = await fetch("https://api.useforge.cloud/v1/f/your-form-id", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });

    if (response.ok) {
      setStatus("success");
    } else {
      setStatus("error");
    }
  };

  if (status === "success") return <p>Thanks for reaching out!</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      <button type="submit" disabled={status === "submitting"}>
        Submit
      </button>
    </form>
  );
}

Form Validation

While Forge automatically rejects malformed data and validates against your schema, we recommend validating inputs client-side first to provide immediate feedback to the user. We recommend combining Zod with React Hook Form.