Layout-Konfiguration

Formular Layout durch Konfiguration anpassen

Visforms versucht sich so weit wie mĂśglich ins Look&Feel Ihrer Webseite anzupassen, indem es nur das minimalste allernĂśtigste eigene CSS mitbringt. Die meisten Formatierungsregeln kommen daher aus dem CSS Ihres Templates.

Templates und UI-Frameworks

Das funktioniert in der Regel gut, weil Templates heutzutage meist mit sogenannten UI-Frameworks erstellt werden. Das Template wird also durch das UI-Frameworks selbst erstellt, unter dem es dann anschließend auch eingesetzt wird. Diese modernen UI-Frameworks ermöglichen die schnelle und einfache Entwicklung sehr ansprechender und bei Bedarf auch responsiver Frontend-Layouts. Beim Einsatz eines UI-Frameworks muss eine Erweiterung die passende HTML-Struktur mit den passenden class Attributen liefern. Ganz so wie es das UI-Framework vorgibt und erwartet. Joomla selbst setzt hierbei auf das Bootstrap UI-Framework. Bei Joomla 4 ist diese das Bootstrap 5.

Formular Layouts

Visforms verfĂźgt Ăźber ein robustes “Default Layout”. Es ist komplett UI-Framework-unabhängig und in Verbindung mit vielen Templates gut aussieht und gut funktioniert. Allerdings liefert dieses Layout keinen UI-Framework-spezifischen HTML Code. Wenn Sie ein Template verwenden, dass mit einem der großen UI-Frameworks (Bootstrap oder UIkit) erstellt wurden, dann mĂźssen Sie in der Formularkonfiguration das entsprechende UI-Framework einstellen. Nur dann erzielen Sie optimale Ergebnisse in der Darstellung des Formulars. Das “Default Layout” reagiert nur begrenzt responsiv.

In der freien Visforms Version steht neben seinem “Default Layout” ein weiteres Layout zur VerfĂźgung, das Bootstrap 5 kompatibles HTML generiert.

UI-Framework auswählen

Gehen Sie hierzu in der Formularkonfiguration auf den Reiter “Erweitert”. Unter der ZwischenĂźberschrift “Layout” finden Sie die Option “UI Framework”. Vorausgewählt ist die Option “Keines”, die dem oben besprochenen UI-Framework-unabhängigen “Default Layout” entspricht.

In der freien Visforms Version kĂśnnen Sie auf Joomla 5 alternativ das UI Framework “Bootstrap 5” auswählen. Dieses erzeugt standardmäßig ein horizontales Bootstrap 5 Layout.

Mit der Visforms Subscription erhalten Sie zusätzlich Unterstßtzung fßr das UI-Framework UIkit 3.

Dieses bietet optimales Ergebnisse bei Verwendung von Visforms auf Webseiten mit Templates, die auf diesen UI-Frameworks basieren. Sie haben mit diesen Layouts außerdem weitreichende Möglichkeiten der individuellen Konfiguration mehrspaltiger Layouts inklusive des mehrspaltigen Bootstrap 5 Layouts.

Bitte bedenken Sie: Optimale Ergebnisse in der Darstellung des Formulars erzielen Sie nur, wenn das gewählte UI-Framework tatsächlich dem UI-Framework entspricht, mit dem das aktive Template Ihrer Webseite entwickelt wurde. Stellen Sie deshalb immer das passende UI-Framework ein.

Label verstecken und Platzhalter Attribute verwenden

Platzhalter sind rein informative Texte

Alle modernen Browser bieten mittlerweile die MĂśglichkeit an, in einem Text-Eingabefeld einen sogenannten Platzhalter anzuzeigen. Je nachdem welchen Browser Sie verwenden, verschwindet dieser Platzhalter, sobald Sie mit der Maus in das Eingabefeld klicken, oder sobald Sie beginnen Text einzutippen. Platzhalter werden selbstverständlich nicht mit dem Formular Ăźbermittelt, sondern sind rein informative Texte. Platzhalter werden mithilfe des HTML Attributs “placeholder” erzeugt.

Individuellen Platzhaltertext festlegen

Sie finden in der Feld-Konfiguration fĂźr alle Feldtypen, die einen Platzhalter erlauben, eine Option, mit der Sie den individuellen Platzhaltertext festlegen kĂśnnen.

Anzeige des Feldlabels unterdrĂźcken

