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

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.