Mehrspaltige Formulare bei Verwendung eines Bootstrap 2.3.2 Templates

Standardmäßig basiert Joomla 3 auf dem UI-Framework Bootstrap 2.3.2. Auch das Joomla 3 Standardtemplate - Protostar - ist ein Bootstrap 2.3.2 Template. Mit Visforms ist es möglich mehrspaltige Formulare zu erstellen, wenn Sie ein Template verwenden, das mit dem UK-Framework Bootstrap 2.3.2 erstellt ist. Auf Joomla 3 ist dieses Feature in der freien Visforms Version enthalten. Basiert das Template, das Sie auf Ihrer Webseite verwenden auf einem anderen UI-Framework oder betreiben Sie eine Joomla 4 Webseite, dann benötigen Sie eine Visforms Subscription um mehrspaltige Formulare zu erstellen. Die moderneren UI-Frameworks Bootstrap 4, Bootstrap 5 und UIkit 2 und 3 bieten dann sehr viel weitergehende Möglichkeiten der individuelle mehrspaltigen Gestaltung. Informationen hierzu finden Sie unter zusätzlichen Formular- und Feldoptionen.

Die Möglichkeit mehrspaltige Formulare für Bootstrap 2.3.2 Templates zu erstellen ist im Hinblick auf 3 Anforderungen optimiert:

• Es soll möglich sein mit sehr wenig Aufwand ein 2-Spaltiges Formularlayout zu erzeugen
• Für alle die bereit sind, mehr Aufwand zu betreiben, soll es möglich sein, das mehrspaltige Layout sehr individuell zu konfigurieren
• Die Steuerung soll mit einer möglichst geringen Anzahl an Parametern in die Konfiguration von Formularen und Feldern erfolgen

Voraussetzungen

Das mehrspaltige Formular Layout setzt auf das Bootstrap 2.3.2 Grid auf. D.h. Sie können dieses Layout nur verwenden, wenn Ihre Webseite ein Template hat, das das Bootstrap 2.3.2 Grid umsetzt, wie z.B. das Joomla! 3 Standard Template "Protostar". Wenn Sie nicht sicher sind, ob Ihr Template ein Bootstrap Template ist und wenn ja, welches Bootstrap Grid unterstützt wird, dann fragen Sie bitte bei Ihrem Template Hersteller nach!

Basics

Das Bootstrap 2.3.2 Grid verwendet die class-Attribute "row" bzw. "row-fluid" und die class-Attribute "span1", "span2", "span3" ... "span12", um eine Zeile in 1 - 12 Spalten zu unterteilen.

Dies bedeutet, dass das Layout letztlich reihenweise erzeugt wird. Jede Reihe wird dann in Spalten unterteilt, die jeweils ein Formularfeld (Label und Input) 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 ein mehrspaltiges Formular anlegen wollen, sollten Sie sich mit dem Bootstrap Grid System auskennen, oder vertraut machen.

Wollen Sie das Layout verwenden, um ein einfaches zweispaltiges Formalar zu erzeugen, reicht es aus, wenn Sie diesen Artikel aufmerksam durchlesen.

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 enthalten (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 gut bei Formulare, die "Bedingte Felder" enthalten, da das Ein- und Ausblenden der bedingten Felder das Layout völlig durcheinanderwirft. Mehrspaltige Formulare mit bedingten Feldern zu erstellen erfordert Fingerspitzengefühl und viel individuelle Feinjustierung.

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 2". 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 automatisch auf eine Breite von 1/3 gesetzt, das Control auf eine Breite von 2/3. Haben Sie die Anzeige des Feld-Labels deaktiert, nimmt das Control automatisch die gesamte Breite ein.

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 neuen 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).

Die Breite des Labels und des Control verändern

Sie können für jedes Feld individuell steuern, wie viel Platz dem Label und wie viel Platz dem Control innerhalb des Feld-Containers zugewiesen wird. Dies geschieht über die Feld-Parameter "CSS Klasse für Bezeichnung" und "CSS Klasse des Feldes" unter dem Reiter "Erweitert" in der Feldkonfiguration. Fügen Sie den Wert " spanx" in diese Parameter ein, wobei Sie "x" mit einer Zahl zwischen 1 und 12 ersetzen müssen und vergessen Sie das Leerzeichen am Anfang nicht!