Sie haben Sie fĂźr alle Feldtypen, die einen Platzhalter erlauben, die MĂśglichkeit, die Anzeige des Feldlabels zu unterdrĂźcken. Haben Sie in der Platzhalter-Option keinen Platzhaltertext hinterlegt, so wird automatisch das Label des Feldes als Platzhaltertext verwendet. Mindestens dadurch wird dem Benutzer der Webseite angezeigt, welche Information er in das Eingabefeld eintragen soll.

Hinweis: Bitte beachten Sie, dass die Anzeige eines "Tips Text" im UI-Framework "Keines" an das Feldlabel gebunden ist. Denn der Text wird als Tooltip beim Hovern der Maus Ăźber das Feldlabel angezeigt. Ohne die Sichtbarkeit des Feldlabel wird deshalb bei dieser UI-Framework Auswahl auch kein "Tips Text" angezeigt.

Abhängigkeit vom gewählten UI-Framework

Die Anzeige-Option für das Feld-Label ist auch abhängig vom gewählten UI-Framework. Ob diese Funktionalität zur Verfügung steht, hängt außer vom Feldtyp also auch vom gewählten UI-Framework ab. Die Begründung für das Fehlen der Anzeige-Option für das Feld-Label ist, dass es für diese Situationen keinen entsprechenden Platzhalter geben kann.

Feld-Typ Andere UI-Framework Einstellungen (inklusive "Keines") Bootstrap 5 Uikit 3
Text✔️✔️✔️
Password✔️✔️✔️
E-Mail✔️✔️✔️
Datum✔️✔️✔️
Zahl✔️✔️✔️
URL✔️✔️✔️
Textarea✔️✔️✔️
Checkbox✔️✔️
Checkbox Gruppe✔️✔️
Radiobutton✔️✔️
Listbox✔️✔️
File Upload✔️✔️
Berechnung✔️✔️
Standort✔️✔️
Signatur✔️✔️
Radio SQL✔️✔️
Listbox SQL✔️✔️
Checkbox Gruppe SQL✔️✔️
Versteckt
Image Submit Button
Submit Button
Reset Button
Feld Trenner
Neue Seite

JavaScript-Code fĂźr den IE

Insbesondere der Internet Explorer unterstĂźtzt die Platzhalter erst ab Version 10. Visforms wurde deswegen um eigenen JavaScript-Code erweitert, der die Verwendung von Platzhaltern auch in Browsern ermĂśglicht, die selbst dafĂźr keine UnterstĂźtzung bieten.

Pflichtfelder und der Umgang mit dem * Zeichen

Es ist weit verbreitet in Formularen das * Zeichen zu verwenden, um dem Benutzer anzuzeigen, dass ein Formularfeld ein Pflichtfeld ist, welches er auf jeden Fall ausfßllen muss. Meinungen darßber, ob ein * Zeichen ßberhaupt angezeigt werden soll, und wo es genau zu platzieren ist, gehen weit auseinander. Visforms versucht deshalb, Ihnen Flexibilität bei der Anzeige des * Zeichens zu geben. An erster Stelle gibt es in der Formular Konfiguration im Reiter Erweitert eine Option, mit der Sie die Anzeige des * Zeichens abstellen kÜnnen (Required * anzeigen).

Sie kĂśnnen dem Formular weiterhin einen Informationstext “Pflichtfeld *” hinzufĂźgen. Über die Option “Position fĂźr Text Pflichtfeld” kĂśnnen Sie festlegen, ob dieser Text angezeigt werden soll und wenn ja wo:

  • oberhalb der Felder
  • unterhalb der Felder aber Ăźber dem Captcha (falls Sie eines aktiviert haben)
  • oberhalb der Formular-Button (=unten).

Weiterhin wird das * Zeichen nicht direkt mit HTML Code erzeugt und in das Formular hineingeschrieben, sondern er wird mithilfe von CSS erzeugt.

Hinweis: Die CSS-Erzeugung des * Zeichens bietet Ihnen wesentlich mehr MÜglichkeiten, sowohl die Position als auch das Aussehen des * selbst per CSS zu verändern.

Position des “Benutzerdefinierten Texts”

Sie kÜnnen selbst festlegen, wo ein benutzerdefinierter Text im Verhältnis zum Control angezeigt werden soll. Dies geschieht in der Feld Konfiguration im Reiter Erweitert mithilfe des Parameters Position Benutzerdefinierter Text. Sie haben die Wahl zwischen drei Positionen:

  • Ăźber dem Label,
  • Ăźber dem Eingabefeld und
  • unter dem Eingabefeld.

Wobei die ersten beiden Positionen nur fĂźr das Standard Bootstrap Layout optisch auch zu einem anderen Ergebnis fĂźhren. In den beiden anderen Layouts stehen Label und Eingabefeld ja eh in einer Zeile.