React-Kontaktformular ohne Backend

Die Komponente sendet die Formulardaten als JSON an Mailiy und zeigt die Antwort an. Sie nutzt nur fetch() und useState, du installierst nichts.

So baust du es ein

1. Leg ein kostenloses Konto an, füg deine Website hinzu und kopier den Schlüssel des Formulars.
2. Leg die Datei unten an und ersetz YOUR_ACCESS_KEY.
3. Bind <ContactForm /> dort ein, wo das Formular stehen soll.
4. Ergänz Labels und Felder nach Bedarf. Jedes Feld mit name kommt in der E-Mail an.

src/ContactForm.jsx

import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("");
  const onSubmit = async (event) => {
    event.preventDefault();
    const data = Object.fromEntries(new FormData(event.currentTarget));
    const res = await fetch("https://mailiy.com/api/submit", {
      method: "POST",
      headers: { "content-type": "application/json", accept: "application/json" },
      body: JSON.stringify({ ...data, access_key: "YOUR_ACCESS_KEY" }),
    });
    const result = await res.json();
    setStatus(result.success ? "Danke!" : result.message);
  };
  return (
    <form onSubmit={onSubmit}>
      <input type="email" name="email" required />
      <textarea name="message" required />
      <input type="checkbox" name="botcheck" style={{ display: "none" }} />
      <button>Senden</button>
      <p role="status">{status}</p>
    </form>
  );
}

Was du bei React wissen solltest

• Der Schlüssel darf im Frontend stehen. Er erlaubt nur das Absenden an dieses Formular. Erlaubte Domains stellst du im Dashboard ein.
• result.success sagt dir, ob die Einsendung angekommen ist, result.message enthält sonst den Grund.

Felder, die Mailiy erkennt

Jedes Feld mit Namen erscheint in der E-Mail und im Dashboard. Einige Namen liest Mailiy selbst und steuert damit, wie die Mail aussieht und was danach passiert:

Dateien mitschicken

Mit einem Feld vom Typ file nimmt dein Formular in React auch Anhänge an, bis zu fünf Dateien mit zusammen 10 MB. Erlaubt sind PDF, Bilder, Text- und Office-Dateien. Mailiy prüft bei jeder Datei, ob der Inhalt zur Endung passt, und lehnt alles andere ab.

Die Komponente oben schickt JSON, und darin haben Dateien keinen Platz. Für Uploads übergibst du fetch() direkt das FormData-Objekt als body und lässt den Header Content-Type weg, den setzt der Browser dann selbst.

Wenn keine E-Mail ankommt

Mailiy antwortet auf jede Einsendung mit einer Meldung. Meistens steckt eine dieser Ursachen dahinter:

• Falscher Schlüssel. Die Antwort lautet „Invalid access key“. Kopier den Schlüssel noch einmal aus dem Dashboard, ohne Leerzeichen davor oder danach.
• Domain nicht erlaubt. Hast du im Dashboard erlaubte Domains eingetragen, nimmt Mailiy nur Einsendungen von dort an. Subdomains zählen mit. Zum Testen auf einer Vorschau-Adresse trägst du diese vorübergehend dazu.
• Feld ohne Namen. Ein Eingabefeld ohne name-Attribut schickt der Browser gar nicht mit. Es fehlt dann in der E-Mail, ohne dass eine Fehlermeldung erscheint.
• Zu viele Tests hintereinander. Pro Formular und Besucher nimmt Mailiy fünf Einsendungen in der Minute an. Danach kommt „Too many submissions“, und nach kurzer Pause geht es weiter.
• Mail im Spam-Ordner. Schau zuerst in den Spam-Ordner und markier die erste Mail als „Kein Spam“. Steht die Einsendung im Dashboard, hat Mailiy sie angenommen.
• Neuer Empfänger bekommt nichts. Weitere Empfänger bekommen erst Mails, wenn sie ihre Adresse über den Link in der Bestätigungsmail freigegeben haben.

Nach dem Absenden

Jede Einsendung landet im Dashboard. Dort durchsuchst du sie und exportierst sie als CSV. Im Formular stellst du außerdem eine automatische Antwort ein, die an die Adresse aus dem Feld email geht, etwa „Danke, wir melden uns innerhalb von zwei Tagen“.

Soll dein Team die Nachricht auch im Chat sehen, schickt Mailiy sie zusätzlich an Slack, Discord oder Telegram. Für eigene Abläufe gibt es Webhooks, die jede Einsendung als JSON an eine Adresse deiner Wahl senden.

Spam und Datenschutz

Das unsichtbare Feld botcheck ist eine Falle für Bots. Kreuzen sie es an, verwirft Mailiy die Einsendung, ohne sie zu speichern oder zu verschicken. Weitere Filter und ein Captcha schaltest du im Dashboard dazu.

Mailiy läuft auf Servern in Deutschland und setzt keine Tracker. Was du sonst noch für ein DSGVO-konformes Formular brauchst, steht in der DSGVO-Checkliste.

Häufige Fragen

Funktioniert das mit Vite, Remix oder Gatsby?

Ja. Die Komponente braucht nur React und den Browser. Sie läuft überall, wo React im Browser rendert, egal mit welchem Build-Tool.

Brauche ich für das Kontaktformular in React einen eigenen Server?

Nein. Das Formular sendet an Mailiy, Mailiy verschickt die E-Mail. Du brauchst weder PHP noch SMTP-Zugangsdaten noch Server-Code.

Darf der Schlüssel im Quelltext der Seite stehen?

Ja. Er erlaubt nur, Einsendungen an dieses eine Formular zu schicken. Er gibt keinen Zugriff auf dein Konto. Im Dashboard legst du fest, von welchen Domains Einsendungen angenommen werden.

Was kostet das?

Der kostenlose Tarif enthält 100 Einsendungen im Monat für eine Website. Bezahlte Tarife beginnen bei 9 € im Monat.

Andere Plattformen

• Kontaktformular in WordPress ohne Plugin
• Webflow-Formulare per E-Mail empfangen
• Kontaktformular in Framer einbauen
• HTML-Kontaktformular ohne PHP
• Next.js-Kontaktformular ohne API-Route
• Astro-Kontaktformular ohne Server
• Vue- und Nuxt-Kontaktformular ohne Backend

Kostenlos starten