Der Nutzer klickt auf Absenden. Was passiert dann? Der Browser sendet die Daten an den Server. Der Server verarbeitet sie. Und dann? Wird die Seite neu geladen? Erscheint etwas auf der Seite? Wird der Nutzer irgendwohin weitergeleitet?
Die Verarbeitung von Einsendungen ist die Brücke zwischen Frontend und Backend. Machst du es falsch, ist der Nutzer verwirrt. Machst du es richtig, fühlt sich alles reibungslos und gewollt an. Dieser Artikel zeigt die verschiedenen Wege, Formular-Einsendungen zu verarbeiten.
Klassisches Absenden von Formularen
Beim klassischen Absenden sendet der Browser die Formulardaten mit den Attributen action und method des Formulars an den Server.
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Klickt der Nutzer auf die Schaltfläche, kodiert der Browser die Formulardaten und sendet sie an /submit. Der Server verarbeitet sie und antwortet mit einer neuen Seite. Der Browser lädt diese Seite. Der Nutzer sieht eine neue URL und neue Inhalte.
Das klassische Absenden ist einfach, funktioniert überall und ohne JavaScript. Der größte Nachteil: Die Seite wird neu geladen. Das fühlt sich langsam an, auch wenn es das nicht ist, der Nutzer verliert seine Scrollposition und die Formularfelder werden geleert.
Absenden von Formularen mit Weiterleitungen
Nachdem der Server ein Formular verarbeitet hat, leitet er den Nutzer meist auf eine Erfolgsseite oder zurück zum Formular weiter.
Nutze auf dem Server nach der Verarbeitung des Formulars return redirect('/thank-you'). Das sendet eine HTTP-303-Weiterleitung, sodass der Browser ihr folgt und die Seite /thank-you lädt, auf der der Nutzer neue Inhalte unter einer neuen URL sieht. Der Vorteil: Der Nutzer weiß, dass das Formular verarbeitet wurde, und eine neue Seite macht klar, dass etwas passiert ist. Der Nachteil: Die Seite wird neu geladen und es sind zwei Anfragen an den Server nötig (eine fürs Absenden, eine für das Weiterleitungsziel), wodurch sich das Erlebnis langsamer anfühlt als nötig.
Absenden von Formularen per AJAX
Mit AJAX (Asynchronous JavaScript and XML) sendest du Formulardaten ohne Neuladen der Seite, mit form.addEventListener('submit', async (e) => { e.preventDefault(); const data = new FormData(form); const response = await _blocked_('/submit', { method: 'POST', body: data }); if (response.ok) { showMessage('Form submitted successfully'); form.reset(); } });. Der Browser sendet die Formulardaten mit _blocked_, der Server verarbeitet sie und antwortet, und das JavaScript empfängt die Antwort und aktualisiert die Seite, ohne Neuladen und ohne Weiterleitung. Der Nutzer bleibt auf derselben Seite, sieht aber eine Bestätigung. Der Vorteil: Es ist schnell, bietet ein reibungsloses Erlebnis, lädt die Seite nicht neu und gibt dir volle Kontrolle darüber, was danach passiert. Der Nachteil: Es braucht JavaScript. Schlägt JavaScript fehl, wird das Formular nicht abgeschickt, der Verlauf wird nicht aktualisiert (die URL bleibt gleich), und du musst die gesamte Rückmeldung an den Nutzer selbst übernehmen.
Progressive Enhancement mit AJAX
Progressive Enhancement bedeutet: Das Formular funktioniert ohne JavaScript, aber mit JavaScript besser. Beginne mit einem klassischen Formular, das ohne JavaScript funktioniert: Es wird abgeschickt und die Seite leitet auf eine Dankesseite weiter. Ist JavaScript verfügbar, fange das Absende-Ereignis mit addEventListener ab, mit if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); }, um stattdessen per AJAX zu senden und eine Nachricht auf derselben Seite zu zeigen. Jetzt funktioniert das Formular in beiden Fällen. Mit JavaScript wird es per AJAX abgeschickt und der Nutzer bleibt auf der Seite. Ohne JavaScript wird es klassisch abgeschickt und weitergeleitet. Der Vorteil: Das Formular funktioniert für alle, Nutzer mit JavaScript bekommen das reibungslose Erlebnis und Nutzer ohne JavaScript können das Formular trotzdem nutzen. Der Nachteil: mehr Code, weil du beide Wege pflegen musst.
Fehler beim Absenden behandeln
Lehnt der Server eine Einsendung ab (Validierung schlägt fehl, Datenbankfehler usw.), hast du zwei Ansätze. Beim klassischen Absenden rendert der Server das Formular mit Fehlermeldungen neu und zeigt sie dem Nutzer an. Beim Absenden per AJAX antwortet der Server mit einem Fehlerstatuscode (400, 422) und Fehlermeldungen, und das JavaScript zeigt die Fehler auf der Seite an, mit _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); });. Zeige Fehler immer neben den Feldern an, die sie verursacht haben, und verstecke sie nicht in einer Zusammenfassung, damit der Nutzer genau sieht, was schiefgelaufen ist und wo er es korrigieren muss.
Ladezustände behandeln
Wird das Formular abgeschickt, deaktiviere die Absende-Schaltfläche, damit der Nutzer nicht zweimal klickt, und zeige einen Ladekreis oder eine Meldung, mit form.addEventListener('submit', async (e) => { e.preventDefault(); button.disabled = true; button.textContent = 'Sending...'; const response = await _blocked_('/submit', { method: 'POST', body: data }); button.disabled = false; button.textContent = 'Send'; });. Deaktiviere die Schaltfläche sofort, denn dauert die Anfrage 5 Sekunden, klickt der Nutzer vielleicht erneut, weil er denkt, es habe nicht funktioniert.
Was nach erfolgreichem Absenden zu tun ist
Nach erfolgreichem Absenden hast du mehrere Optionen. Du kannst die Formularfelder leeren, eine Dankesnachricht zeigen, auf eine Dankesseite weiterleiten, dem Nutzer eine E-Mail senden, ihn zur vorherigen Seite zurückbringen oder auf dem Formular bleiben und ihn erneut absenden lassen. Wähle je nach Zweck deines Formulars. Ein Kontaktformular sollte eine Dankesnachricht zeigen, ein Buchungsformular auf die Buchungsbestätigung weiterleiten und eine Newsletter-Anmeldung den Nutzer zur Seite zurückbringen, auf der er war.
Wie WEMASY Formular-Einsendungen verarbeitet
WEMASY-Formulare unterstützen sowohl klassisches Absenden als auch AJAX. Lege fest, was nach dem Absenden passiert: eine Nachricht anzeigen, auf eine URL weiterleiten oder eine E-Mail-Benachrichtigung senden. WEMASY validiert sowohl im Client als auch auf dem Server.
Die Optionen zum Absenden von Formularen findest du in deinem WEMASY-Tarif.