🎛️ Darstellungsvarianten (Buttons, Karten, Icons, Bilder, Slider, Bewertungen)

Viele Feldtypen können im Formular auf unterschiedliche Arten dargestellt werden — aus einem Auswahl-Dropdown werden zum Beispiel große Icon-Kacheln, aus einem Ja/Nein-Schalter zwei Buttons, aus einem Zahlenfeld ein Schieberegler oder eine Sterne-Bewertung.

Das Wichtigste dabei: Nur die Optik ändert sich. Der gespeicherte Wert, die onOffice-Anbindung, Regeln, Einsendungen und PDF-Ausgabe bleiben bei jeder Darstellung exakt gleich. Du kannst die Darstellung also jederzeit gefahrlos umstellen — auch bei Formularen, die schon im Einsatz sind.

Darstellung wählen

Öffne im Formular-Editor die Einstellungen eines Feldes.
Unterhalb der Grundeinstellungen findest du die Sektion „Darstellung" — sie erscheint automatisch bei allen Feldtypen, für die Varianten verfügbar sind.
Klicke eine Kachel an und speichere das Feld. „Standard" ist immer die bisherige Darstellung.

Auch beim Anlegen eines neuen Feldes fragt dich die Feld-Palette direkt nach der Darstellung, sobald der gewählte Feldtyp Varianten anbietet — du kannst sie dort sofort festlegen oder mit „Standard" starten.

Verfügbare Varianten

Einauswahl-Felder (Singleselect)

