Mehrspaltiges Layout für Bootstrap 3 aufsetzen

Dieses Feature ist Teil der Visforms Subscription und in der freien Visforms Version nicht enthalten..

Das mehrspaltige Formular Layout setzt auf das Bootstrap 3 Grid auf. D.h. Sie können dieses Layout nur verwenden, wenn Ihre Webseite ein Template hat, das das Bootstrap 3 Grid umsetzt. Informationen zu mehrspaltigen Formularen auf Webseiten die Templates verwenden, die auf neueren Versionen des UI-Framework Bootstrap oder auf dem UI-Framework UIkit gebaut wurden, finden Sie unter zusätzlichen Formular- und Feldoptionen.

Basics

Das Bootstrap 3 Grid unterteilt die Webseite in Zeilen und jede Zeile in 1 - 12 Spalten.

Dies bedeutet, dass das Layout letztlich Reihenweise erzeugt wird. Jede Reihe wird dann in Spalten unterteilt, die jeweils ein Formularfeld (Label und Control) enthalten. Die Spalten sind Container, die das Feldlabel und das Control enthalten.

Wenn Sie z.B. ein zweispaltiges Layout haben, dann wird der Container für das 1. Formularfeld in der 1. Zeile in der linken Spalte angezeigt, der Container für das zweite Formularfeld in der 1. Spalte rechts. Der Container für das 3. Formularfeld steht in der zweiten Zeile links, der für das 4. in der zweiten Zeile rechts... In jeder Zeile haben Sie die Möglichkeit festzulegen, wie viele Spalten diese enthalten soll. Dies ergibt insgesamt ein extrem flexibles System.

Feld-Container im Grid System

Wenn Sie das mehrspaltige Bootstrap 3 Layout verwenden wollen, um das Design mehrspaltiger Formulare individuell zu konfigurieren, sollten Sie sich mit dem Bootstrap Grid System auskennen, oder vertraut machen. Das mehrspaltige Layout ist responsive und verwendet die "col-sm-" Klassen, d.h. auf kleinen Geräten werden die Formularfelder automatisch untereinander und nicht mehr mehrspaltig angezeigt.

Für welche Formulare eigenet sich das mehrspaltige Layout?

Das mehrspaltige Layout eignet sich gut um Formulare zu erstellen, die vor allem Text Input Felder (Feldtypen: Text, E-Mail, Passwort, URL, Zahl).

Besonders gut sieht das Design aus, wenn Sie bei diesen Feldern die "Label Optionen" auf "Label verstecken" setzen, das Label wird dann als Platzhalter im Input angezeigt und verschwindet, wenn der Benutzer anfängt Eingaben zu machen.

Auch Checkboxen, Listboxen, File Uploads und Textareas passen sich recht gut ins mehrspaltige Layout ein.

Bei Feldern vom Typ Radiobutton oder Checkbox Gruppe kommt das mehrspaltige Layout schnell an seine Grenze, allerdings können diese mit etwas Geschick meist auch verwendet werden.

Je einheitlicher das Formular, desto besser sieht es im mehrspaltigen Layout aus.

Für welche Formulare eignet sich das mehrspaltige Layout nicht?

Das mehrspaltige Layout funktioniert nicht mit Formulare, die "Bedingte Felder" enthalten, da das Ein- und Ausblenden der bedingten Felder das Layout völlig durcheinanderwirft.

Felder mit und Felder ohne Label innerhalb einer Zeile führen zu einem uneinheitlichen Layout.

Texte im Formular (benutzerdefinierte Texte der Felder) führen schnell dazu, dass das mehrspaltige Layout nicht mehr gut aussieht, ebenso sind Radiobutton und Checkboxgruppen mit vielen Optionen schwer einzupassen.

Auch für die Darstellung von Formularen in Modulen ist das mehrspaltige Layout wenig geeignet, das diese in der Regel zu schmal sind.

