Gravity Forms Felder horizontal anordnen

Von Haus aus kann man mit dem WordPress Plugin 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 und die Bereitschaft, hier seine Daten zu hinterlassen sinkt zunehmend. Vor allem bei kleinen Formularen wie z.B. Newsletteranmeldungen (wo ja meistens nur Name und Email-Adresse abgefragt werden) ist es sinnvoll, diese horizontal anzuordnen und somit den ganzen Platz in der Breite zu nutzen.

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. CSS Ready Classes sind Designvorlagen (wenn man so will), die man Formularen und deren Feldern zuweisen kann. Alle von GF zur Verfügung gestellten CRC findet ihr auf der Hilfeseite. Man könnte 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

Diese CSS Klassen reihen einfach so viele Formularfelder nebeneinander an, wie Platz vorhanden ist. Passen nur zwei Felder in eine Zeile, dann rutscht das 3. Feld eben in die nächste Zeile. Folgen dann allerdings eher schmalere Felder, können auch 3, 4 oder 5 nebeneinander passen. Das sieht unter Umständen etwas nach Kraut und Rüben aus, weshalb ich das nicht für jedes Formular empfehle. Hierbei handelt es sich nämlich nicht um „echte“ Spalten. Echte und immer gleich breite Spalten erzeugt man mit anderen CSS Ready Classes wie z.B. gf_x_third oder gf_x_half.
Damit das funktioniert, darf die Feldbeschreibung auch nicht neben dem Eingabefeld stehen sondern jeweils darüber oder darunter. Es bedarf dann 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.

Ein kleines Helferlein – Plugin

Ich habe auch nicht alle CSS Ready Classes für Gravity Forms im Kopf, aber es gibt ein sehr nützliches Add-on Plugin, was einem da hilft: Das GravityWP – CSS Selector Plugin von GravityWP. Es gibt noch ein ähnlich lautendes und arbeitendes von Brad Vincent, was aber seit 5 Jahren nicht mehr aktualisiert wurde.

Das Plugin funktioniert sehr einfach.

1. Das entsprechende Formularfeld bearbeiten und zum Bereich „Aussehen“ wechseln.

Nach Aktivierung des CSS Ready Classes Plugin steht im Aussehen-Bereich eines Formularfeldes ein neuer Button zur Verfügung

Gravity Forms CSS Ready Classes: Das Formularfeld kann jetzt bearbeitet werden

Ihr seht, dass beim Eingabefeld „Individuelle CSS-Klasse“ ein Button hinzugekommen ist. Nach einem Klick auf diesen öffnet sich ein …

2. Modales Fenster mit Auswahl von CSS Ready Classes Funktionen

Auswahlfenster derzeit vorhandener Gravity Forms CSS Ready Classes

Aus den Gravity Forms CSS Ready Classes kann ausgewählt werden

Hinter diesen Punkten verbergen sich die einzelnen CSS Ready Classes. Einfach mal die Bereiche aufklappen und durchgehen, welche Schaltflächen sich da auftun.
Für unserer Beispiel entscheiden wir, dass wir 2 Formularfelder nebeneinander anordnen wollen und wählen daher „Two Columns (2)“ (wenn ihr wollt, dürft ihr euch gern in die Übersetzung von WordPress Plugins einbringen).

3. CSS Ready Class auswählen

Die Gravity Forms CSS Ready Class auswählen

Die entsprechende CSS Ready Class auswählen

Unser Feld ist das links angeordnete, also wählen wir „Left Half„. Beim folgenden Formularfeld würden wir dann zwingenderweise „Right Half“ wählen.

4. Die Einstellung im Formularfeld prüfen

Das Plugin trägt jetzt die gewählte CSS Ready Class in das „Individuelle CSS-Klasse“ Eingabefeld ein. Wie ihr seht, steht da jetzt nicht „Left Half“ sondern die exakte CSS Ready Class Bezeichnung.

Das Gravity Forms Formularfeld hat die CSS Ready Class übernommen

Diee CSS Ready Class wurde eingetragen

Prüft das auf Richtigkeit, dann das gesamte Formular aktualisieren und die Darstellung durch die Vorschau prüfen.

Schreibe einen Kommentar

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