Neueste Subscription Feature

Mehr erfahren

Feldtyp Signatur

Mehr erfahren

Feldtyp Standort

Mehr erfahren

Feldtyp Berechnung

Mehr erfahren

Mehrseitige Formulare

Bootstrap 4 Layouts

Dieses Feature ist Teil der Visforms Subscription und in der freien Visforms Version nicht enthalten. Dieses Feature wurde der Subscirption mit der Version 3.3.0 hinzugefügt.

Bootstrap 4 ist auf Joomla! 3 sicher noch nicht sehr verbreitet. Da Joomla! 4 aber auf Bootstrap 4 als das Template Layout Framework, das in den Joomla! Core Templates verwendet wird, setzt, stellen wir schon heute Bootstrap 4 Layouts für Visforms zur Verfügung. Wenn Sie auf Ihrer Joomla! Webseite bereits ein Template verwenden, das auf Bootstrap 4 basiert, dann benötigen Sie für eine optimale Darstellung Ihrer Visforms Formulare, die Bootstrap 4 Layouts von Visforms.

Flexible, responsive Formulare

Bootstrap 4 ist ein sehr weit entwickeltes Layout Framework. Mit einem "Mobile First" Ansatz bietet es die Möglichkeit extrem flexible responsive Layouts umzusetzen. Die Bootstrap 4 Layouts für Visforms bieten Ihnen die Möglichkeit, die gesamte Palette dieser Gestaltungsmöglichkeiten auszuschöpfen. Insbesondere kommen mit den Bootstrap 4 Layouts für Visforms einige weitere Gestaltungsoptionen für Ihre Formulare hinzu, die mit den anderen Visforms Layouts nicht zur Verfügung stehen. Dies sind:

  • Tiptext wird als Tooltip über dem Control und nicht dem Feldlabel angezeigt
  • Feldlabel kann für alle Feldtypen versteckt werden
  • Captcha Label kann versteckt werden
  • Bei der Verwendung von mehrseitigen Formularen können die zusätzlichen Buttons, die nur in mehrseitigen Formularen vorhanden sind (Korrektur-Button, Zurück-Button, Prüfen-Button) mit einer eigenen CSS Klasse versehen werden, was ein einfaches Stylen der Buttons ermöglicht
  • In der Daten bearbeiten Ansicht im Frontend können zusätzliche Button, die nur in dieser Ansicht vorhanden sind (Speicher-Button, Abbrechen-Button) mit einer eigenen CSS Klasse versehen werden, was ein einfaches Stylen der Buttons ermöglicht
  • Alle Fehlermeldungen werden unterhalb des Eingabefeldes angezeigt, nicht als Popup

Bootstrap 4 Layouts aktivieren

  • Gehen Sie in der Formularkonfiguration auf den Reiter "Erweitert"
  • Wählen Sie bei der Option "Formular Layout" in der Listbox den Wert "Bootstrap 4" aus.

Anschließend wird Ihnen eine neue Option "Sublayout" angezeigt, in der Sie zwischen 3 Ausführungen des Bootstrap 4 Layouts wählen können.

  • Gestapelt
  • Horizontal
  • Individuell

Bootstrap 4 Layouts

Das gestapelte Layout

In dieser Ausführung des Bootstrap 4 Layouts wird das Feldlabel stets in einer Zeile oberhalb des Eingabefeldes angezeigt. Fehlermeldungen werden stets unterhalb des Eingabefeldes angezeigt. Benutzerdefinierte Texte können oberhalb des Labels, zwischen Label und Eingabefeld oder unterhalb des Eingabefeldes (falls eine Fehlermeldung vorhanden ist, unterhalb der Fehlermeldung) angezeigt werden. Das Feldlabel kann auch komplett unterdrückt werden.

Das horizontale Layout

In dieser Ausführung des Bootstrap 4 Layouts wird das Feldlabel stets in einer Zeile mit dem Eingabefeld angezeigt. Hierbei erhält das Label stets ein 1/4 des zur Verfügung stehenden Platzes, das Eingabefeld 3/4. Fehlermeldungen werden unterhalb des Eingabefeldes angezeigt. Benutzerdefinierte Texte können oberhalb oder unterhalb des Eingabefeldes (falls eine Fehlermeldung vorhanden ist, unterhalb der Fehlermeldung) angezeigt werden. Die Anzeige des Feldlabels kann auch unterdrückt werden, der für das Label bereitgestellt Platz bleibt in diesem Fall leer.

