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 die UI-Frameworks
- Bootstrap 2,
- Bootstrap 3,
- Bootstrap 4,
- UIkit2 und
- UIkit 3.
Diese bieten optimales Ergebnisse bei Verwendung von Visforms auf Webseiten mit Templates, die auf diesen UI-Frameworks basieren. Sie 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 4 | Bootstrap 5 | Uikit 2 | Uikit 3 |
|---|---|---|---|---|---|
| Text | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| Password | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
| 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.