React form to email

A React app running in the browser has no server to receive a form. Post it to FormDoc instead and each submission is emailed to you.

JSX
import { useState } from "react";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget; // React clears currentTarget after an await
    setStatus("Sending…");
    const res = await fetch("https://api.formdoc.dev/v1/submit", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    const result = await res.json();
    setStatus(result.success ? "Thanks, message sent." : result.error.message);
    if (result.success) form.reset();
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <label htmlFor="name">Name</label>
      <input id="name" type="text" name="name" required />
      <label htmlFor="email">Email</label>
      <input id="email" type="email" name="email" required />
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required />
      <input type="checkbox" name="botcheck" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
      <button type="submit">Send</button>
      <p role="status">{status}</p>
    </form>
  );
}

Using Next.js? See the Next.js guide.