React-Kontaktformular ohne eigenes Backend

Formgong team · Updated 2026-10-06

Senden Sie FormData per fetch an den Formgong-Endpunkt und fügen Sie den öffentlichen Zugangsschlüssel ein. Formgong filtert Spam und liefert die Anfrage an E-Mail und Telegram. Telegram ist sofort da. Im Gratis-Tarif ist die E-Mail ein täglicher Digest. Sie betreiben keinen Server, kein SMTP und keine geheimen Schlüssel. Die Komponente unten fügen Sie direkt ein.

Legen Sie ein Formular an, kopieren Sie den Zugangsschlüssel und ersetzen Sie fk_your_access_key in der Komponente. Der Schlüssel ist öffentlich. Er gehört in diese Datei.

FormularspracheBezeichnungen, Platzhalter, Schaltflächen und Formgong-Meldungen für Besucher (_lang).

Vite oder Create React App

import { useState } from "react";

// Paste your key: replace fk_your_access_key with the key from your Formgong form.
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "en");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "Could not send. Please try again.");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "Sent. Thank you!");
    } catch {
      setStatus("error");
      setNotice("Connection failed. Please try again.");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"Name"} <input name="name" autoComplete="name" placeholder={"Your name"} required /></label>
      <label>{"Email"} <input name="email" type="email" autoComplete="email" placeholder={"you@example.com"} required /></label>
      <label>{"Message"} <textarea name="message" placeholder={"How can we help?"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "Sending…" : "Send"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

Vite oder Create React App

import { useState } from "react";

// Вставте ключ: замініть fk_your_access_key на ключ вашої форми Formgong.
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "uk");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "Не вдалося надіслати. Спробуйте ще раз.");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "Надіслано. Дякуємо!");
    } catch {
      setStatus("error");
      setNotice("Немає з’єднання. Спробуйте ще раз.");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"Ім’я"} <input name="name" autoComplete="name" placeholder={"Ваше ім’я"} required /></label>
      <label>{"Email"} <input name="email" type="email" autoComplete="email" placeholder={"you@example.com"} required /></label>
      <label>{"Повідомлення"} <textarea name="message" placeholder={"Чим ми можемо допомогти?"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "Надсилаємо…" : "Надіслати"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

Vite oder Create React App

import { useState } from "react";

// Wklej klucz: zastąp fk_your_access_key kluczem formularza Formgong.
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "pl");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "Nie udało się wysłać. Spróbuj ponownie.");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "Wysłano. Dziękujemy!");
    } catch {
      setStatus("error");
      setNotice("Brak połączenia. Spróbuj ponownie.");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"Imię"} <input name="name" autoComplete="name" placeholder={"Twoje imię"} required /></label>
      <label>{"E-mail"} <input name="email" type="email" autoComplete="email" placeholder={"ty@example.com"} required /></label>
      <label>{"Wiadomość"} <textarea name="message" placeholder={"W czym możemy pomóc?"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "Wysyłanie…" : "Wyślij"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

Vite oder Create React App

import { useState } from "react";

// Anahtarınızı yapıştırın: fk_your_access_key değerini Formgong formunun anahtarıyla değiştirin.
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "tr");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "Gönderilemedi. Lütfen tekrar deneyin.");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "Gönderildi. Teşekkürler!");
    } catch {
      setStatus("error");
      setNotice("Bağlantı kurulamadı. Lütfen tekrar deneyin.");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"Ad"} <input name="name" autoComplete="name" placeholder={"Adınız"} required /></label>
      <label>{"E-posta"} <input name="email" type="email" autoComplete="email" placeholder={"siz@ornek.com"} required /></label>
      <label>{"Mesaj"} <textarea name="message" placeholder={"Size nasıl yardımcı olabiliriz?"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "Gönderiliyor…" : "Gönder"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

Vite oder Create React App

import { useState } from "react";

// Pega tu clave: sustituye fk_your_access_key por la clave de tu formulario de Formgong.
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "es");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "No se pudo enviar. Inténtalo de nuevo.");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "Enviado. ¡Gracias!");
    } catch {
      setStatus("error");
      setNotice("Error de conexión. Inténtalo de nuevo.");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"Nombre"} <input name="name" autoComplete="name" placeholder={"Tu nombre"} required /></label>
      <label>{"Correo electrónico"} <input name="email" type="email" autoComplete="email" placeholder={"tu@ejemplo.com"} required /></label>
      <label>{"Mensaje"} <textarea name="message" placeholder={"¿En qué podemos ayudarte?"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "Enviando…" : "Enviar"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

Vite oder Create React App

import { useState } from "react";

// Collez votre clé : remplacez fk_your_access_key par la clé de votre formulaire Formgong.
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "fr");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "Échec de l’envoi. Veuillez réessayer.");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "Envoyé. Merci !");
    } catch {
      setStatus("error");
      setNotice("Connexion impossible. Veuillez réessayer.");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"Nom"} <input name="name" autoComplete="name" placeholder={"Votre nom"} required /></label>
      <label>{"E-mail"} <input name="email" type="email" autoComplete="email" placeholder={"vous@exemple.com"} required /></label>
      <label>{"Message"} <textarea name="message" placeholder={"Comment pouvons-nous vous aider ?"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "Envoi…" : "Envoyer"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

Vite oder Create React App

import { useState } from "react";

// Cole a sua chave: substitua fk_your_access_key pela chave do formulário Formgong.
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "pt");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "Não foi possível enviar. Tente novamente.");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "Enviado. Obrigado!");
    } catch {
      setStatus("error");
      setNotice("Falha na ligação. Tente novamente.");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"Nome"} <input name="name" autoComplete="name" placeholder={"O seu nome"} required /></label>
      <label>{"E-mail"} <input name="email" type="email" autoComplete="email" placeholder={"voce@exemplo.com"} required /></label>
      <label>{"Mensagem"} <textarea name="message" placeholder={"Como podemos ajudar?"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "A enviar…" : "Enviar"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

Vite oder Create React App

import { useState } from "react";

// الصق مفتاحك: استبدل fk_your_access_key بمفتاح نموذج Formgong.
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "ar");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "تعذّر الإرسال. يرجى المحاولة مرة أخرى.");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "تم الإرسال. شكرًا لك!");
    } catch {
      setStatus("error");
      setNotice("فشل الاتصال. يرجى المحاولة مرة أخرى.");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"الاسم"} <input name="name" autoComplete="name" placeholder={"اسمك"} required /></label>
      <label>{"البريد الإلكتروني"} <input name="email" type="email" autoComplete="email" placeholder={"you@example.com"} required /></label>
      <label>{"الرسالة"} <textarea name="message" placeholder={"كيف يمكننا مساعدتك؟"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "جارٍ الإرسال…" : "إرسال"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

Vite oder Create React App

import { useState } from "react";

// הדביקו את המפתח: החליפו את fk_your_access_key במפתח של טופס Formgong.
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "he");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "השליחה נכשלה. נא לנסות שוב.");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "נשלח. תודה!");
    } catch {
      setStatus("error");
      setNotice("אין חיבור. נא לנסות שוב.");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"שם"} <input name="name" autoComplete="name" placeholder={"השם שלך"} required /></label>
      <label>{"אימייל"} <input name="email" type="email" autoComplete="email" placeholder={"you@example.com"} required /></label>
      <label>{"הודעה"} <textarea name="message" placeholder={"איך נוכל לעזור?"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "שולחים…" : "שליחה"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

Vite oder Create React App

import { useState } from "react";

// अपनी कुंजी चिपकाएँ: fk_your_access_key को अपने Formgong फ़ॉर्म की कुंजी से बदलें।
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "hi");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "भेजा नहीं जा सका। कृपया फिर से कोशिश करें।");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "भेज दिया गया। धन्यवाद!");
    } catch {
      setStatus("error");
      setNotice("कनेक्शन विफल। कृपया फिर से कोशिश करें।");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"नाम"} <input name="name" autoComplete="name" placeholder={"आपका नाम"} required /></label>
      <label>{"ईमेल"} <input name="email" type="email" autoComplete="email" placeholder={"you@example.com"} required /></label>
      <label>{"संदेश"} <textarea name="message" placeholder={"हम आपकी कैसे मदद कर सकते हैं?"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "भेजा जा रहा है…" : "भेजें"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

Vite oder Create React App

import { useState } from "react";

// キーを貼る: fk_your_access_key を Formgong のフォームのキーに置き換えてください。
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "ja");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "送信できませんでした。もう一度お試しください。");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "送信しました。ありがとうございます。");
    } catch {
      setStatus("error");
      setNotice("接続できませんでした。もう一度お試しください。");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"お名前"} <input name="name" autoComplete="name" placeholder={"山田 太郎"} required /></label>
      <label>{"メールアドレス"} <input name="email" type="email" autoComplete="email" placeholder={"you@example.com"} required /></label>
      <label>{"メッセージ"} <textarea name="message" placeholder={"ご用件をご記入ください"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "送信中…" : "送信"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

Vite oder Create React App

import { useState } from "react";

// Schlüssel einfügen: ersetzen Sie fk_your_access_key durch den Schlüssel Ihres Formgong-Formulars.
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "de");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "Das Senden ist fehlgeschlagen. Bitte versuchen Sie es erneut.");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "Gesendet. Vielen Dank!");
    } catch {
      setStatus("error");
      setNotice("Die Verbindung ist fehlgeschlagen. Bitte versuchen Sie es erneut.");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"Name"} <input name="name" autoComplete="name" placeholder={"Ihr Name"} required /></label>
      <label>{"E-Mail"} <input name="email" type="email" autoComplete="email" placeholder={"name@beispiel.de"} required /></label>
      <label>{"Nachricht"} <textarea name="message" placeholder={"Wie können wir Ihnen helfen?"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "Senden…" : "Senden"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

Weitere React-Varianten

Vite oder Create React App

Die Komponente oben ist diese Variante. Speichern Sie sie als src/ContactForm.jsx und rendern Sie sie aus App. Kein Zusatzpaket.

Vite oder Create React App

// src/App.jsx — Vite or Create React App
import ContactForm from "./ContactForm";

export default function App() {
  return <ContactForm />;
}

Next.js App Router

Setzen Sie die Client-Direktive an den Dateianfang. Die Seite, die das Formular rendert, kann eine Server Component bleiben.

Next.js App Router

"use client";

import { useState } from "react";

// Schlüssel einfügen: ersetzen Sie fk_your_access_key durch den Schlüssel Ihres Formgong-Formulars.
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "de");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "Das Senden ist fehlgeschlagen. Bitte versuchen Sie es erneut.");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "Gesendet. Vielen Dank!");
    } catch {
      setStatus("error");
      setNotice("Die Verbindung ist fehlgeschlagen. Bitte versuchen Sie es erneut.");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"Name"} <input name="name" autoComplete="name" placeholder={"Ihr Name"} required /></label>
      <label>{"E-Mail"} <input name="email" type="email" autoComplete="email" placeholder={"name@beispiel.de"} required /></label>
      <label>{"Nachricht"} <textarea name="message" placeholder={"Wie können wir Ihnen helfen?"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "Senden…" : "Senden"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

// app/contact/page.jsx — this file can stay a Server Component.
import ContactForm from "./ContactForm";

export default function Page() {
  return <ContactForm />;
}

React Hook Form

Installieren Sie react-hook-form. Die Prüfung bleibt dort. Der Handler sendet trotzdem FormData an Formgong.

React Hook Form

import { useState } from "react";
import { useForm } from "react-hook-form";

// Schlüssel einfügen: ersetzen Sie fk_your_access_key durch den Schlüssel Ihres Formgong-Formulars.
const ACCESS_KEY = "fk_your_access_key";

export default function ContactForm() {
  const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm();
  const [notice, setNotice] = useState("");
  const [failed, setFailed] = useState(false);

  async function onSubmit(values) {
    const body = new FormData();
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "de");
    body.set("name", values.name);
    body.set("email", values.email);
    body.set("message", values.message);
    body.set("botcheck", values.botcheck || "");
    setFailed(false);
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = await response.json();
      if (!response.ok || !result.success) {
        setFailed(true);
        setNotice(result.message || "Das Senden ist fehlgeschlagen. Bitte versuchen Sie es erneut.");
        return;
      }
      reset();
      setNotice(result.message || "Gesendet. Vielen Dank!");
    } catch {
      setFailed(true);
      setNotice("Die Verbindung ist fehlgeschlagen. Bitte versuchen Sie es erneut.");
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>{"Name" <input {...register("name", { required: "Pflichtfeld" })} aria-invalid={errors.name ? true : undefined} autoComplete="name" /></label>
      {errors.name && <span>{errors.name.message}</span>}
      <label>{"E-Mail" <input type="email" {...register("email", { required: "Pflichtfeld" })} aria-invalid={errors.email ? true : undefined} autoComplete="email" /></label>
      {errors.email && <span>{errors.email.message}</span>}
      <label>{"Nachricht" <textarea {...register("message", { required: "Pflichtfeld" })} aria-invalid={errors.message ? true : undefined} /></label>
      {errors.message && <span>{errors.message.message}</span>}
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input {...register("botcheck")} tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={isSubmitting}>{isSubmitting ? "Senden…" : "Senden"}</button>
      {failed ? <p role="alert">{notice}</p> : <p role="status">{notice}</p>}
    </form>
  );
}

TypeScript

Dieselbe Komponente, mit einem Typ für den Status und für die JSON-Antwort. Speichern Sie sie als ContactForm.tsx.

TypeScript

import { useState, type FormEvent } from "react";

// Schlüssel einfügen: ersetzen Sie fk_your_access_key durch den Schlüssel Ihres Formgong-Formulars.
const ACCESS_KEY = "fk_your_access_key";

type Status = "idle" | "sending" | "success" | "error";
type SubmitResult = { success?: boolean; message?: string };

export default function ContactForm() {
  const [status, setStatus] = useState<Status>("idle");
  const [notice, setNotice] = useState("");

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!form.reportValidity()) return;
    const body = new FormData(form);
    body.set("access_key", ACCESS_KEY);
    body.set("_lang", "de");
    setStatus("sending");
    setNotice("");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const result = (await response.json()) as SubmitResult;
      if (!response.ok || !result.success) {
        setStatus("error");
        setNotice(result.message || "Das Senden ist fehlgeschlagen. Bitte versuchen Sie es erneut.");
        return;
      }
      form.reset();
      setStatus("success");
      setNotice(result.message || "Gesendet. Vielen Dank!");
    } catch {
      setStatus("error");
      setNotice("Die Verbindung ist fehlgeschlagen. Bitte versuchen Sie es erneut.");
    }
  }

  const sending = status === "sending";
  return (
    <form onSubmit={onSubmit}>
      <label>{"Name"} <input name="name" autoComplete="name" placeholder={"Ihr Name"} required /></label>
      <label>{"E-Mail"} <input name="email" type="email" autoComplete="email" placeholder={"name@beispiel.de"} required /></label>
      <label>{"Nachricht"} <textarea name="message" placeholder={"Wie können wir Ihnen helfen?"} required /></label>
      <div aria-hidden="true" style={{ position: "absolute", insetInlineStart: 0, top: 0, width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={sending}>{sending ? "Senden…" : "Senden"}</button>
      <p role={status === "error" ? "alert" : "status"}>{notice}</p>
    </form>
  );
}

Fertige React-Komponente auf GitHub: github.com/formgong/react-contact-form. MIT-Lizenz: Klicken Sie auf „Use this template“ oder kopieren Sie die Dateien.

React-Paket: npm install @formgong/react (npm: @formgong/react)

Zu einem bestehenden Projekt hinzufügen: npx formgong init (npm: formgong)

So funktionieren Formulare in React

React zeichnet das Formular. Es sendet keine Mail. Vite und Create React App liefern statische Dateien, der Browser braucht also eine URL, die den POST annimmt.

Diese URL ist Formgong. Die Komponente sendet FormData per fetch an /submit. Mit dabei sind der öffentliche access_key, _lang und ein leeres Feld botcheck. Formgong filtert Spam und liefert die Anfrage.

Was hier anders ist

Telegram kommt auch im Gratis-Tarif sofort an. E-Mail ist dabei, als täglicher Digest für einen Empfänger.
Eingänge liegen in der EU, in Cloudflare D1 unter EU-Zuständigkeit.
Der Spamschutz braucht kein CAPTCHA und keine Cookies. Das Honeypot ist immer an. Turnstile ist optional.
Der Zugangsschlüssel in der Komponente ist öffentlich. Ein SMTP-Passwort oder einen privaten API-Schlüssel legen Sie nicht ins Bundle.
Fehlertext und die Danke-Seite können der Sprache des Besuchers folgen. Es sind 12 Sprachen.

Warum nicht EmailJS oder eine eigene API-Route?

Warum nicht EmailJS oder eine eigene API-Route?
	EmailJS	Ihre API-Route	Formgong
Was Sie hinzufügen	Ein npm-Paket, eine Service-Id, eine Template-Id und einen öffentlichen Schlüssel.	Eine Serverless-Funktion und einen SMTP-Client wie Nodemailer.	Einen öffentlichen Zugangsschlüssel in der Komponente auf dieser Seite.
E-Mail	Sofortpost aus Ihrer Vorlage. Der Gratis-Tarif hat 200 Anfragen im Monat und 2 Vorlagen.	Sofortpost, wenn Ihr Anbieter die Nachricht annimmt.	Ein täglicher Digest im Gratis-Tarif. Jede Anfrage per E-Mail gibt es in Pro und Business.
Telegram	Nicht Teil von EmailJS. Der Dienst sendet E-Mail.	Nur wenn Sie diesen Aufruf selbst schreiben.	Sofort, schon im Gratis-Tarif.
Schlüssel im Browser	Der öffentliche Schlüssel soll öffentlich sein. Den privaten behalten Sie auf einem Server.	Das SMTP-Passwort bleibt in der Host-Umgebung. Das ist die Stärke dieses Wegs.	Der Zugangsschlüssel ist öffentlich. Ein SMTP-Geheimnis gibt es nicht.
Spam	Limits setzen Sie im EmailJS-Konto. Das Webtips-Tutorial von 2024 fügt nichts hinzu.	Den Filter bauen Sie selbst.	Ein Honeypot ist immer an. Keine Cookies. Ein CAPTCHA ist nicht nötig.
Gratis-Kontingent	200 Anfragen im Monat, danach werden weitere verworfen.	Das Gratis-Kontingent Ihres Hosts plus das Limit Ihres Mail-Anbieters.	300 Eingänge im Monat.
Wo die Daten liegen	EmailJS speichert den Verlauf auf eigenen Servern. Gratis behält 7 Tage. Die Preisseite sagt nicht „nur EU“.	Dort, wo Ihr Host und Ihr Mail-Anbieter sie speichern.	In der EU, auf Cloudflare D1.

Wählen Sie EmailJS, wenn die Mail aus Ihrem Postfach kommen soll, mit Ihrer Vorlage, im Moment des Absendens.

Wählen Sie eine Vercel- oder Netlify-Funktion, wenn die Einsendung Ihre Datenbank aktualisieren oder prüfen soll, dass der Besucher angemeldet ist.

Wählen Sie Formgong für ein Kontaktformular. Telegram ist im Gratis-Tarif sofort da. E-Mail ist dort ein täglicher Digest. Ein SMTP-Passwort speichern Sie nicht.

Die EmailJS-Zahlen stammen von der Preisseite am 6. Oktober 2026. Die Spalte API-Route ist eine Vercel- oder Netlify-Funktion plus SMTP, keine Preisliste eines Anbieters.

Einrichtung in React

Legen Sie ein Formular in Formgong an und kopieren Sie den Zugangsschlüssel. Er sieht aus wie fk_your_access_key.
Fügen Sie die Komponente oben in die App ein und ersetzen Sie diesen Schlüssel.
Rendern Sie die Komponente, öffnen Sie die Seite und senden Sie sich einen Test.
Öffnen Sie in Formgong das Formular und verbinden Sie Telegram, wenn Sie einen Hinweis aufs Telefon wollen.

Fragen und Antworten

Braucht ein React-Kontaktformular ein Backend?

Nein. Senden Sie FormData per fetch an Formgong. Sie fügen keine API-Route, kein Nodemailer und kein SMTP hinzu.

Wie sende ich E-Mail aus React ohne Nodemailer oder SMTP?

Nutzen Sie die Komponente auf dieser Seite. Formgong nimmt den POST an und filtert Spam. Telegram bekommt die Anfrage sofort. Im Gratis-Tarif ist E-Mail ein täglicher Digest. Pro und Business mailen Sie bei jeder Einsendung.

Darf der Schlüssel im Client-Code stehen?

Ja. Der access_key ist öffentlich. Er kann nur dieses Formular absenden. Den Posteingang kann er nicht lesen. In Pro können Sie erlaubte Domains begrenzen. Ein SMTP-Passwort legen Sie nicht ins Bundle.

Wie stoppe ich Spam im React-Formular?

Lassen Sie botcheck leer. Formgong bewertet Spam ohne Cookies und ohne Pflicht-CAPTCHA. Turnstile ist optional, wenn Sie später ein Rätsel wollen.

Funktioniert das mit Next.js?

Ja. Setzen Sie im App Router "use client" an den Anfang der Datei. Die Komponente bleibt gleich. Die Next.js-Variante auf dieser Seite zeigt die Datei.

Kostenlos starten

Alle Plattformen →