Regios Formulare

Dieser Styleguide zeigt dir jeden Baustein unserer Formulare: Farben, Schrift, Felder, Karten, Buttons und mehr. Wenn du dich an diese Bausteine hältst, sieht dein Formular genauso aus wie die Formulare von Regios.

Das komplette CSS gibt es als fertige Datei zum Download. Du bindest sie in deine Seite ein und verwendest die dokumentierten Klassen, ganz ohne Framework.

Formular CSS herunterladen Schriften herunterladen

Die Schriften Gilroy und Raleway lädt das CSS automatisch vom Regios CDN. Zum Selberhosten findest du sie unter /download/fonts.

Farben

Alle Farben stehen im CSS als Variablen auf :root bereit. Formulare stehen immer auf lila Hintergrund, Grün ist der Akzent für Aktionen, Fokus und Erfolg.

Lila

#9C69FF

--regios-purple

Grün

#70FF4D

--regios-green

Weiß

#FEF9EB

--regios-white

Gelb

#F8C23A

--regios-yellow

Schwarz

#626262

--regios-black

#7B4FD9

--regios-purple-dark

#B78FFF

--regios-purple-light

#5ACC3D

--regios-green-dark

#8FFF70

--regios-green-light

#374151

--regios-gray-dark

Variable	Beschreibung	Verwendung
`--regios-purple`	Lila, die Hauptfarbe der Formulare	Hintergrund der ganzen Formularseite
`--regios-green`	Leuchtendes Grün	Buttons, Fokusring, Haken, Fortschritt, gültige Eingaben
`--regios-white`	Warmes Weiß mit Cremeton	Modals und helle Flächen, nie reines Weiß für Flächen
`--regios-black`	Dunkles Grau statt reinem Schwarz	Text auf hellen Flächen
`--regios-purple-dark`	Dunkleres Lila	Optionen in Selects, Hover auf Links

Schrift

Überschriften stehen in Gilroy, fett und in Großbuchstaben. Alles andere steht in Raleway. Beide Schriften lädt das CSS automatisch vom Regios CDN.

Jetzt Mitmachen

Wähle dein Produkt

Genossenschaftsanteile

Fließtext in Raleway. Er ist gut lesbar, freundlich und zurückhaltend.

Element	Beschreibung	Verwendung
`h1`	Gilroy 800, Großbuchstaben, 1.5rem, ab 768px 1.875rem, weiß	Titel der Formularseite, einmal pro Seite
`h2`	Gilroy 800, Großbuchstaben, 1.25rem, weiß	Titel eines Schritts oder Abschnitts
`h3`	Gilroy 800, Großbuchstaben, 1.125rem, weiß	Titel in Karten
`.text-green`	Färbt einzelne Wörter grün	Hebt ein Wort in der Überschrift hervor
Fließtext	Raleway, 1rem, Zeilenhöhe 1.4	Beschreibungen, Labels, Hinweise

<h1>Jetzt <span class="text-green">Mitmachen</span></h1>
<h2>Wähle dein <span class="text-green">Produkt</span></h2>
<h3>Genossenschaftsanteile</h3>
<p>Fließtext in Raleway, Schriftschnitt light oder regular.</p>

Seitenrahmen

Jedes Regios Formular steht auf einer lila Seite mit einem zentrierten Container von maximal 48rem Breite. Die Klasse .regios-form-page liefert den Rahmen, darin sind alle Felder automatisch im dunklen Stil.

Jetzt Mitmachen

Hier steht dein Formular. Der Container zentriert den Inhalt und sorgt auf kleinen Bildschirmen für seitlichen Abstand.

Klasse	Beschreibung	Verwendung
`.regios-form-page`	Lila Vollbildrahmen mit Raleway und weißem Text	Das äußerste Element der Formularseite
`.regios-form-container`	Zentrierter Inhalt, maximal 48rem breit, mit seitlichem Abstand	Direkt in der Seite, umschließt das ganze Formular

<link rel="stylesheet" href="regios-formulare.css">

<div class="regios-form-page">
  <div class="regios-form-container">
    <h1>Jetzt <span class="text-green">Mitmachen</span></h1>
    <!-- Hier steht dein Formular -->
  </div>
</div>

Formularfelder

Textfelder, Selects und Textareas teilen sich die Klasse .input. Jedes Feld bekommt ein Label mit der Klasse .label. Zwei Felder nebeneinander steckst du in eine .form-row, unter 640px stapeln sie sich automatisch.

Vorname

Geburtsdatum

Titel

Telefonnummer Bitte mit Landesvorwahl, zum Beispiel +43

Anmerkung

