JavaScript-Kontaktformular, das E-Mail sendet

Formgong team · Updated 2026-10-06

Ein JavaScript-Kontaktformular braucht trotzdem eine Adresse für den POST. Rufen Sie fetch auf, senden Sie die Felder und lesen Sie die JSON-Antwort. Formgong nimmt den Aufruf ohne Ihren Server an. Bibliothek und API-Route sind nicht nötig. Im Gratisplan ist Telegram sofort da, und E-Mail ist ein täglicher Digest.

Dieses JavaScript-Formular kopieren

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

JavaScript

<form id="fg-contact" action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="hi">
  <label>नाम <input type="text" name="name" autocomplete="name" placeholder="आपका नाम" required></label>
  <label>ईमेल <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>संदेश <textarea name="message" placeholder="हम आपकी कैसे मदद कर सकते हैं?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>इस फ़ील्ड को खाली छोड़ें<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">भेजें</button>
  <p role="status"></p>
</form>
<script>
  const form = document.querySelector("#fg-contact");
  const status = form.querySelector("[role=status]");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const button = form.querySelector("button");
    button.disabled = true;
    const fields = Object.fromEntries(new FormData(form));
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(fields),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "भेज दिया गया। धन्यवाद!" : "भेजा नहीं जा सका। कृपया फिर से कोशिश करें।");
      if (result.success) form.reset();
    } catch {
      status.textContent = "कनेक्शन विफल। कृपया फिर से कोशिश करें।";
    } finally {
      button.disabled = false;
    }
  });
</script>

JavaScript

<form id="fg-contact" action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="de">
  <label>Name <input type="text" name="name" autocomplete="name" placeholder="Ihr Name" required></label>
  <label>E-Mail <input type="email" name="email" autocomplete="email" placeholder="name@beispiel.de" required></label>
  <label>Nachricht <textarea name="message" placeholder="Wie können wir Ihnen helfen?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>Lassen Sie dieses Feld leer<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Senden</button>
  <p role="status"></p>
</form>
<script>
  const form = document.querySelector("#fg-contact");
  const status = form.querySelector("[role=status]");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const button = form.querySelector("button");
    button.disabled = true;
    const fields = Object.fromEntries(new FormData(form));
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(fields),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "Gesendet. Vielen Dank!" : "Das Senden ist fehlgeschlagen. Bitte versuchen Sie es erneut.");
      if (result.success) form.reset();
    } catch {
      status.textContent = "Die Verbindung ist fehlgeschlagen. Bitte versuchen Sie es erneut.";
    } finally {
      button.disabled = false;
    }
  });
</script>

FormData statt JSON senden

FormData statt JSON senden

<script>
  const form = document.querySelector("#fg-contact");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const status = form.querySelector("[role=status]");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(form),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "Gesendet. Vielen Dank!" : "Das Senden ist fehlgeschlagen. Bitte versuchen Sie es erneut.");
      if (!result.success) return;
      form.reset();
    } catch {
      status.textContent = "Die Verbindung ist fehlgeschlagen. Bitte versuchen Sie es erneut.";
    }
  });
</script>

Nur der fetch-Aufruf, wenn das Formular schon auf der Seite steht

Nur der fetch-Aufruf, wenn das Formular schon auf der Seite steht

