Struktur und Breite mit Sections definieren

Der restliche Aufbau des Formulars erfolgt mit Sections.

Screenshot Backend Design Section Form element:

Die Sections und deren beinhaltenden Formularfelder kann man in 4 verschiedenen Breiten anzeigen lassen.

*Screenshot Frontend 4 Breiten in 5 Varianten:

Zum einem in voller Breite des Containers, in den man das Formular in der Seite einbindet. Dafür schreibt man die CSS-Klasse "lan-form-styles__size-full" auf die Section.

Screenshot Backend Section General Settings:

Screenshot Frontend Full Size Section:

Die Formularfelder können auch in 3/4-Breite angezeigt werden. Hierfür schreibt man CSS-Klasse "lan-form-styles__size-three-third" auf die Section.

Screenshot Backend 3/4-Breite:

Screenshot Frontend 3/4-Breite:

Will man die Formularfelder nur in der halben Breite angezeigt bekommen, lässt man die CSS-Klasse auf der Section weg.

Screenshot Frontend halbe Inhaltsbreite:

Will man allerdings immer 2 Formularfelder nebeneinander angezeigt bekommen, muss man zuerst eine Section anlegen und darin dann 2 weitere Sections (je eine pro Formularfeld) anlegen. Die inneren Sections bekommen dann die CSS-Klasse "lan-form-styles__size-half". In die inneren Sections kann man dann je ein Formularfeld einfügen. Diese Formularfelder werden dann nebeneinander angezeigt.

Screenshot Backend 50/50-Section(s):

Screenshot Frontend 50/50-Section(s):

Will man in einem solchen 2-spaltigen Formular auch einzelne Formularfelder einzeln und nicht zu zweit in einer Reihe angezeigt bekommen, muss man außer der CSS-Klasse "lan-form-styles__size-half" zusätzlich die CSS-Klasse "clearfloat" auf die Section schreiben.

Screenshot Backend 50/50-Section(s) together with single field in left column:

Es gibt noch eine CSS-Klasse "lan-form-styles__size-one-third", die bewirkt, dass die Section nur in 25%-Breite angezeigt wird.

Screenshot Backend 25%-Breite:

Screenshot Frontend 25%-Breite: