React Contact Form Without a Backend (Two Patterns)

A React contact form doesn't need a backend. POST the form to a hosted endpoint and the service behind it stores the submission, filters spam, and emails you — your app stays static, deployable to any CDN, with no API route, no Express server, and no email credentials anywhere near client code.

Below are the two patterns that cover essentially every React contact form, both against the same endpoint: the zero-JavaScript version, and the fetch version with proper loading and success states.

Pattern 1: the plain form (zero extra JavaScript)

React renders HTML, and HTML forms already know how to submit themselves. For a simple contact page this is the entire component:

export function ContactForm() {
  return (
    <form action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST">
      <input type="text" name="name" placeholder="Your name" required />
      <input type="email" name="email" placeholder="[email protected]" required />
      <textarea name="message" placeholder="How can we help?" required />
      {/* honeypot: hidden from humans, irresistible to bots */}
      <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" style={{ display: "none" }} />
      <input type="hidden" name="_redirect" value="https://yoursite.com/thanks" />
      <button type="submit">Send</button>
    </form>
  );
}

Every name attribute becomes a field in the email you receive; _redirect sends the visitor to your thank-you page. No state, no handlers, works even if your JavaScript bundle fails to load. Don't underestimate this version — for a contact page it's often the right amount of engineering.

Pattern 2: fetch, with loading and success states

When you want to stay on the page — inline "thanks" message, disabled button while sending — submit the same endpoint with FormData:

import { useState } from "react";

export function ContactForm() {
  const [status, setStatus] = useState("idle"); // idle | sending | sent | error

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("sending");
    try {
      const res = await fetch("https://shipmyform.com/f/YOUR_FORM_ID", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(e.currentTarget),
      });
      setStatus(res.ok ? "sent" : "error");
    } catch {
      setStatus("error");
    }
  }

  if (status === "sent") return <p>Thanks — we'll get back to you soon.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Your name" required />
      <input type="email" name="email" placeholder="[email protected]" required />
      <textarea name="message" placeholder="How can we help?" required />
      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Sending…" : "Send"}
      </button>
      {status === "error" && <p role="alert">Something went wrong — try again.</p>}
    </form>
  );
}

Two React-specific notes worth internalizing:

• You don't need controlled inputs to submit. new FormData(e.currentTarget) reads values straight from the DOM — no useState per field, no re-render per keystroke. Reach for controlled inputs only when something must react while typing (live validation, character counts).
• Accept: application/json tells the endpoint to answer with { ok: true } instead of redirecting — that's what makes the inline success state possible. The full pattern, including error details and validation messages, is in submit a form with fetch.

What you're not building

The reason "React contact form" tutorials balloon to an hour is everything around the component. With a form endpoint, that work is the service's problem, not your bundle's:

As of 2026, ShipMyForm's free plan covers 100 submissions a month with all of the above included — enough for most portfolio and product-site contact forms, with React-specific docs for the details.

Next steps

• Using Next.js? Next.js form handling covers Server Actions vs the endpoint pattern.
• Generate the markup with your fields: contact form generator (React output included).
• Create a free endpoint — 100 submissions/month, no credit card — and your form works in the time it takes to paste a URL.