Contact form for React

Handle a React contact form without writing a backend

Post the form state to Formpit with fetch() and show a thank-you from the JSON response.

How to set it up

1. Create a form in Formpit and copy the endpoint URL.
2. In your submit handler, call fetch() as below.
3. Render a success state when ok is true.

Contact.jsx

function Contact() {
  const [state, setState] = useState("idle");
  async function onSubmit(e) {
    e.preventDefault();
    setState("sending");
    const r = await fetch("https://formpit.com/f/YOUR_FORM_ID", { method: "POST", headers: { Accept: "application/json" }, body: new FormData(e.target) });
    setState(r.ok ? "sent" : "error");
  }
  if (state === "sent") return <p>Thanks, we'll be in touch.</p>;
  return (
    <form onSubmit={onSubmit}>
      <input name="email" type="email" required />
      <textarea name="message" required />
      <input name="_gotcha" type="text" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
      <button disabled={state === "sending"}>Send</button>
    </form>
  );
}

Replace YOUR_FORM_ID with the endpoint from your form's Setup tab.

Good to know

• Works the same in Vite, Create React App, Remix and Gatsby.

What you get

• Every submission emailed to you and stored forever in an inbox with New / Replied / Closed statuses.
• Reply from the inbox, add tags and notes, search, export CSV or JSON.
• Spam filtering with a honeypot, rate limiting and content checks; hCaptcha, reCAPTCHA or Turnstile if you want it.
• 500 submissions a month free. Pro adds file uploads, Google Sheets, Notion, Slack, webhooks and reminders.

Other platforms

Lovable · Bolt · v0 · WordPress · Shopify · Wix · Squarespace · Framer · Webflow · Carrd · Plain HTML · Next.js · Astro · Hugo, Jekyll & Eleventy · Vue & Nuxt · Svelte & SvelteKit