Barriere­freies

Kontakt­formular

Inhaltsverzeichnis:

Kennst du das? Du suchst ein einfaches Kontaktformular für deine Website. Es soll deine Besucher nicht mit seltsamen Rechenaufgaben nerven und vor allem für alle Menschen bedienbar sein – auch für die, die einen Screenreader nutzen. Sicher und performant wäre natürlich auch nett.

Ich habe einige Formulare in den letzten Jahren kennengelernt. Eigentlich gibt es nicht eines, mit dem ich zu hundert Prozent zufrieden bin, gerade, wenn es zum Thema barrierefeie Bedienung kommt. (Tipp: Das Plugin WS-Form ist grundsätzlich barrierefrei.)

Viele bekannte Plugins sind überladen, langsam oder haben in Sachen Barrierefreiheit erhebliche Lücken. Oftmals werden sensible Daten unsicher gespeichert oder Spam-Schutzmaßnahmen schließen versehentlich menschliche Nutzer aus bzw. sind einfach ineffektiv.

Also habe ich mich hingesetzt und mein eigenes Kontaktformular geschrieben. Ein Formular, das drei Dinge erfüllen muss: Barrierefreiheit, Sicherheit und Respekt der Privatsphäre.

Im Artikel zeige ich dir, wie mein Formular aufgebaut ist, welche Entscheidungen ich warum getroffen habe und wie du es selbst für deine Website nutzen kannst. Klar ist, dieses Formular ist reduziert auf die gängigsten Eingabemöglichkeiten, kann aber grundsätzlich erweitert werden. Und ja, Grundkenntnisse in HTML, CSS und Co. sind erforderlich, man muss aber kein Crack in JS und PHP sein, versprochen.

Teil 1: Das Formular selbst (HTML)

Alles beginnt mit dem, was du siehst: dem HTML-Code des Formulars. Hier war es mir nicht nur wichtig, dass ich es optisch nach meinen Wünschen gestalten kann, sondern dass es für Hilfstechnologien wie Screenreader eine klare Sprache spricht.

• Eindeutige Beschriftungen: Jedes Eingabefeld (Name, E-Mail usw.) ist über ein <label>-Element fest mit seinem Feld verknüpft. Ein Screenreader kann also sagen: „Eingabefeld: Dein Name. Pflichtfeld.“
  
  
• ARIA-Attribute: Ich nutze ARIA (Accessible Rich Internet Applications), um die Benutzerführung zu verbessern. Durch aria-invalid="true" wird dem Screenreader signalisiert, dass eine Eingabe ungültig ist. Dies geschieht dynamisch, ohne dass die Seite neu geladen werden muss. aria-describedby verbindet ein Eingabefeld direkt mit dem zugehörigen Feld für Fehlermeldungen.
  
  
• Präzise Fehlerzuweisung: Jedes Eingabefeld ist durch das aria-describedby-Attribut direkt mit seinem eigenen Fehler-Container (<div id="name_error") verknüpft. Dadurch können Screenreader Nutzern mit Sehbehinderung exakt ansagen, welches Feld einen Fehler enthält und was der konkrete Fehler ist.
  
  
• Dynamisches Feedback: Durch aria-invalid="true" wird dem Screenreader signalisiert, dass eine Eingabe ungültig ist. Dies geschieht dynamisch, ohne dass die Seite neu geladen werden muss.
  
  
• Klare Statusmeldungen: Elemente für Erfolgs- oder Fehlermeldungen sind mit role="alert" oder role="status" ausgezeichnet. Das teilt assistiven Technologien mit, dass eine wichtige Statusänderung stattgefunden hat, die dem Nutzer sofort vorgelesen werden sollte.
  
  
• Lebendige Fehlermeldungen: Die leeren <div>-Container unter jedem Feld haben das Attribut aria-live="polite". Das bedeutet: Wenn hier eine Fehlermeldung per JavaScript eingefügt wird, liest der Screenreader sie vor, ohne den Nutzer abrupt zu unterbrechen.
  
  
• Menschliche Fehlermeldungen: Statt eines generischen ‚‚Fehler im Formular“ kann ich individuelle und hilfreiche Hilfestellungen geben (‚‚Bitte gib mindestens deinen Vornamen ein.“ anstatt ‚‚Feld darf nicht leer sein.“). Das reduziert die Frustration der Nutzer erheblich.
  
  
• Keine Browser-Validierung: Mit novalidate im <form>-Tag deaktiviere ich die Standard-Fehlermeldungen des Browsers. Das gibt mir die volle Kontrolle über das Erscheinungsbild und die Zugänglichkeit der Fehlermeldungen, die ich per JavaScript steuere.
  
  
• weitere individuelle Anpassungsmöglichkeiten: Auch der Senden-Button hat ein aria-label, das Nutzern von Screenreadern einen kleinen Hinweis zur Navigation nach dem Absenden gibt – aufgrund des genutzten Honeypot-Feldes von WP Armour kommt es zu einem leeren Tabsprung. Dies kann Nutzer von Screenreadern irritieren.