Klasse	Beschreibung	Verwendung
`.label`	Kleines Label über dem Feld, weiß mit 80 Prozent Deckkraft	Ein Label pro Feld, mit for Attribut verknüpfen
`.input`	Feld mit dezenter weißer Füllung, weißem Text und 10px Eckenradius, beim Fokus grüner Ring	Für input, select und textarea gleichermaßen
`.input--light`	Helle Variante mit weißem Hintergrund und lila Fokusring	Nur auf hellen Flächen, zum Beispiel in Modals
`.form-group`	Umschließt Label plus Feld und sorgt für den Abstand nach unten	Jedes Feld bekommt eine eigene Gruppe
`.form-row`	Stellt mehrere Gruppen nebeneinander, unter 640px untereinander	Für Paare wie Vorname und Nachname

Hinweis zur Telefonnummer: verwende ein einfaches Feld mit type tel und einem Hinweis zur Landesvorwahl. Regios nutzt intern eine Javascript Bibliothek mit Landesauswahl, für Partnerformulare reicht das einfache Feld.

<div class="form-group">
  <label class="label" for="first-name">Vorname</label>
  <input type="text" id="first-name" class="input" placeholder="Vorname">
</div>

<div class="form-row">
  <div class="form-group">
    <label class="label" for="email">Email</label>
    <input type="email" id="email" class="input" placeholder="name@beispiel.at">
  </div>
  <div class="form-group">
    <label class="label" for="birthdate">Geburtsdatum</label>
    <input type="date" id="birthdate" class="input">
  </div>
</div>

<div class="form-group">
  <label class="label" for="title">Titel</label>
  <select id="title" class="input">
    <option>Kein Titel</option>
    <option>Mag.</option>
    <option>Dr.</option>
  </select>
</div>

<div class="form-group">
  <label class="label" for="phone">Telefonnummer</label>
  <input type="tel" id="phone" class="input" placeholder="+43 664 1234567">
  <span class="form-hint">Bitte mit Landesvorwahl, zum Beispiel +43</span>
</div>

<div class="form-group">
  <label class="label" for="note">Anmerkung</label>
  <textarea id="note" class="input" placeholder="Deine Nachricht"></textarea>
</div>

Auswahlkarten

Für die Auswahl eines Produkts oder einer Option gibt es klickbare Karten. Beim Überfahren leuchtet der Rand grün, die gewählte Karte bekommt zusätzlich die Klasse .card-selected.

Genossenschaftsanteile

Werde Mitglied und beteilige dich an der Genossenschaft.

→

Genossenschafter Darlehen

Lege zusätzlich Geld mit fixer Verzinsung an.

→

Klasse	Beschreibung	Verwendung
`.product-card`	Klickbare Karte mit dezenter Füllung und 2px Rand, beim Überfahren grüner Rand mit weichem Schein	Eine Karte pro Option, per Klick auswählen
`.card-selected`	Markiert die gewählte Karte mit grünem Rand und hellerer Füllung	Zusätzlich zu .product-card auf genau einer Karte
`.card-arrow`	Pfeil rechts unten, wird beim Überfahren deutlicher und in der Auswahl grün	Ein span mit dem Inhalt → in jeder Karte

<div class="product-card">
  <h3>Genossenschaftsanteile</h3>
  <p>Werde Mitglied und beteilige dich an der Genossenschaft.</p>
  <span class="card-arrow">&rarr;</span>
</div>

<div class="product-card card-selected">
  <h3>Genossenschafter Darlehen</h3>
  <p>Lege zusätzlich Geld mit fixer Verzinsung an.</p>
  <span class="card-arrow">&rarr;</span>
</div>

Checkboxen

Die Checkbox besteht aus einem Label mit versteckter nativer Checkbox, einer sichtbaren Box und dem Text. Beim Anhaken wird die Box grün mit lila Haken. Links im Text, etwa zur Datenschutzerklärung, sind grün und unterstrichen.

Ich habe die Datenschutzerklärung gelesen und akzeptiere sie. Ich möchte den Newsletter der Genossenschaft erhalten.

Klasse	Beschreibung	Verwendung
`.checkbox-brand`	Das umschließende Label, macht die ganze Zeile klickbar	Immer ein label Element, damit Text und Box gemeinsam reagieren
`input[type="checkbox"]`	Die native Checkbox, unsichtbar aber für Tastatur und Screenreader da	Direkt vor der .checkbox-box platzieren
`.checkbox-box`	Die sichtbare Box, beim Anhaken grün mit lila Haken	Ein leeres span direkt nach der nativen Checkbox
`.checkbox-label`	Der Text neben der Box, Links darin sind grün und unterstrichen	Für Einwilligungen mit Link auf das jeweilige Dokument
`.checkbox-brand--light`	Helle Variante mit lila Box und grünem Haken	Nur auf hellen Flächen, zum Beispiel in Modals