Darstellung	Beschreibung
Standard	Das bekannte Dropdown
Radio-Buttons	Alle Optionen untereinander, klassisch anklickbar
Button-Gruppe	Optionen als nebeneinanderliegende Buttons — ideal bei 2–5 Optionen (z.B. Kauf/Miete)
Karten-Auswahl	Große Kacheln, optional mit Beschreibungstext pro Option
Icon-Auswahl	Kacheln mit Icon + Beschriftung pro Option (z.B. Objektart: Haus, Wohnung, Grundstück …)
Bild-Auswahl	Bild-Kacheln — Bilder aus deiner Medienbibliothek
Likert-Skala	Alle Optionen als gleichbreite Skala-Buttons in einer Reihe (z.B. „trifft zu … trifft nicht zu")

Die gewählte Option wird farblich in der Akzentfarbe deines Formulars hervorgehoben.

Abhängige Felder: Auch Objekttyp (hängt an der Objektart) und Aktionstyp (hängt an der Aktionsart) können alle Einauswahl-Darstellungen nutzen. Die Kacheln filtern sich automatisch: Solange kein Elternwert gewählt ist, erscheint der Hinweis „Bitte zuerst … auswählen"; nach der Wahl werden nur die passenden Optionen angezeigt. Das Eltern-Feld darf dabei selbst jede beliebige Darstellung haben. Ist das Eltern-Feld gar nicht im Formular, werden alle Optionen angezeigt.

Mehrfachauswahl-Felder (Multiselect)

Darstellung	Beschreibung
Standard	Das bekannte Auswahl-Dropdown
Checkbox-Liste	Alle Optionen als sichtbare Checkboxen
Chips	An- und abwählbare Buttons — kompakt bei vielen Optionen (z.B. Ausstattungsmerkmale). Die Ecken folgen deinem Formular-Design (eckig/gerundet/Pille). Ist kein Hinweistext gepflegt, zeigt propform automatisch „Mehrfachauswahl möglich" bzw. die konfigurierte Mindest-/Höchstanzahl unter dem Feld (gilt für alle Mehrfachauswahl-Darstellungen)
Icon-Auswahl	Icon-Kacheln, mehrfach anwählbar
Bild-Auswahl	Bild-Kacheln, mehrfach anwählbar

Hinweis zu Eltern-/Kindwerten: Die automatische An-/Abwahl zusammengehöriger Werte (z.B. Bundesland wählt Regionen mit) gibt es nur im Standard-Dropdown. In den anderen Darstellungen sind alle Werte frei anklickbar — Kindwerte werden eingerückt bzw. mit ▸ markiert. Der Multiselect-Modus wird beim Speichern einer Darstellung deshalb automatisch auf „onOffice" (frei anklickbar) gestellt.

Zusätzlich kannst du bei allen Mehrfachauswahl-Darstellungen eine Mindest- und Höchstanzahl wählbarer Optionen festlegen („wähle bis zu 3"): Das Minimum greift, sobald etwas ausgewählt wurde (bzw. immer bei Pflichtfeldern), beim Erreichen des Maximums werden weitere Optionen gesperrt.

Ja/Nein-Felder

Darstellung	Beschreibung
Standard	Der bekannte Schalter (Toggle)
Checkbox	Klassische einzelne Checkbox, z.B. für Einwilligungen
Ja/Nein-Buttons	Zwei große Buttons — gut für mobil und vor Ort. Als Pflichtfeld erzwingt diese Darstellung eine aktive Entscheidung. Die Beschriftungen sind frei änderbar (z.B. „Yes/No" für ein englisches Formular), optional mit Haken-/Kreuz-Icons

Zahlenfelder

Darstellung	Beschreibung
Standard	Das bekannte Eingabefeld
Schieberegler	Slider mit Live-Wert-Anzeige (inkl. Einheit) und automatischer Min/Max-Beschriftung. Minimal-Wert, Maximal-Wert und Intervall kommen aus den Zahlen-Einstellungen des Feldes. Eigene Beschriftungen unter dem Regler (z.B. `günstig;mittel;teuer`) trägst du direkt in der Darstellungs-Sektion ein. Optional lässt sich der Wert zusätzlich eintippen (Eingabefeld unter dem Regler). Ein unberührter Regler sendet — wie ein leeres Feld — keinen Wert
Bewertung	1–N Symbole (N = Maximal-Wert, Standard 5) — perfekt für Feedback-Formulare. Als Symbol stehen Sterne, Herzen, Smileys (Stimmungs-Skala, 2–5 Stufen) oder ein eigenes Icon aus der Icon-Library zur Wahl. Gespeichert wird eine normale Ganzzahl
Skala (0-10)	Zahlen-Buttons in einer Reihe — die klassische Weiterempfehlungs-Frage. Der Bereich folgt Minimal-/Maximal-Wert (Standard 0–10)

Bei Bewertung, Skala und Likert-Skala kannst du zusätzlich die Endpunkte beschriften (z.B. links „sehr unwahrscheinlich", rechts „sehr wahrscheinlich"), damit Besucher sofort wissen, welches Ende was bedeutet.

Schieberegler, Bewertung und Skala stehen bei Ganzzahl- und Dezimalzahlen-Feldern zur Verfügung.

Von/Bis-Suchkriterien

Darstellung	Beschreibung
Standard	Zwei Eingabefelder „von" und „bis"
Von/Bis-Schieberegler	Ein Slider mit zwei Reglern und Live-Anzeige der gewählten Spanne (z.B. „200.000 € – 600.000 €") — ideal für Preis, Fläche oder Zimmer im Suchprofil. Die Einheit kommt aus dem onOffice-Feld bzw. deiner Einheiten-Einstellung. Unberührte Regler senden — wie leere Felder — keinen Wert. Optional: Werte zusätzlich eintippbar und eine voreingestellte Spanne als Startposition

Darstellung

Beschreibung

Standard

Zwei Eingabefelder „von" und „bis"

Von/Bis-Schieberegler

Ein Slider mit zwei Reglern und Live-Anzeige der gewählten Spanne (z.B. „200.000 € – 600.000 €") — ideal für Preis, Fläche oder Zimmer im Suchprofil. Die Einheit kommt aus dem onOffice-Feld bzw. deiner Einheiten-Einstellung. Unberührte Regler senden — wie leere Felder — keinen Wert. Optional: Werte zusätzlich eintippbar und eine voreingestellte Spanne als Startposition

Datumsfelder

Darstellung	Beschreibung
Standard	Der native Datums-Picker des Browsers
Inline-Kalender	Ein immer sichtbarer Kalender in deiner Formularsprache — gespeichert wird exakt dasselbe Datumsformat wie beim Standard-Feld. Wählbare Tage einschränkbar: nur Zukunft (z.B. Besichtigungstermin), nur Vergangenheit, festes Frühestes-/Spätestes-Datum, Wochenenden sperren

Optionen ausgestalten (Beschreibungen, Icons, Bilder)

Bei den Darstellungen Karten, Icon-Auswahl und Bild-Auswahl erscheint unter dem Darstellungs-Umschalter der Bereich „Optionen ausgestalten": eine Zeile pro onOffice-Schlüsselwert des Feldes.

Beschreibung — optionaler Text, der unter dem Options-Titel erscheint (bei Karten, Icon- und Bild-Kacheln).
Icon — öffnet den Icon-Picker mit über 5.000 Icons (Tabler Icons). Die Rubrik „Immobilien & Häufiges" zeigt die wichtigsten Icons mit deutschen Bezeichnungen; die Suche versteht deutsche und englische Begriffe (z.B. „Heizung", „Schlüssel", „Euro").
Bild — öffnet den Medienbibliothek-Picker (Hochladen, Bibliothek oder externe URL).

Optionen ohne zugewiesenes Icon/Bild zeigen einfach nur ihre Beschriftung (bzw. einen neutralen Platzhalter bei der Bild-Auswahl). Leere Angaben werden ignoriert.

Weitere Einstellungen je Darstellung

Je nach gewählter Darstellung erscheinen in der Sektion „Darstellung" passende Zusatz-Einstellungen:

Kachelgröße (Karten, Icon-, Bild-Auswahl): Kompakt / Normal / Groß.
Icon-Farbe (Icon-Auswahl, Ja/Nein-Buttons, Button-Gruppe): eigene Farbe für die Icons — leer = Textfarbe des Formulars.
Icons in der Button-Gruppe und auf der Likert-Skala: Über „Optionen ausgestalten" zugewiesene Icons erscheinen auch vor dem Options-Label der Button-Gruppe bzw. über den Likert-Buttons.
Eigene Ja/Nein-Icons: Statt Haken/Kreuz lassen sich beliebige Icons aus der Library wählen (z.B. Daumen hoch/runter).
Getrennte Von/Bis-Vorbelegung: Bei Von/Bis-Suchkriterien lassen sich Von und Bis einzeln vorbelegen — auch in der Standard-Darstellung (der klassische Standard-Wert füllt weiterhin beide Seiten gleich, die getrennte Vorbelegung hat Vorrang).
Bildformat & Zuschnitt (Bild-Auswahl): Quadratisch, 4:3 oder 16:9; „Füllen" schneidet das Bild passend zu, „Einpassen" zeigt es komplett — gut für Logos.
Spalten (Radio-Buttons, Checkbox-Liste): lange Listen auf 2 oder 3 Spalten verteilen (mobil immer einspaltig).
Zentriert darstellen: Buttons, Kacheln, Chips, Bewertung, Skala und Inline-Kalender lassen sich mittig statt linksbündig ausrichten — bei Slidern wird das optionale Eintipp-Feld zentriert.

Gut zu wissen

Abweichende Beschriftungen aus den Auswahl-Einstellungen („Schlüssel-Beschriftung ändern") gelten in allen Darstellungen.
Pflichtfeld, Regeln, Vorausfüllen, Nur-Lesen — alles funktioniert in jeder Darstellung wie gewohnt.
Auswahl wieder aufheben: Ein Klick auf die bereits gewählte Option wählt sie wieder ab (Kacheln, Buttons, Radio, Likert, Ja/Nein, Bewertung, Skala). Beim Schieberegler, Von/Bis-Schieberegler und Inline-Kalender erscheint dafür ein kleiner „Leeren"-Link, sobald ein Wert gesetzt ist. So können Besucher — wie beim Standard-Feld — auch bewusst „keine Angabe" senden.
Browser-Zurück: Eingaben bleiben auch in allen Darstellungsvarianten erhalten, wenn Besucher im Browser zurück navigieren — inklusive Slider, Von/Bis-Slider und Inline-Kalender.
Bestehender Range-Slider: Falls du den bisherigen Range-Slider (über „Zu einem Spezialfeld machen") im Einsatz hast, läuft der unverändert weiter — du kannst beliebig weitere davon anlegen, deine Formulare bleiben konsistent. Der neue Schieberegler über „Darstellung" ist die modernere Alternative mit Live-Wert-Anzeige.
Per API sind die Darstellungen über die Feld-Eigenschaften display_variant und select_option_meta steuerbar — Details in der API-Referenz.

propform.ioHilfe