Erstellen von mehrspaltigen Formularlayouts mit CSS-Klassen

Möchten Sie Ihre Formulare verdichten, indem Sie Felder in mehreren Spalten anzeigen? WPForms erleichtert das Aufteilen von Formularen in Hälften, Drittel oder noch komplexere Layouts.

Diese Anleitung zeigt Ihnen, wie Sie unsere Einstellungen für Mehrspaltenlayouts verwenden, damit Ihre Formulare optimal aussehen.

---

Bevor Sie beginnen, müssen Sie sicherstellen, dass WPForms auf Ihrer WordPress-Site installiert und aktiviert ist und dass Sie Ihre Lizenz verifiziert haben. Dann können Sie ein neues Formular erstellen oder ein vorhandenes bearbeiten, um auf den Formular-Generator zuzugreifen.

Erstellen von Mehrspaltenformularen mit visuellen Layouts

WPForms enthält ein visuelles Layout-Tool, mit dem Sie mehrere Spalten ohne Code erstellen können.

Um auf dieses Tool zuzugreifen, klicken Sie auf ein beliebiges Feld im Builder, um dessen Feldoptionen-Panel zu öffnen. Klicken Sie dann auf die Registerkarte Erweitert.

Öffnen Sie das Tool für visuelle Layouts, indem Sie neben der Option CSS-Klassen auf Layouts anzeigen klicken.

Dadurch werden mehrere vordefinierte Layout-Optionen angezeigt, die Sie in Ihrem Formular verwenden können.

Für unser Beispiel möchten wir, dass unsere Felder für Name und E-Mail nebeneinander erscheinen und jedes die Hälfte der Formularbreite einnimmt. Um dieses Layout zu erstellen, wählen wir die Option, die zwei gleich große Felder anzeigt.

Sobald wir dieses Layout ausgewählt haben, müssen wir auswählen, in welcher Spalte dieses spezielle Feld erscheinen soll. Da unser Namensfeld das erste in unserem Formular ist, möchten wir, dass es in der linken Spalte erscheint.

Wenn Sie in das visuelle Layout-Tool auf eine Spalte klicken, werden die entsprechenden Klassen automatisch zur Einstellung CSS-Klassen des Feldes hinzugefügt. Die Klasse wpforms-one-half weist das Feld an, die Hälfte der verfügbaren Breite einzunehmen, während die Klasse wpforms-first dem Feld mitteilt, dass es eine neue Zeile beginnen muss.

Als Nächstes müssen wir den gleichen Vorgang für unser E-Mail-Feld durchführen. Wir werden es jedoch in die rechte Spalte setzen.

Wenn Sie mit dem Hinzufügen Ihrer Felder zu Ihrem Layout fertig sind, stellen Sie sicher, dass Sie Ihre Änderungen im Formular-Builder speichern.

So sieht unser Beispiel für ein Mehrspaltenlayout auf der Frontend-Seite unserer Website aus:

Manuelles Hinzufügen von Mehrspalten-CSS-Klassen

Wenn Sie das Tool für visuelle Layouts nicht verwenden möchten, können Sie CSS-Klassen manuell in das entsprechende Feld im Tab Erweitert des Panels Feldoptionen eingeben.

Hier sind alle verfügbaren CSS-Klassen für Mehrspaltenlayouts:

• wpforms-eine-hälfte
• wpforms-ein-drittel
• wpforms-ein-viertel
• wpforms-ein-fünftel
• wpforms-ein-sechstel
• wpforms-zwei-drittel
• wpforms-zwei-viertel
• wpforms-zwei-fünftel
• wpforms-zwei-sechstel
• wpforms-drei-viertel
• wpforms-drei-fünftel
• wpforms-drei-sechstel
• wpforms-vier-fünftel
• wpforms-vier-sechstel
• wpforms-fünf-sechstel

Das Bild unten zeigt 3 verschiedene gängige Mehrspaltenlayouts. Die Beschriftungen geben an, welche CSS-Klassen aus der obigen Liste verwendet wurden.

Zusätzliche Hinweise zur Verwendung von Mehrspaltenlayouts

Bei der Verwendung von Spaltenklassen gibt es einige wichtige Dinge zu beachten:

• Spalten gelten nicht im Formular-Builder. Sie sind nur sichtbar, wenn Sie das Formular auf der Frontend-Seite Ihrer Website anzeigen. Testen Sie Ihre Formulare immer vor der Veröffentlichung, um sicherzustellen, dass Sie mit ihren Layouts zufrieden sind.
• Das erste Feld in jeder Zeile muss zusätzlich zu seiner Spaltenklasse die Klasse wpforms-first haben. Dies teilt dem Plugin mit, dass es sich um das erste Element handelt und setzt alle vorherigen Spalten im Formular zurück.
• In den meisten Fällen sollten Sie bei der Verwendung von Spaltenklassen die Feldgröße (ebenfalls im Tab „Erweitert“ des Panels „Feldoptionen“) auf Groß setzen. Dadurch kann das Feld den gesamten verfügbaren Platz in seiner Spalte ausfüllen und hält den rechten und linken Abstand zu benachbarten Feldern gleichmäßig.

• Wenn Sie ein Mehrspaltenlayout mit bedingten Feldern verwenden, werden alle Felder, die bedingt angezeigt werden, linksbündig ausgerichtet. Um diese Felder gemäß Ihrem bevorzugten Layout auszurichten, können Sie diesen CSS-Schnipsel verwenden:

Häufig gestellte Fragen

Dies sind Antworten auf einige Top-Fragen zur Erstellung von Mehrspalten-Formularlayouts.

Warum funktioniert das Mehrspaltenlayout nicht, wenn ich mein Formular in der Vorschau anzeige?

Wenn „Modern Markup“ in Ihren WPForms-Einstellungen aktiviert ist, funktionieren die CSS-Klassen für Mehrspalten nicht, wenn Sie Ihr Formular im Frontend anzeigen. Um dieses Problem zu beheben, müssen Sie „Modern Markup“ deaktivieren.

Gehen Sie dazu zu WPForms » Einstellungen und wählen Sie den Tab Allgemein.

Scrollen Sie danach nach unten und deaktivieren Sie die Option Modern Markup verwenden.

Stellen Sie sicher, dass Sie Ihre Änderungen speichern, sobald Sie fertig sind.

Das ist alles! Sie können Ihre Formulare jetzt mit Mehrspaltenlayouts optimieren.

Möchten Sie als Nächstes Ihre Formulare auch auf Mobilgeräten gut aussehen lassen? Sie können Ihr Formular so konfigurieren, dass es ein Mehrspaltenlayout hat, das sich auf Mobilgeräten in einer einzelnen Spalte anzeigt, damit es auf jedem Gerät benutzerfreundlich ist.