Kontaktformular mit Javascript und fetch

[Oliver77]

Hallo,
ich habe für einen Freund eine kleine HTML-Seite erstellt und ein Kontaktformular basierend auf Javascript gebaut.
Hier stelle ich den Code zur Verfügung:

Kontakformular

Vielleicht nutzt es ja dem einen oder anderen!

 

[tk1234]

Von dem Kontaktformular kann ich nur abraten:

• das Formular ist unbedienbar da es sie Barrierefreiheit mit Füßen tritt: keines der Felder hat eine Beschriftung. Ja, es gibt label-Elemente - da denen aber die for-Attribute (und den Eingabefeldern die id-Attribute) fehlen, haben sie kein Funktion, der Browser kann sie so nicht zuordnen. Zudem lassen sich Fehler- und Erfolgsmeldungen nicht schließen: div ist kein interaktives Element und damit per Tastaturbedienung nicht erreichbar - solche Elemente dürfen nicht klickbar gemacht werden, hier muss ein Button verwendet werden. Zudem wäre es nicht schlecht wenn sich das Fenster (sofern überhaupt nötig) nicht nur per Klick auf #closer bzw. #closer2 (warum überhaupt der Unterschied?) schließen lassen würden sondern auch per Klick außerhalb des Fensters oder per Esc-Taste.
• es gibt reichlich Möglichkeiten Formularfelder bereits mit Browserhilfsmitteln zu validieren (z.B. required-Attribute oder email oder tel als Wert der type-Attribute), warum werden die hier nicht genutzt? Die browsereigenen Hinweise auf Fehler sind wesentlich sinnvoller als die pauschale Meldung "Bitte Pflichtfelder ausfüllen!" unabhängig davon wo das Problem besteht. Eigene Dinge lassen sich dann auch noch implementieren ohne die ewig lange Bedingung: checkValidity() existiert.
• Warum überhaupt Javascript? Ohne Javascript funktioniert das Formular überhaupt nicht. Nein, Seiten müssen nicht zwingend ohne Javascript funktionieren, der Benutzer darf da aber nichts davon merken. In dem Fall wird die Seite ohne Javascript einfach abgeschickt und kommentarlos wieder das leere Formular aufgerufen. Zwingend Javascript ist hier überhaupt nicht notwendig, das Formular kann auch direkt an das PHP-Script geschickt werden.
• In der PHP-Datei fehlen die Prüfungen ob alle Felder ausgefüllt wurden. So lässt sich das Script mit beliebigen Daten bombardieren welche alle brav an die Empfängeradresse geschickt werden - es wird auch nicht überprüft ob die Daten vom eigenen Formular kommen (Stichwort CSRF).
• Für den Mailversand eignet sich die mail-Funktion nicht. Ja, es mag oft funktionieren, sicherer/zuverlässiger wäre aber eine Mailerklasse.
• die verwendeten E-Mailadressen im Script gehören zu registrierten Domains, hier sollte example.com oder eine andere dafür reservierte Domain verwendet werden
• Im CSS wird überall die falsche Einheit Pixel verwendet.
• Ob das ausgeblendete input-Feld ausreicht dass Spamer ihren Müll nicht loswerden sei mal dahingestellt.

Die verlinkte Seite mit dem Kontaktformular hat übrigens auch das Problem dass die "Buttons" zum Auswählen des Codes keine Funktion haben da das auch nur div sind - und die animierten Pfeile vor den Links finde ich extrem nervig.