Bitte beachten Sie, dass nicht jedes Formular sich sinnvoll mehrspaltig darstellen lässt und das mehrspaltige Layout bei schlechter Konfiguration und/oder unpassenden Feldern einfach "zerbrechen" kann. D.h. Sie müssen ausprobieren, ob es für Ihr Formular funktioniert.

Ein einfaches zweispaltiges Formular

Gehen Sie in der Formularkonfiguration auf den Reiter "Erweitert". Unter der Zwischenüberschrift "Layout" finden Sie die Option "UI Framework". Stellen Sie diese auf "Bootstrap 3". Anschließend wird eine Listbox zur Auswahl des "Sublayouts" sichtbar. Stellen Sie diese auf "Individuell".

Allein durch diese Einstellung erreichen Sie, dass nun zwei Formularfelder pro Zeile angezeigt werden. Die beiden Spalten sind gleich breit. Innerhalb des Containers, der ein Feld enthält, wird das Label oberhalb des Controls angezeigt (Sie haben also innerhalb des Containers eine zweizeilige Darstellung). Haben Sie die Anzeige des Feld-Labels deaktiert, füllt das Control automatisch den Container einzeilig in ganzer Breite aus.

Weitergehende Konfigurationsmöglichkeiten

Die Anzahl der Felder pro Spalte bestimmen

Sie können für jedes Feld festlegen, wie viel Platz ihm innerhalb einer Zeile zugewiesen wird.

Gehen Sie hierzu in die Feldkonfiguration auf den Reiter "Erweitert". Hier finden Sie einen Parameter "Breite". Wählen Sie aus der Listbox einen Wert zwischen 1 und 12 aus. Dieser Wert entspricht der Anzahl an Einheiten, die diesem Feld in seiner Zeile zugewiesen werden. Da jede Zeile aus 12 Einheiten besteht bedeutet dies, dass das Feld bei einem Wert von 4 1/3 der Zeile einnimmt, bei einem Wert von 6 die Hälfte der Zeile bei einem Wert von 12 die ganze Zeile.

Visforms berechnet automtisch für jedes Feld, ob es aufgrund seiner gewählten Breite noch in die aktuelle Zeile passt oder nicht. Passt es nicht mehr hinein, wird automatsich eine neue Zeile angefangen. D.h. es ist auch möglich, dass eine Zeile aufgrund der gewählten Feld-Breiten, nicht vollständig gefüllt wird (z.B. Feld1 hat Breite 5, Feld2 hat Breite 5, Feld3 hat Breite 3: Feld 3 wird in eine neue Zeile geschrieben, in der 1. Zeile sind nur 10 von 12 Einheiten gefüllt).

Pflichtfelder

Pflichtfelder werden im Formular gerne mit eine Asterix (Stern) gekennzeichnet. Der Umgang mit diesem Pflichtfeld-Stern im mehrspaltigen Bootstrap 3 Layout ist etwas schwierg.

Im mehrspaltigen Layout wird der Pflichtfeld-Stern an das Feld-Label angehängt, falls das Label angezeigt wird. Haben Sie die Feldoption "Label verstecken" gewählt, dann wird der Pflichtfeld-Stern rechts oberhalb des Controls angezeigt. Der Pflichtfeld-Stern führt dazu, dass das Feld insgesamt in der Höhe genauso viel Platz einnimmt wie ein Feld mit Label.

Visforms bietet Ihnen auch die Möglichkeit auf die Anzeige des Pflichtfeld-Stern ganz zu verzichten (selbstverständlich wird trotzdem geprüft, dass ein Pflichtfeld auch einen Wert enthält). Sie müssen im Detail für Ihr konkretes Formular ausprobieren, welche Einstellungen das beste (am besten aussehende) Ergebnis liefern.

Die Formular-Buttons

Die Einstellungen für mehrspaltiges Layout werden für die Button Feld Typen (Submit, Reset, Image Submit) nicht ausgewertet. Alle Button werden in allen Layouts in einer eigenen Zeile und nebeneinander platziert.

Zur Beitragsliste Passende Subscription finden