HTML-Formular sendet nicht ab? Fünf Schalter, jeder nachgestellt

Zuerst die Konsole öffnen

„Sendet nicht ab“ hat eine präzise Bedeutung, die Sie zuerst prüfen sollten: DevTools öffnen, den Network-Tab beobachten, auf Senden klicken. Erscheint eine Anfrage, sendet Ihr Formular, und das Problem liegt serverseitig oder in der Antwortverarbeitung, also in einem anderen Leitfaden. Erscheint keine Anfrage, ist einer dieser fünf die Ursache:

Der Button sendet gar nichts

Ein <button> in einem Formular sendet es standardmäßig ab, aber <button type="button"> tut das nie; er existiert für reine JavaScript-Buttons und macht allein gar nichts. Das Attribut kommt über Komponentenbibliotheken und Copy-Paste in den Code, und das Ergebnis ist ein perfekt gestylter Button ohne Verhalten und ohne Konsolenzeile. Die Lösung: type="submit", oder das Attribut schlicht entfernen.

Dasselbe stumme Verhalten erzeugt ein Button außerhalb des <form>-Tags, häufig nach einem Layout-Umbau. HTML hat dafür eine Lösung ohne Markup-Verschieben: dem Formular eine id geben und dem Button form="that-id", und die Verbindung steht wieder. Ein schneller Test für beide Fälle: Enter in einem Textfeld drücken. Sendet Enter und der Button nicht, ist der Button das Problem.

Ein Pflichtfeld, das niemand sieht

Die Browser-Validierung läuft vor dem Senden, und scheitert sie an einem Feld, fokussiert der Browser dieses Feld, um die Meldung zu zeigen. Liegt das Feld in display:none, lässt es sich nicht fokussieren, also bricht der Browser das ganze Senden ab und schreibt den einzigen Hinweis in die Konsole. In unserer Nachstellung lautete Chromes exakter Wortlaut: “An invalid form control with name='hidden-required' is not focusable.” Die Seite selbst zeigte gar nichts.

Echte Websites trifft das über mehrstufige Formulare (Schritt zwei ist versteckt, während Schritt eins sendet), eingeklappte Bereiche und hastig versteckte Felder, die ihr required behalten haben. Entfernen Sie required von Feldern, die Sie verstecken, deaktivieren Sie sie, solange sie versteckt sind (deaktivierte Felder überspringen die Validierung), oder setzen Sie als grobes Werkzeug novalidate auf das Formular und validieren Sie im eigenen Code.

Ein Feld namens submit

Jedes Formularelement wird unter seinem Namen zu einer Eigenschaft des Formular-Objekts, und ein Feld namens submit ersetzt die submit()-Methode des Formulars durch sich selbst. Jedes Skript, das danach form.submit() aufruft, auch fremde, wirft einen Fehler. Unsere Testseite warf beim ersten Aufruf TypeError: document.getElementById(...).submit is not a function.

Der Klick auf den Button kann dabei weiter funktionieren, was den Defekt zufällig aussehen lässt: Handklicks senden, Skript-Sendungen stürzen ab. Benennen Sie das Feld um (submit-button, oder irgendein Name, der keine Formular-Eigenschaft ist; dasselbe gilt für Felder namens action oder method), und die Methode ist zurück. Die FAQ von Contact Form 7 führt eine ganze Liste von Namen, die WordPress zusätzlich reserviert, weshalb seine Standardfelder das Präfix your- tragen.

Deaktivierte Buttons und Handler, die das Ereignis schlucken

Ein Senden-Button mit disabled ist per Definition tot, und die subtile Variante ist ein Skript, das den Button gegen Doppelklicks deaktiviert und nach einem Validierungsfehler nicht wieder aktiviert, womit der zweite Versuch unmöglich wird. Erzeugt der Klick weder Fokusrahmen noch Konsolenzeile, inspizieren Sie das Button-Element und suchen Sie das Attribut.

Die JavaScript-Variante von „nichts passiert“ ist ein Submit-Handler, der event.preventDefault() aufruft und sein eigenes Senden nie zu Ende bringt: ein Tippfehler vor dem fetch, ein gescheiterter Import, eine Bedingung mit frühem Return. Das Standardverhalten des Formulars ist abgeschaltet, der Ersatz läuft nie, und der Besucher sieht gar nichts. Die Konsole zeigt meist den geworfenen Fehler; scheitert der Handler still, bestätigt ein vorübergehendes console.log in seiner ersten Zeile, dass er überhaupt läuft. Und nach jeder dieser Reparaturen: ausgeloggt und am Seitencache vorbei testen, denn ein gecachtes Dokument liefert das kaputte Skript noch lange nach der Korrektur aus.

Ein Formular mit weniger Angriffsfläche

Drei der fünf Schalter leben in eigenem JavaScript oder in verrutschtem Markup. Ein schlichtes HTML-Formular, das an ein Backend sendet, braucht beides nicht: kein Handler, kein fetch, keine Reaktivierungslogik, nur action, method="POST" und benannte Felder. Bei Formgong legt der Endpunkt jede Einsendung zusätzlich in einen Posteingang im Dashboard und liefert an E-Mail und Telegram; die HTML-Anleitung ist eine Seite Einrichtung, und unser Formular-Check sagt Ihnen, ob ein bestehendes Formular überhaupt etwas sendet. Der kostenlose Tarif nimmt 1.000 Einsendungen im Monat.

Alles in einem Konto. Feedback erwünscht

Welcher der fünf Schalter war es bei Ihnen, oder zeigte der Network-Tab etwas, das diese Seite nicht abdeckt?

Mit einem Formgong-Konto bekommen Sie neben dem Kontaktformular, das an E-Mail und Telegram sendet, auch kostenlose Website-Vorlagen (auf Englisch), in denen das Formular schon angeschlossen ist, einen KI-Hilfe-Chat, der Fragen Ihrer Besucher aus Ihren eigenen Seiten beantwortet, und Kundenbewertungen zum Sammeln und Anzeigen. Anfragen landen in einem Posteingang. Jedes dieser Produkte hat einen kostenlosen Tarif.

Fehlt Ihnen auf dieser Seite etwas, oder ist etwas unklar? Schreiben Sie uns an support@formgong.com. Wir lesen jede Nachricht und verbessern die Seite danach.