Teil 2: Intelligente Prüfung im Browser (JavaScript)

Bevor meine Anfrage überhaupt an den Server gesendet wird, prüft eine kleine JavaScript-Datei im Hintergrund meine Eingaben. Das nennt man clientseitige Validierung.

Was passiert hier genau?

1. Sofortiges Feedback: Gebe ich eine ungültige E-Mail-Adresse ein, erscheint die Fehlermeldung sofort. Ich muss nicht erst warten, bis die Seite neu lädt. Das spart Zeit und Nerven.
   
   
2. Fehler verschwinden beim Tippen: Sobald ich anfange ein fehlerhaftes Feld zu korrigieren, verschwindet die Fehlermeldung automatisch. Das ist intuitiv und weniger nervend.
   
   
3. Fokus auf das Problem: Gibt es beim Absenden einen Fehler, springt der Cursor automatisch zum ersten fehlerhaften Feld. So weiß ich sofort, wo ich weitermachen musst.
   
   
4. Ein einfacher, zusätzlicher Spam-Trick: Ich habe eine simple Zeitfalle eingebaut. Das Skript misst die Zeit zwischen dem Laden des Formulars und dem Klick auf „Senden“. Braucht jemand weniger als 8 Sekunden, ist es höchstwahrscheinlich ein Bot oder ein teilautomatisierter Eingabeversuch. In diesem Fall wird der Versand leise abgebrochen, ohne den Bot darauf hinzuweisen.

Teil 3: Die sichere zentrale – Was im Hintergrund passiert (PHP)

Wenn ich auf „Senden“ klicke, beginnt die eigentliche Arbeit, um meine Nachricht sicher zu verarbeiten und zu versenden.

1. Der Manager (contact-form-handler.php): Diese Datei ist das Gehirn des Ganzen. Sie nimmt meine Daten entgegen, bereinigt sie (trim, strip_tags) und validiert sie auf dem Server erneut. Grundregel: Traue niemals Daten, die vom Browser kommen.
   
   
2. Der Postbote (PHPMailer): Für den E-Mail-Versand nutze ich nicht die einfache mail()-Funktion von PHP, die oft unzuverlässig ist. Stattdessen setze ich auf PHPMailer, eine erprobte und sehr robuste Bibliothek. Sie kümmert sich um die korrekte Formatierung und den Versand per SMTP, was sicherstellt, dass die E-Mails auch wirklich ankommen und nicht im Spam-Ordner landen.
   
   
3. Der Tresor für Zugangsdaten (wp-config.php): Das ist einer der wichtigsten Sicherheitspunkte: Die Zugangsdaten für den E-Mail-Versand (Server, Benutzername, Passwort) stehen nicht im Code des Formulars oder im Theme. Stattdessen habe ich sie als Konstanten (CUSTOM_SMTP_HOST etc.) in die wp-config.php-Datei von WordPress ausgelagert. Diese Datei liegt außerhalb der öffentlich zugänglichen Ordner und ist der sicherste Ort für solche Geheimnisse. Mein PHP-Skript lädt diese Konstanten sicher beim Versand.

Teil 4: der unsichtbare Spam-Schutz

Niemand mag Spam. Aber noch weniger mag man nervige CAPTCHAs („Klicke alle Ampeln an“). Zumal die verschiedenen Varianten zumeist nicht barrierefrei bedienbar sind. Deshalb nutze ich einen cleveren und für Menschen unsichtbaren Schutz: einen Honeypot (Honigtopf).

In Zusammenarbeit mit dem Entwickler des bekannten Sicherheits-Plugins WP Armour habe ich dessen Logik integriert. Im Formular befindet sich ein verstecktes Feld (wpa_initiator). Wir sehen und befüllen dieses Feld nicht. Spam-Bots, die automatisiert alle Felder ausfüllen die gefunden werden, tappen in die Falle.

In der contact-form-handler.php prüft die Funktion wpa_check_is_spam() dieses Feld. Ist es ausgefüllt, weiß das Skript: Das ist Spam! Die Anfrage wird sofort blockiert. Einfach, effektiv und völlig barrierefrei.

Teil 5: Datenschutz – Was nicht gespeichert wird, ist am sichersten

Eine meiner wichtigsten Entscheidungen: Dieses Kontaktformular speichert keine Anfragen in der WordPress-Datenbank. Nachrichten werden als E-Mail an mich gesendet und danach vom Server „vergessen“. Das ist das Prinzip der Datensparsamkeit aus der DSGVO in Reinform. Es gibt keine Datenbankeinträge, die gehackt, missbraucht oder kompromittiert werden könnten.

Teil 6: Wie die ganze Seite geschützt wird

Ein sicheres Formular allein reicht nicht. Die ganze Website sollte grundsätzlich sicher sein. Dafür nutze ich unter anderem mehrere Schutzschichten in meiner .htaccess-Datei:

