A React contact form, twenty lines end to end.

src/ContactForm.jsx

import { useState } from "react";

// Replace with the public_id from the mailnix dashboard. Not a secret.
const FORM_ID = "PUBLIC_ID";
const ENDPOINT = `https://api.mailnix.ch/v1/public/forms/${FORM_ID}`;

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

  async function onSubmit(e) {
    e.preventDefault();
    setStatus("sending");
    setError(null);

    const def = await fetch(ENDPOINT).then((r) => r.json());
    const data = Object.fromEntries(new FormData(e.currentTarget));

    try {
      const res = await fetch(`${ENDPOINT}/submissions`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          data: { ...data, _mnx_ft: def.fill_time_token },
        }),
      });
      if (res.status !== 201) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error || "Submission failed");
      }
      setStatus("sent");
      e.target.reset();
    } catch (err) {
      setStatus("error");
      setError(err.message);
    }
  }

  if (status === "sent") {
    return <p>Thanks. We got your message and will be in touch.</p>;
  }

  return (
    <form onSubmit={onSubmit} noValidate>
      <label>
        Name
        <input name="name" required autoComplete="name" />
      </label>
      <label>
        Email
        <input name="email" type="email" required autoComplete="email" />
      </label>
      <label>
        Message
        <textarea name="message" required rows={5} />
      </label>
      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Sending..." : "Send message"}
      </button>
      {status === "error" && <p role="alert">Something went wrong: {error}</p>}
    </form>
  );
}

Setup, in order

1. Create a form in the mailnix dashboard and note the public_id shown next to it.
2. In the form's settings, add your dev origin (http://localhost:5173 for Vite, http://localhost:3000 for CRA) and your production origin to Allowed origins.
3. Add and verify at least one owner notify address so every submission emails you.
4. Drop the component above into your React project. The useState machine covers idle, sending, sent, and error states with room for a react-hook-form variant on top.
5. Submit once yourself and confirm the entry lands in the mailnix Forms inbox with a plausible spam score, then remove any mailto: fallback link you still had.