Blog

AJAX-Formularübermittlung: ein Formular ohne Seiten-Reload senden

12. Juli 2026 · 4 Min. Lesezeit

Senden Sie ein HTML-Formular auf die einfache Art ab, tut der Browser das, was er immer getan hat: zu einer neuen Seite navigieren oder die aktuelle neu laden - und dabei alles verwerfen, was einen Moment zuvor noch zu sehen war. Für ein Formular auf einer eigenen Seite ist das harmlos. Für ein Formular in einer Modal-Ansicht, einem Chat-Widget, einem Checkout-Ablauf oder einer beliebigen Single-Page-App ist eine vollständige Navigation ein abrupter Reset - die Modal-Ansicht schließt sich, die App wird neu gemountet, die Scroll-Position ist weg. Die AJAX-Übermittlung - Formulardaten mit JavaScripts fetch() senden, statt den Browser navigieren zu lassen - behebt das, und es sind nur wenige Zeilen Code.

Warum den Seiten-Reload vermeiden

Ein vollständiger Seiten-Reload verwirft alles, was JavaScript im Speicher hielt: eine geöffnete Modal-Ansicht, den aktuellen Schritt eines Assistenten, ungespeicherten Zustand an anderer Stelle der Seite. Lebt das Formular in einem React-, Vue- oder Svelte-Komponentenbaum, reißt eine Navigation durch den Browser auch die gesamte clientseitige App ab, die dann von Grund auf neu geladen werden muss.

Das Senden über fetch() hält die Seite - und die App, die darauf läuft - intakt. Sie entscheiden, was als Nächstes passiert: eine Erfolgsmeldung inline anzeigen, die Modal-Ansicht schließen, die Felder zurücksetzen, bei Bedarf programmatisch weiterleiten. Das ist der Unterschied zwischen „der Browser entscheidet" und „Sie entscheiden".

Eine Verbesserung, keine Voraussetzung

Sie müssen sich nicht für einen der beiden Ansätze entscheiden. Lassen Sie die Attribute action und method am <form>-Tag genau so stehen wie bei einem einfachen POST, und fangen Sie das Submit-Ereignis nur dann per JavaScript ab, wenn es verfügbar ist. Lädt ein Skript nicht, stört eine Erweiterung, oder hat ein Besucher JavaScript deaktiviert, funktioniert das Formular trotzdem - es fällt lediglich auf eine normale Seitennavigation zurück statt auf eine Inline-Statusmeldung. Das ist die ganze Idee der progressiven Verbesserung: der Grundfall - ein HTML-Formular, das direkt an https://formhook.app/f/{apiKey} sendet - funktioniert immer für sich allein. JavaScript macht es nur angenehmer, wenn es vorhanden ist.

Ein minimales Beispiel

Kein Framework nötig - das ist das ganze Muster in reinem JavaScript. Es verhindert die Standard-Navigation, sendet die Formulardaten als FormData und zeigt je nach Ergebnis eine Statusmeldung an:

const form = document.querySelector("#contact-form");
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch(form.action, {
    method: "POST",
    body: new FormData(form),
    headers: { Accept: "application/json" },
  });
  if (res.ok) {
    form.reset();
    document.querySelector("#form-status").textContent = "Thanks - we got it.";
  } else {
    document.querySelector("#form-status").textContent = "Something went wrong. Please try again.";
  }
});

JSON anfordern, keine Weiterleitung

Beachten Sie den Header Accept: application/json im obigen Beispiel. Ohne ihn könnte ein Formular-Backend, das auch klassische HTML-Einsendungen bedient, versuchen, den Browser auf eine „Danke"-Seite weiterzuleiten - korrektes Verhalten für ein normales POST, aber nutzlos, wenn Sie es aus fetch() heraus aufrufen. Das Senden von Accept: application/json teilt dem Formhook-Endpunkt mit, dass die Anfrage von JavaScript stammt, sodass er eine JSON-Erfolgs- oder Fehlerantwort statt einer Weiterleitung liefert und Ihr Code wie im Beispiel anhand von res.ok verzweigen kann. Das genaue Anfrageformat finden Sie in der Dokumentation.

Barrierefreiheit nicht vergessen

Eine Statusmeldung per textContent auszutauschen ist für einen Screenreader unsichtbar, solange der Browser nicht angewiesen wird, sie anzukündigen. Fügen Sie dem Statuselement aria-live="polite" hinzu (jenem, das document.querySelector("#form-status") im Beispiel anspricht), und assistive Technologien lesen die Aktualisierung laut vor, sobald sie sich ändert - Erfolg oder Fehler -, ohne dass der Besucher sie selbst finden und erneut fokussieren muss. Es ist ein einziges Attribut, und es macht den Unterschied zwischen einem Formular, das für alle funktioniert, und einem, das Screenreader-Nutzer in dem Moment, in dem JavaScript übernimmt, still und leise ausschließt.

Nichts davon erfordert eine Bibliothek oder ein SDK - ein Formhook-Endpunkt akzeptiert ein einfaches Formular-POST von jeder beliebigen Website, und die obige fetch()-Version ist nur eine optionale progressive Verbesserung obendrauf, keine Voraussetzung. Die vollständige Referenz zu Anfragen und Antworten finden Sie in der Dokumentation, die Grenzen der kostenlosen Stufe unter Preise.

Sie arbeiten mit einem Framework? Die Schritt-für-Schritt-Anleitung für Next.js und Astro finden Sie in den Leitfäden.

Ein funktionierendes Formular in einer Zeile

In der EU gehostet, Einsendungen für immer aufbewahrt, Push-Benachrichtigungen in jeder Stufe.

Kostenlos starten

Keine Kreditkarte · Dokumentation lesen