Framework guides

React

A controlled submit handler with proper status feedback.

Post a FormData object straight from the form element — no field-by-field state needed. Send Accept: application/json so the endpoint answers with JSON instead of a redirect.

ContactForm.tsx

import { useState } from "react";

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

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setStatus("sending");

    const data = new FormData(event.currentTarget);
    data.append("access_key", "YOUR_ACCESS_KEY_HERE");

    const res = await fetch("https://api.formpost.ai/submit", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: data,
    });

    const json = await res.json();
    setStatus(json.success ? "sent" : "error");
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="name" required />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button disabled={status === "sending"}>Send</button>
      {status === "sent" && <p>Thanks — we will be in touch.</p>}
    </form>
  );
}

Keep the access key in a public environment variable if you like. It is designed to be visible — it can only deliver mail to the address it was issued for.