<label class="checkbox-brand">
  <input type="checkbox">
  <span class="checkbox-box"></span>
  <span class="checkbox-label">
    Ich habe die <a href="#">Datenschutzerklärung</a> gelesen
    und akzeptiere sie.
  </span>
</label>

Buttons

Der grüne Button ist die Hauptaktion, zum Beispiel Weiter oder Absenden. Der Button mit grünem Rand ist die Nebenaktion, zum Beispiel Zurück. Am Ende des Formulars darf der Hauptbutton die volle Breite einnehmen.

Klasse	Beschreibung	Verwendung
`.btn-primary`	Grüner Button mit lila Text, 10px Eckenradius, hebt sich beim Überfahren leicht an	Genau eine Hauptaktion pro Schritt
`.btn-secondary`	Transparenter Button mit grünem Rand und grünem Text, füllt sich beim Überfahren grün	Nebenaktionen wie Zurück oder Abbrechen
`.btn-full`	Macht den Button so breit wie seinen Container	Für die Hauptaktion am Formularende und auf kleinen Bildschirmen

<button type="button" class="btn-secondary">Zurück</button>
<button type="button" class="btn-primary">Weiter</button>

<!-- Volle Breite, zum Beispiel am Ende des Formulars -->
<button type="submit" class="btn-primary btn-full">Antrag absenden</button>

Fehler und Hinweise

Fehler zeigt eine rot getönte Box über dem Formular oder unter dem betroffenen Feld. Kurze Hinweise unter einem Feld nutzen .form-hint, mit grüner Variante für gültige und roter Variante für ungültige Eingaben.

Bitte überprüfe deine Eingaben. Die markierten Felder sind unvollständig.

IBAN IBAN ist gültig.

Email Diese Email Adresse ist ungültig.

Email Wir melden uns per Email bei dir.

Klasse	Beschreibung	Verwendung
`.form-error`	Rot getönte Box mit hellem roten Text und 8px Eckenradius	Über dem Formular oder unter dem betroffenen Feld, im Erfolgsfall ausblenden
`.form-hint`	Kleiner Hinweistext unter einem Feld, weiß mit 70 Prozent Deckkraft	Erklärungen und Formathinweise
`.form-hint--valid`	Grüne Variante des Hinweises	Bestätigt eine gültige Eingabe, zum Beispiel eine geprüfte IBAN
`.form-hint--error`	Helle rote Variante des Hinweises	Fehlermeldung direkt unter dem Feld

<div class="form-error">
  Bitte überprüfe deine Eingaben. Die markierten Felder sind
  unvollständig.
</div>

<span class="form-hint">Wir melden uns per Email bei dir.</span>
<span class="form-hint form-hint--valid">IBAN ist gültig.</span>
<span class="form-hint form-hint--error">Diese Email Adresse ist ungültig.</span>

Fortschritt

Formulare mit mehreren Schritten zeigen oben einen schmalen Fortschrittsbalken. Daneben steht der aktuelle Schritt als Text, zum Beispiel Schritt 3 von 5.

Jetzt Mitmachen

Schritt 3 von 5

Klasse	Beschreibung	Verwendung
`.progress-track`	Die Schiene, 0.5rem hoch, weiß mit 20 Prozent Deckkraft, volle Rundung	Oberhalb des ersten Formularfelds
`.progress-fill`	Der grüne Balken, animiert Breitenänderungen weich	Breite per Inlinestil oder Javascript setzen, zum Beispiel width 60 Prozent

<div class="progress-track">
  <div class="progress-fill" style="width: 60%"></div>
</div>

Responsives Verhalten

Das CSS ist von Haus aus für Mobilgeräte gebaut. Du musst nichts weiter tun, wenn du die dokumentierten Klassen verwendest.

Unter 640px stapeln sich alle Felder einer .form-row untereinander in einer Spalte.
Felder und Buttons sind immer so breit wie ihr Container und mit 0.75rem vertikalem Innenabstand angenehm für den Daumen.
Der Container begrenzt die Breite auf 48rem und sorgt auf kleinen Bildschirmen für seitlichen Abstand.
Ab 768px bekommt die Seite mehr vertikalen Abstand und die Hauptüberschrift wird größer.

Alles zum Mitnehmen

Die Datei regios-formulare.css enthält alle Bausteine dieser Seite: Farbvariablen, Schriften, Felder, Karten, Checkboxen, Buttons, Fehlerboxen, Fortschrittsbalken und Modal. Einbinden, Klassen verwenden, fertig.

Formular CSS herunterladen Schriften herunterladen

Fragen zum Styleguide? Schreib uns an office@regios.at