Das individuelle Layout

Das individuelle Layout ist sehr leistungsfähig und ermöglicht es Ihnen flexibel Formulare mit sehr gutem responsivem Verhalten zu erstellen. Wenn Sie die individuelle Ausführung des Bootstrap 4 Layouts wählen, können Sie nicht nur Feldlabel verstecken, sondern auch den Platz, der im horizontalen Layout für das Label reserviert ist, entfernen, so dass das Eingabefeld ganz links angezeigt wird.

Insbesondere können Sie festlegen:

  • wie breit das gesamte Feld (bestehend aus Label, Eingabefeld, Benutzerdefiniertem Text, Fehlermeldung) relativ zur vorhandenen Bildschirmbreite ist, d.h. wie viele Felder nebeneinander in einer Reihe angezeigt werden
  • wie viel Platz das Feldlabel innerhalb des Raums, der dem Feld zugeteilt wurde, einnimmt, d.h. wie breit das Feldlabel prozentual ist.

Hierbei haben Sie die Möglichkeit für unterschiedliche Device-Größen, unterschiedliche Vorgaben zu machen, so dass Sie z.B. auf einem großen Desktop 3 Felder nebeneinander anzeigen können, auf einem Tablett 2 und auf einem Smartphone nur ein Feld pro Reihe. Dies ergibt sich automatisch aus der Art und Weise, wie Bootstrap 4 responsives Verhalten implementiert.

Weiterhin können Sie durch entsprechende Wahl der prozentualen Breite für das Feldlabel für jedes Feld individuell steuern, ob das Label in einer Zeile mit dem Eingabefeld angezeigt wird oder ob es oberhalb des Eingabefeldes erscheint. Wählen Sie für die Feldlabel-Breite einen Wert, der weniger als 100% der zur Verfügung stehenden Breite entspricht, dann wird die Breite des Eingabefeldes automatisch berechnet, so das Label und Eingabefeld zusammen, die gesamte Breite ausfüllen. Vergeben Sie für die Feldlabel-Breite einen Wert, der 100% der zur Verfügung stehenden Breite entspricht, dann wird das Eingabefeld automatisch unterhalb des Labels platziert.

Benutzerdefinierte Texte und Fehlermeldungen werden immer linksbündig mit dem Eingabefeld angezeigt, was das Formular immer ordentlich ausgerichtet aussehen lässt.

Eine ausführliche Erläuterung der Optionen, mit denen Sie im individuellen Layout ein in höchstem Maße responsives Formular erstellen können, finden Sie direkt in der Feldkonfiguration.

Mehrspaltiges Bootstrap 4 Layout

Bootstrap 4 responsives Layout

Bootstrap CSS für Formulare laden

Prinzipiell bietet Ihnen Visforms auch die Möglichkeit, das Boostrap 4 Standard CSS separat hinzuzuladen. Aktivieren Sie hierzu die Option "Bootstrap CSS für Formulare laden". Dies kann z.B. dann interessant sein, wenn Sie ein Template verwenden, das überhaupt kein Bootstrap CSS verwendet. Implementiert Ihr Template aber eine ältere Version des Bootstrap CSS (Bootstrap 2 oder 3), dann kommt es vermutlich zu Inkomplatibilitäten zwischen dem CSS Ihres Templates und dem Bootstrap 4 CSS, die zu einer nicht befriediegenden Anzeige der Formulare führen werden.

CSS Klassen für Button vergeben

Bootstrap 4 kennt spezielle CSS Klassen, um Buttons zu formatieren, z.B. btn-primary, btn-secondary, btn-success, btn-info, btn-warning, btn-danger, btn-light. Standardmäßig fügt Visforms den Buttons sinnvolle CSS Klassen hinzu, damit diese farblich gestaltet werden. Wenn Ihnen diese Farben nicht gefallen, oder die entsprechenden Klassen im CSS Ihres Templates nicht implementiert sind, können Sie die jeweiligen CSS-Klassen Optionen in der Formularkonfiguration, bzw. der Feldkonfiguration für Felder vom Type "Submit" oder "Reset" verwenden, um die jeweiligen Buttons individuell zu gestalten.

Übersicht Passende Subscription finden