Gravity Forms Felder horizontal anordnen

Von Haus aus kann man mit Gravity Forms vertikal angeordnete Formulare erstellen. Wenn man nur einen schmalen Inhaltsbereich zur Verfügung hat, kann das okay sein. Sind die Formularfelder aber schmal und die Seitenbreite groß, verschenkt man viel Platz und zwingt den Nutzer zum Scrollen. Vor allem bei kleinen Formularen wie z.B. Newsletteranmeldungen (wo ja meistens nur Name und Email-Adresse abgefragt werden) macht es Sinn, diese horizontal anzuordnen.

Gravity Forms Vorlagen verwenden – CSS Ready Classes

Die Gravity Forms Entwickler haben sich dieses Problems bereits vor Jahren angenommen und das Konzept der CSS Ready Classes eingeführt. CRC sind Designvorlagen, die man Formularen und deren Feldern zuweisen kann. Alle von GF zur Verfügung gestellten CRC findet ihr auf der Hilfeseite. Man kann natürlich auch eigene CRC schreiben. Aber wir nehmen jetzt einfach eine bereits existierende Klasse, um unsere Formularfelder nebeneinander auszurichten.

Das ist jetzt wirklich quick and dirty. Einfach unter dem Reiter „Aussehen“ bei „Individuelle CSS-Klasse“ in allen Feldern eures Formulars diese CRC eintragen:

gf_inline

Die Jungs und Mädels von Gravitywiz empfehlen zusätzlich auch noch dem gesamten Formular die Klasse

gf_simple_horizontal

zuzuweisen. Im Normalfall reicht aber schon die gf_inline Klasse aus, um das Formular auf horizontal umzustellen.

CSS Klassen in Gravity Forms

CSS Klassen in Gravity Forms

In der Editor-Ansicht ändert sich nichts, aber bereits in der Formularvorschau müsste sich in etwa so ein Ergebnis zeigen:
Ein mittels CSS Ready Classes horizontal angeordnetes Gravity Forms Formular

horizontales Gravity Forms Formular

Was zu beachten ist

Hierbei handelt es sich nicht um „echte“ Spalten und sollte auch nicht auf komplexere Formulare angewandt werden. Echte und immer gleich breite Spalten erzeugt man mit CSS Ready Classes wie z.B. gf_x_third oder gf_x_half.
Die Feldbeschreibung darf auch nicht neben dem Feld stehen. Es bedarf auch noch etwas manueller Anpassung des CSS Codes, um das Ganze auch responsiv gut aussehen zu lassen, aber fürs Erste ist das eine einfach zu händelnde und schnell umgesetzte Problemlösung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.