Forms

Formulare können aus fünf Elementen bestehen. Diese können kombiniert werden, je nach Bedarf:

  • Überschrift
  • Eingabefeld
  • Dropdown
  • Re-captcha checkbox
  • Button/Schlatfläche
Druck

Beispiel für Kontaktformular

example contact form.jpg
Die Elemente sind vertikal nach Themen gruppiert, zum Beispiel:
a. Überschrift und Unterüberschrift des Formulars
b. Thema und Nachricht
c. Kontaktdetails
d. Beispiel für einen Fehlerzustand eines Eingabefeldes
e. Kontrollkästchen für erneutes Captcha
f. Reset-Taste und Submit-Taste

Eingabefelder können auch horizontal gruppiert werden, um verwandte Daten zu identifizieren, z. Straße und Hausnummer oder Postleitzahl und Ort. Das gesamte Formular umfasst 8 Spalten, die in den drei größten Ansichtsfenstern zentriert sind.
Druck

Eingabefeld

input field.jpg
Das Eingabefeld ist in 3 Größen erhältlich:
a. Groß (Größe L, 8 Spalten)
b. Medium (Größe S, 4 Spalten)
e. Klein (Größe XS, 3 Spalten)
Mittlere und kleine Eingabefelder können miteinander kombiniert werden, z. zwei mittlere Felder oder ein mittleres und ein kleines Feld in einer Reihe (siehe Beispielformular).

Jedes Eingabefeld hat drei Zustände:
a. Standard
b. Ausgefüllt
d. Error
c. Es kann mit einem Titel und einem zusätzlichen Hinweis kombiniert werden, um das Thema des Feldes im Detail zu erklären.
Druck

Dropdown

dropdown.jpg
a. Im Ausgangszustand ist die Dropdown-Liste geschlossen, der Pfeil zeigt nach unten.

Die Dropdown-Liste kann entweder für verwendet werden
b. einzelne Wahl
c. oder Mehrfachauswahl

Im aktiven Zustand zeigt der Pfeil nach oben, die Maus über der Farbe ist dunkelgrau und ausgewählte Elemente werden in Unternehmensfarbe angezeigt. Solange nichts ausgewählt ist, wird der Button der Multiple-Choice-Version (siehe c) inaktiv in grau angezeigt. Sobald der Benutzer ein Element auswählt, ändert sich die Schaltfläche in die Unternehmensfarbe der Site.
Wenn mehr als sechs Elemente angezeigt werden sollen, wird rechts eine Bildlaufleiste eingefügt.
Druck

Buttons/Schaltflächen

buttons.jpg
Schaltflächen werden rechtsbündig eingefügt, um den Lesefluss zu unterstützen.

a. Die Schaltfläche zum Zurücksetzen bleibt inaktiv, solange im Formular nichts bearbeitet wird.
b. Die Schaltfläche "Senden" wird in der Symbolversion verwendet, um zu verdeutlichen, dass dies der Hauptaktionsaufruf ist.

responsive behaviour.jpg
Links: Die Kontaktkachel verhält sich in allen Versionen für die drei größten Ansichtsfenster gleich.

Rechts: Nur das kleinste Ansichtsfenster zeigt es in einer Breite von 12 Spalten an.

Verwandte Themen

 

Kontakt und Feedback

Das Team Brand Consultancy berät Sie gerne bei Fragen: Kontakt.
Wir freuen uns über ein Feedback zum Brand Portal.