How to add a backend to a React contact form

Use FormData from your existing React component and POST it to Formserve.

§ 01 · Context Why it still needs a backend.

React forms often already have the UI and validation you need. Formserve lets you keep the component and replace the backend work with a direct POST to an endpoint.

The form POSTs to an endpoint URL, the submission is stored, and notifications are sent according to the endpoint settings. It's a safer, more maintainable replacement for fragile mailto: patterns or one-off scripts that break the first time your host changes.

§ 02 · Why More than just an email alert.

When the backend stores every submission first and notifies second, you get three things a raw SMTP relay can't give you:

And because the submission is stored, delivery failures stay visible instead of disappearing into email logs. If a notification bounces, you can see it, retry it, and still have the lead.

§ 03 · Setup How to connect it.

None of these steps involve writing server code. First, make sure you have the essentials in place:

§ 04 · Example Keep the form simple.

There's nothing special about the markup. The only required change is the action attribute. The hidden _honeypot input is the one spam-prevention field worth adding by hand:

function ContactForm() {
  async function handleSubmit(event) {
    event.preventDefault();
    const response = await fetch("https://formserve.io/f/YOUR_ENDPOINT_KEY", {
      method: "POST",
      body: new FormData(event.currentTarget)
    });

    if (response.ok) event.currentTarget.reset();
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="_honeypot" tabIndex="-1" autoComplete="off" style={{ position: "absolute", left: "-9999px" }} />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit">Send</button>
    </form>
  );
}

§ 05 · FAQ Common questions.