Wenn im Formular für das betreffende Feld Label und Control angezeigt werden, dann sollten sich die Zahlenwerte, die an das "span" für Label und Control angehängt werden zu 12 addieren. Prinzipiell können Sie aber auch jeden beliebigen anderen Wert verwenden, dies hat allerdings unter Umständen zur Folge, dass Label und Control den Feld-Container nicht ganz ausfüllen (Summe ist kleiner als 12) oder dass es zu einem Zeilenumbruch zwischen Label und Control kommt (Summe ist größer als 12). Bei manchen Feldtypen (z.B. Textarea) kann es sinnvoll sein, einen Zeilenumbruch zwischen Label und Control zu erzwingen, weil das Feld dann insgesamt besser ins mehrspaltige Layout passt (Siehe unten: Textarea).

Visform versucht fehlende Eingaben in sinnvoller Weise zu ergänzen und fehlerhafte Eingaben bei den CSS Klassen in sinnvoller Weise zu korrigieren. Fehlerhafte Eingaben führen in der Regel dazu, dass auf die Defaultwerte (Label hat span4, Control hat span8) zurückgefallen wird, fehlende Eingaben werden so ergänzt, das Label und Control zusammen den gesamten Platz einnehmen. Fehlerhafte Werte sind z.B. span0, span13, oder mehr als ein spanx für Label oder Control.

Spezielle Feldtypen

Datum

Aufgrund des Kalendericons ist die saubere Platzierung von Datumsfeldern im mehrspaltigen Layout schwierig. Am besten ist es, nur die Option "Breite" für die Breite des Feld-Containers setzen (und keine "span"-Werte zu vergeben) und zwar auf 12, so dass das Datumsfeld in einer eigenen Zeile im Formular steht. Das Label wird dann immer oberhalb des Controls angezeigt. Auch eine Platzierung von zwei Datumsfeldern in einer Zeile sieht im Layout gut aus. (Für jedes der beiden Datumsfelder die Option "Breite" auf 6 setzen).

Radios und Checkbox Gruppen

Das Setzen von "span" Werten für "CSS Klasse für Bezeichnung" und "CSS Klasse des Feldes" führt bei Radiobuttons und Checkbox Gruppen zu fehlerhaften Darstellungen. Wenn Sie für Radiobuttons oder Checkbox Gruppen die Option "Anzeige" auf "Inline" stellen, ist es sinnvoll die "Breite" des Feld Containers auf 12 zu setzen, so dass die Buttons/Checkboxen genügend Platz haben. Setzen Sie die Option "Anzeige" auf "Als Liste" können Sie unter Umständen auch zwei oder mehr Felder vom Typ Radiobutton oder Checkbox in einer Zeile platzieren. Setzen Sie hierfür die Option "Breite" aller Felder auf den entsprechenden Wert (6 für 2 Felder, 4 für 3 Felder in einer Zeile).

Checkbox

Checkboxen lassen sich problemlos im mehrspaltigen Layout verwenden. Allerdings sollte hier nur die Option "Breite" eingestellt werden und keine "span" Werte vergeben werden.

Textarea

Textareas lassen sich gut ins mehrspaltige Layout einpassen. Folgende Einstellungen sind sinnvoll: "Breite": 12 hierdurch nimmt das Textarea-Feld die gesamte Breite des Formulars ein. "CSS Klasse für Bezeichnung": " span12" hierdurch wird das Label über dem Eingabefeld positioniert. "CSS Klasse des Feldes": " span12" hierdurch nimmt das Eingabefeld die gesamte Breite des Feldcontainers ein.

Haben Sie in Ihrem Formular zwei oder mehr Textarea-Felder hintereinander, so können Sie diese durch andere Werte der Option "Breite" auch in einer Zeile anzeigen.

File Upload

Felder vom Typ "File Upload" können wie Felder vom Typ Text einfach über alle drei Optionen konfiguriert werden.

Feldtrenner

Feldtrenner, sogar mit benutzerdefiniertem Text, können mit etwas Fingerspitzengefühl ebenfalls in ein mehrspaltiges Layout eingepasst werden. Setzen Sie immer die "CSS Klasse des Feldes" auf " span12".

Buttons

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

Demo Zur Beitragsliste