Contact Form

Ein Kontaktformular mit allen gängigen Eingabefeldern und Formularelementen.

Vorschau

patterns/contact-form-static.php


patterns/contact-form-two-columns-static.php

Figma

Hinweise

  • Beschrifte alle Felder verständlich und verstecke die Beschriftung nicht während der Eingabe (WCAG SC 3.3.2 Öffnet in neuem Tab)
  • Kennzeichne Pflichtfelder bzw. weise darauf hin, wenn alle Felder Pflicht oder Nicht-Pflicht sind.
  • Vermeide Fehleingaben im Voraus, z.B. indem das Formular bei fehlerhafter Eingabe nicht verschickt werden kann oder Felder live validiert werden.
  • Wenn es zu Fehleingaben kommt, verfasse hilfreiche Fehlermeldungen – im Idealfall im direkten Kontext des fehlerhaften Feldes – die dabei unterstützen, den Fehler zu beheben (WCAG SC 3.3.3 Öffnet in neuem Tab)
  • Vermeide Captchas und Rätselaufgaben, denn diese sind in den allermeisten Fällen ein Problem für die barrierefreie Nutzung (WCAG SC 1.1.1 Öffnet in neuem Tab + SC 3.3.8 Öffnet in neuem Tab). Alternativen können im Hintergrund ausgeführte Abfragen sein, bei denen keine Interaktion notwendig ist.
  • Wenn Drittanbieter zur Validierung oder Absicherung integriert werden, kann dies datenschutzrechtlich relevant sein.