async function onSubmit(event) {
  event.preventDefault();
  const fields = Object.fromEntries(new FormData(event.currentTarget));
  const response = await fetch("https://formgong.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    // _lang: language of Formgong messages and the autoreply (multilingual site: document.documentElement.lang).
    body: JSON.stringify({ _lang: "de", ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Das Senden ist fehlgeschlagen. Bitte versuchen Sie es erneut.");
  return result.message; // localized "Sent. Thank you!"
}

So funktionieren Formulare in JavaScript

Leute suchen ein JavaScript-Kontaktformular, das E-Mail sendet, nicht ein fetch-Formular. fetch ist nur der Browser-Aufruf, der den POST macht. EmailJS, Axios und eine Server-Route sind nicht nötig.

Senden Sie einen Accept-Header mit application/json, sonst antwortet der Endpunkt mit einer Weiterleitung, wie ein einfaches Formular. Ein fehlgeschlagenes fetch wirft. Eine abgelehnte Anfrage kommt mit success auf false zurück und einem Text, den Sie zeigen können.

Einrichtung in JavaScript

Legen Sie in Formgong ein Formular an und kopieren Sie den Schlüssel.
Fügen Sie den Code oben ein. Es ist ein Formular plus ein kurzes Skript: async und await, JSON und try catch für Netzfehler.
Lassen Sie das Honigtopf-Feld leer und außerhalb des Bildschirms. Füllt ein Bot es, wird die Anfrage als Spam gespeichert und nicht zugestellt.
Das Skript schaltet den Button während der Anfrage aus und zeigt dann den Text der Antwort. Erfolg leert das Formular.
Öffnen Sie die echte Seite und senden Sie einen Test. Prüfen Sie den Posteingang und verbinden Sie Telegram, wenn Sie einen Hinweis auf dem Telefon wollen.

Wege, ein JavaScript-Kontaktformular zu senden

Variante	Was Sie betreiben	Was Sie bekommen
mailto:	Nichts auf einem Server. Das Mailprogramm öffnet sich.	Eine Nachricht nur, wenn der Besucher sendet. Auf dem Telefon geht das leicht kaputt.
Eigene API-Route	Ein Server, SMTP und ein Geheimnis.	E-Mail, die Sie steuern. Spam, Ausfall und der Code gehören auch Ihnen.
EmailJS	Deren Skript auf der Seite.	E-Mail über deren Dienst. Hier steht kein Preis. Er wurde an dem Tag nicht neu geprüft.
Formspree	Keinen. Der Browser sendet an Formspree.	E-Mail und ein Dashboard. Kostenlos 50 Einsendungen im Monat. Personal kostet 15 Dollar im Monat.
Formgong	Keinen. fetch sendet an Formgong.	Telegram sofort. Im Free-Plan ist E-Mail ein täglicher Digest. 300 Einsendungen im Monat, Daten in der EU.

Die Formspree-Preise stammen von formspree.io/plans am 2026-10-06. Die Formgong-Grenzen stammen aus dem Produktcode. EmailJS steht in den Suchergebnissen. Der Preis wurde an dem Tag nicht neu geprüft. Web3Forms.com antwortete mit HTTP 403, daher fehlt es in der Tabelle.

Preise · Formgong vs Formspree · HTML-Kontaktformular, das E-Mail sendet

Komponenten-Paket: npm install @formgong/core (npm: @formgong/core)

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

fetch, eine Bibliothek oder Ihr Server?

Nehmen Sie diese Seite bei einfachem JavaScript, einem kleinen Widget oder einem Dialog. Der Besucher bleibt auf der Seite.

Nehmen Sie einfaches HTML, wenn JavaScript aus sein kann. Das Formular oben hat trotzdem ein action, also funktioniert es ohne Skript.

Schreiben Sie einen eigenen Server nur, wenn die Anfrage Daten in Ihrer App ändern muss. EmailJS sendet über sein Skript. Formgong ist ein POST.

Fragen und Antworten

Kann JavaScript ein Formular ohne Server per E-Mail senden?

Der Browser spricht kein SMTP. Er kann die Felder per POST an ein Formular-Backend senden. Dieses Backend sendet die Mail. Für dieses Formular betreiben Sie keinen Server.

Soll ich FormData oder JSON senden?

JSON passt zu Textfeldern. FormData passt, wenn das Formular schon da ist und wenn Sie Dateien senden. Beides landet im selben Posteingang. Setzen Sie bei FormData nicht selbst Content-Type.

Warum kommt eine Weiterleitung statt JSON?

Ein einfacher Formular-POST liefert eine Weiterleitung. Für JSON senden Sie einen Accept-Header mit application/json. Dann lesen Sie success und den Text.

Wie soll ich Fehler behandeln?

Ein fehlgeschlagenes fetch wirft. Das ist ein Netzfehler. Eine abgelehnte Anfrage liefert JSON mit success auf false. Zeigen Sie den Text und behalten Sie die Eingabe.

Brauche ich EmailJS oder eine andere Bibliothek?

Nein. fetch steckt im Browser. Eine Bibliothek ist in Ordnung, wenn Sie sie schon nutzen. Senden Sie dieselben Felder und dieselben Header.

Kostenlos starten

Alle Plattformen →