Contact form for React

In React you'll usually want to submit via fetch and stay on the page. Send JSON to your FormDock endpoint and render the success state from the response.

import { useState } from "react";

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

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("sending");
    const data = Object.fromEntries(new FormData(e.target));
    const res = await fetch("https://formdock.app/f/your-form-key", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    setStatus(res.ok ? "sent" : "error");
  }

  if (status === "sent") return <p>Thanks — we got your message.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" />
      <button disabled={status === "sending"}>Send</button>
      {status === "error" && <p>Something went wrong — try again.</p>}
    </form>
  );
}