Neueste Subscription Feature

Mehr erfahren

Feldtyp Signatur

Mehr erfahren

Feldtyp Standort

Mehr erfahren

Feldtyp Berechnung

Mehr erfahren

Mehrseitige Formulare

Formular Layout durch Konfiguration anpassen

Visforms versucht sich so weit wie möglich ins Look&Feel Ihrer Webseite einzupassen, indem es nur das nötigste eigene CSS mitbringt. Die meisten Formatierungsregeln kommen aus dem CSS Ihres Templates.

Das funktioniert in der Regel gut, weil Templates heutzutage meist mit sogenannten Template-Frameworks erstellt werden, die die schnelle und einfache Entwicklung ansprechender und bei Bedarf responsiver Frontend Layouts ermöglicht. Hierzu muss man die richtige HTML Code Struktur mit den korrekten Framework class Attributen liefern. Joomla! 3 setzt hierbei auf das Template Framework Bootstrap 2.3.2.

Formular Layouts

Visforms verfügt über ein robustes "Default Layout", das in Verbindung mit vielen Templates gut aussieht und gut funktioniert. Allerdings passt sich diese Layout nicht so weitgehend ins Look&Feel vieler Bootstrap Templates ein wie spezielle Layouts die für Bootstrap entwickelt wurde. Auch reagiert das "Default Layout" nur begrenzt responsiv.

Visforms stellt neben seinem "Default Layout" eine Reihe von Formular Layouts zur Verfügung, die entsprechenden Bootstrap 2.3.2 konformen HTML Code generieren. In der freien Version haben sie die Auswahl zwischen

  • Default Layout
  • Standard Bootstrap Layout (implementiert die "default form styles" für Boostrap 2.3.2)
  • Horizontales Bootstrap Layout (implementiert den Bootstrap 2.3.2 Code für "horizontal forms")
  • Mehrspaltiges Layout (verwendet das Bootstrap 2.3.2 Grid)

Die Visforms Subscription stellt darüber hinaus Layouts zur Verfügung, die mit Bootstrap 3 kompatibel sind

  • Standard Bootstrap 3 Layout (implementiert die "default form styles" für Boostrap 3)
  • Horizontales Bootstrap 3 Layout (implementiert den Bootstrap 3 Code für "horizontal forms")
  • Mehrspaltiges Layout Bootstrap 3 (verwendet das Bootstrap 3 Grid)

Sie können das Formular Layout in der Konfiguration des Formulars im Tab "Erweitert" einstellen. Da nicht alle Joomla! 3 Templates Bootstrap Templates sind, haben Sie weiterhin die Option auszuwählen, ob Sie das original Bootstrap Formular CSS einbinden wollen oder nicht. Stellen Sie die Option "Bootstrap CSS für Formular laden" nur auf "ja", wenn Sie kein Bootstrap Template verwenden. Wenn Sie auf Ihrer Webseite ein Bootstrap Template verwenden, bringt dieses das benötigte CSS, evtl. in speziell für das Template modifizierten Form, bereits mit.

Zum Vergrößern auf das Vorschaubild klicken.

  • Default Visforms Layout

    Default Visforms Layout

    Label und Eingabefeld stehen in einer Zeile, das Label ist linksbündig.

  • Standard Bootstrap Layout

    Standard Bootstrap Layout

    Das Label steht über dem Eingabefeld.

  • Horizontales Bootstrap Layout

    Horizontales Bootstrap Layout

    Label und Eingabefeld stehen in einer Zeile, das Label ist rechsbündig ausgerichtet.

Label verstecken und Platzhalter Attribute verwenden

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 mit Hilfe des HTML Attributs "placeholder" erzeugt.

Sie finden in der Feld Konfiguration in der Administration Ihrer Webseite für alle Feldtypen, die einen Platzhalter erlauben, eine Option, mit der Sie einen individuellen Platzhaltertext festlegen können.

Darüber hinaus haben Sie für alle Feldtypen, die Platzhalter erlauben, die Möglichkeit, die Anzeige des Feldlabels zu unterdrücken. Haben Sie in der Platzhalter-Option keinen Platzhaltertext hinterlegt, so wird in diesem Fall automatisch des Label des Feldes als Platzhaltertext verwendet, um dem Benutzer der Webseite anzuzeigen, welche Information er in das Eingabefeld eintragen soll.

Bitte beachten Sie, dass die Anzeige eines "Tips Text" an das Feldlabel gebunden ist, da der Text als Tooltip beim Hovern der Maus über dem Feldlabel angezeigt wird. Ohne Feldlabel wird deshalb auch kein "Tips Text" angezeigt.

Da insbesondere der Internet Explorer Platzhalter erst ab Version 10 unterstützt, wurde Visforms um Javascript-Code erweitert, der die Verwendung von Platzhaltern auch in Browsern, die selbst keine Platzhalter-Unterstützung haben, ermöglicht.

Pflichtfelder und der Umgang mit dem *

Es ist weit verbreitet in Formularen einen * zu verwenden, der z.B. neben dem Feld-Label platziert wird, um dem Benutzer anzuzeigen, dass ein Formularfeld ein Pflichtfeld ist, welches er auf jeden Fall ausfüllen muss. Die Meinung darüber, ob ein * überhaupt angezeigt werden soll und wo er dann zu platzieren ist, gehen weit auseinander. Deshalb versucht Visforms, Ihnen Flexibilität bei der Anzeige des * zu geben. An erster Stelle gibt es in der Formular Konfiguration im Tab "Erweitert" einen Option, mit der Sie die Anzeige des * vollständig 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, oder oberhalb der Formular-Button (=unten)).

Weiterhin wird der * nicht direkt mit HTML Code erzeugt und in das Formular hineingeschrieben, sondern er wird mit Hilfe von CSS erzeugt. Dies 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 Tab "Erweitert" mit Hilfe des Parameters "Position Benutzerdefninierter Text". Sie haben die Wahl zwischen drei Positionen:

  • Über dem Label
  • Über Eingabefeld
  • Unter Eingabefeld

wobei die ersten beiden Positionen nur für das Standard Bootstrap Layout optisch auch zu einem anderen Ergebnis führen, da in den beiden anderen Layouts Label und Eingabefeld ja in einer Zeile stehen.

Was nicht funktioniert

Manche Template-Hersteller verwenden andere Template Frameworks (wie z.B. YOOTheme mit dem Wrap Theme Framework). Diese Frameworks liefern zwar auch responsive Templates, aber sie sind oft nicht mit dem von Joomla! favorisierten Bootstrap Code konform. Stattdessen verwenden diese Frameworks eigene HTML Strukturen und CSS Klassen und modifizieren auch den von Joomla! gelieferten Quellcode selbst, um ihn an das Framework anzupassen. Erfahrungsgemäß können Sie die responisven Bootstrap-Layouts von Visforms mit solch einem Template nicht verwenden, sondern nur das Visforms Default-Layout.

Zur Beitragsliste