Contact form for React without a backend

Where this goes

Save the component in Contact.jsx and render it where your contact section belongs.

Create a form in the dashboard and replace YOUR_FORM_ID with your endpoint ID. No account key belongs in this code.

export default function Contact() {
  return (
    <form action="https://formdrop.wouldairecommend.workers.dev/f/YOUR_FORM_ID" method="POST">
      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email" required />
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required />
      <input name="_gotcha" tabIndex={-1} autoComplete="off" hidden />
      <button type="submit">Send message</button>
    </form>
  );
}

The detail that matters

Use htmlFor and tabIndex in JSX. A native submission works without a state hook.

After you publish

Send a test from the published page, then check Inbox and Spam. Native forms follow a redirect; fetch clients must request JSON and show errors. Set your allowed domains to the hostnames you actually publish, including any preview hostname you need.

Read the endpoint reference for reserved fields, CORS and redirect rules. Start from the accessible contact template if you need styling.

Questions about this setup