React.

Ein kontrolliertes Formular, ein fetch-Aufruf, drei Zustände. Keine Bibliothek, kein eigenes Backend — die Komponente unten ist vollständig.

Kontaktformular-Komponente

Leg den Access-Key in eine Umgebungsvariable — er ist ein öffentliches Kürzel, kein Geheimnis, gehört aber trotzdem in die Konfiguration statt in den Quelltext.

JSX

import { useState } from "react";

const ENDPOINT = `https://mailan.email/api/submit/${import.meta.env.VITE_MAILAN_KEY}`;

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

async function handleSubmit(event) {
    event.preventDefault();
    setStatus("sending");
    const data = Object.fromEntries(new FormData(event.currentTarget));
    try {
      const res = await fetch(ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(data),
      });
      const body = await res.json();
      if (!res.ok || !body.success) throw new Error(body.message ?? "Request failed");
      event.target.reset();
      setStatus("success");
    } catch (err) {
      setError(err.message);
      setStatus("error");
    }
  }

if (status === "success") return <p>Danke! Wir melden uns.</p>;

return (
    <form onSubmit={handleSubmit}>
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <input type="text" name="botcheck" hidden tabIndex={-1} autoComplete="off" />
      <button disabled={status === "sending"}>
        {status === "sending" ? "Senden…" : "Senden"}
      </button>
      {status === "error" && <p role="alert">{error}</p>}
    </form>
  );
}