Formulare

So kommen Formulare auf die Seite

Formulare entstehen im Formulargenerator (Layout → Formulare) und kommen mit dem Inhaltselement „Formular“ auf die Seite. Anmelden, Registrieren, Passwort, Newsletter und Suche sind Module und sehen genauso aus.

Ein Formular ist ein Raster: Jedes Feld steht in einer eigenen Zeile, außer es bekommt im Style Manager eine Breite. Raster- und HTML-Felder für Spalten braucht es nicht mehr. Optionsfelder und Kästchen gibt es als Liste oder als Kacheln.

Die Beispiele hier senden und speichern nichts.

Feldtypen – so sieht jedes Feld aus

So sieht es aus: Beschriftung über dem Feld, Rahmen rundum; beim Anklicken oder mit der Tab-Taste ein Rahmen in Hauptfarbe 1 mit hellem Ring. Kästchen und Optionsfelder sind die des Browsers in Hauptfarbe 1.

Wofür: jedes Formular – Kontakt, Anfrage, Rückruf.

Einstellung: Feldtyp im Formulargenerator; die Prüfung (E-Mail, Telefon, Numerisch) wählt die passende Tastatur auf dem Handy.

Kästchen (Checkbox-Menü)
Optionsfelder (Radio-Button-Menü)

Erklärung: ein Text zwischen den Feldern, etwa ein Hinweis zum Datenschutz.

Breite – Felder nebeneinander

So sieht es aus: Felder, deren Breiten zusammen eine Zeile ergeben, stehen nebeneinander; auf dem Handy jedes in einer eigenen Zeile.

Wofür: Name und Firma, E-Mail und Telefon, Straße, PLZ und Ort.

Einstellung: Feld → Style Manager → Formularfeld → Breite: halbe Zeile, ein Drittel, zwei Drittel, ein Viertel, drei Viertel, schmal (ein Sechstel). Ohne Wahl ganze Zeile.

Darstellung „Kacheln“

So sieht es aus: jede Option als große, anklickbare Fläche; die gewählte mit Rahmen und heller Fläche.

Wofür: wenige, wichtige Optionen – „Worum geht es?“ statt einer Auswahlliste.

Einstellung: Optionsfelder oder Kästchen → Style Manager → Formularfeld → Darstellung: Kacheln; mit einer Breite kombinierbar.

Worum geht es?
Trennen (Kästchen als Kacheln, halbe Zeile)
Fügen (Kästchen als Kacheln, halbe Zeile)

Abschnitte mit Zwischenüberschrift

So sieht es aus: eine Zwischenüberschrift je Abschnitt, die Breiten wirken darin genauso.

Wofür: längere Formulare – Anmeldung, Bewerbung, Registrierung.

Einstellung: Feldtyp „Fieldset-Anfang“ (die Beschriftung ist die Überschrift) und „Fieldset-Ende“.

Ihre Daten
Ihr Anliegen

Pflichtfelder und Fehlermeldungen

So sieht es aus: roter Stern hinter der Beschriftung. Fehlt etwas, steht oben eine Übersicht mit Links zu den Feldern, am Feld der Text in Rot darunter. Zum Ausprobieren: ohne Eingaben absenden.

Wofür: was zur Antwort nötig ist – meist nur E-Mail und Einverständnis.

Einstellung: Feld → „Pflichtfeld“. Prüft der Browser schon vorher (Standard), erscheint seine eigene Meldung; dieses Beispiel hat „HTML5-Validierung deaktivieren“ gesetzt, damit die Meldungen von Contao zu sehen sind.

Formular-Module: Suche und Anmelden

So sieht es aus: dieselben Felder und Buttons wie im Formulargenerator. Die Suche steht in einer Zeile.

Wofür: Suche im Kopf oder auf der Suchseite, Anmelden für geschützte Bereiche; ebenso Registrieren, Passwort vergessen, Newsletter.

Einstellung: keine – die Module übernehmen das Aussehen von selbst.