• 8G-Firewall: Dies ist ein mächtiges Set von Regeln von Perishable Press. Es blockiert eine riesige Liste bekannter bösartiger Anfragen, Angriffs-URL-Muster und Spam-Bots, bevor sie WordPress überhaupt erreichen.
  
  
• Zugriffsbeschränkungen: Wichtige Dateien wie wp-config.php, .htaccess oder die install.php sind für den Zugriff von außen komplett gesperrt.
  
  
• HTTP Security Headers: Ich habe eine ganze Reihe von Headern aktiviert, die dem Browser strenge Sicherheitsregeln vorgeben:
  
  
  • Strict-Transport-Security (HSTS): Zwingt den Browser, immer eine sichere HTTPS-Verbindung zu nutzen.
    
    
  • X-Frame-Options: Verhindert, dass meine Seite in fremden iframes eingebettet wird (Schutz vor Clickjacking).
    
    
  • Content-Security-Policy (CSP): Der stärkste Schutz. Die CSP ist wie ein Türsteher, der dem Browser eine exakte Liste gibt, welche Skripte, Stile, Bilder, Schriften und andere Ressourcen von welchen Quellen geladen werden dürfen. Alles andere wird blockiert. Das macht Cross-Site-Scripting (XSS)-Angriffe extrem schwierig. Zwar musste ich für eine externe Anwendung unsafe-inline für Skripte und Stile erlauben, was nicht ideal ist, aber durch die Kombination mit allen anderen Maßnahmen ist das Risiko minimiert.

In einem weiteren Beitrag werde ich mich mit dem Thema Sicherheit intensiver auseinandersetzen. Und dir zeigen, welche Maßnahmen ich ergreife, die auch du ohne tiefere Kenntnisse anwenden kannst.

Zusammenfassung

Mein Ziel war es, zu beweisen, dass man keine Kompromisse machen muss. Man kann ein Formular nutzen, das zugleich barrierefrei, benutzerfreundlich, datenschutzkonform und sicher ist.

Ein Vorteil gegenüber großen Formular-Plugins:

Schnellere Ladezeiten: Der Code ist leicht und zielgerichtet. Das führt zu einer besseren Ladezeit der Kontaktseite, was sich positiv auf die Core Web Vitals von Google auswirkt. Man lädt nur das, was wirklich gebraucht wird. Insgesamt sind das an HTML 2,74 kb und an CSS 1,7 kb.

Kein unnötiger Ballast: Diese Lösung lädt keine riesigen, externen CSS- und JavaScript-Dateien, die für Dutzende von Anwendungsfällen gebaut wurden, die man gar nicht benötigt. Was natürlich auch die Sicherheit erhöht.

Ich habe mehrere Sicherheitsmechanismen implementiert, die über Standard-Captchas hinausgehen.

Serverseitige Doppelprüfung: Neben der Prüfung im Browser werden alle Daten auf dem Server in der contact-form-handler.php nochmals validiert. Dies ist ein Schutz, den viele simple Formulare vernachlässigen. Selbst wenn jemand das JavaScript manipuliert, greift diese zweite Sicherheitsstufe.

Honeypot-Feld: Das für Nutzer unsichtbare Feld website_check ist eine effektive und unsichtbare Falle für die meisten automatisierten Spam-Bots.

Time-Gate: Die Zeitverzögerung verhindert, dass Bots das Formular in Millisekunden abschicken können.

Vollständige Kontrolle und Unabhängigkeit

Keine Abhängigkeit von Dritten: Ich bin nicht auf die Updates eines Plugin-Entwicklers angewiesen. Ich muss mir keine Sorgen machen, dass ein Update das Formular lahmlegt oder dass das Plugin irgendwann nicht mehr weiterentwickelt wird.

Wichtig: Abhängigkeiten aktuell halten. Alles im Netz verändert sich ständig. Also muss auch ich ab und an schauen, ob die Entwickler der PHPMailer-Bibliothek Anpassungen vorgenommen haben. Zum Beispiel wenn mein Hoster die PHP-Version des Servers aktualisiert hat.

Der aktuelle Code verwendet sehr grundlegende und stabile PHP-Funktionen (trim, strip_tags, filter_var), die wahrscheinlich noch sehr lange unterstützt werden. Es ist dennoch ein Muss, nach einem PHP-Update kurz zu testen, ob das Formular funktioniert.

Keine Fremd-Code-Sicherheitslücken: Die Sicherheit liegt vollständig in meiner Hand. Ich schleppe keine potenziellen Schwachstellen aus einem aufgeblähten Plugin mit, das Funktionen enthält, die ich nie auditieren würde.

Design-Freiheit: Das Formular kann problemlos an jedes bestehende Corporate Design angepasst werden, ohne durch die CSS-Regeln eines Plugins eingeschränkt zu sein.

Weil ich der Meinung bin, dass das Web mehr solcher Lösungen braucht, stelle ich dir das Kontaktformular zur Verfügung. Ich möchte dich ermutigen, es zu nutzen, anzupassen und so deine eigene Website ein Stück besser und zugänglicher für alle zu machen.

Kontaktformular herunterladen: