KI-Zusammenfassung
Möchten Sie mehr Kontrolle über das Layout Ihrer WordPress-Formulare haben? Das Layout-Feld für WPForms bietet eine leistungsstarke Lösung zum Erstellen erweiterter Formularlayouts, die sich automatisch an die Bildschirmgröße der Benutzer anpassen.
Dieses Tutorial zeigt Ihnen, wie Sie das Layout-Feld in WPForms verwenden.
Bevor Sie beginnen, stellen Sie sicher, dass Sie WPForms installiert und aktiviert und Ihre Lizenz verifiziert haben. Erstellen Sie dann ein neues Formular oder bearbeiten Sie ein vorhandenes, um auf den Formular-Generator zuzugreifen.
Hinzufügen eines Layout-Felds zu Ihrem Formular
Im Formular-Generator finden Sie das Layout-Feld im Abschnitt Erweiterte Felder. Klicken Sie auf das Layout-Feld oder ziehen Sie es per Drag & Drop in den Vorschau-Bereich, um es Ihrem Formular hinzuzufügen.
Auswählen eines Spaltenlayouts
Sobald Sie Ihrem Formular ein Layout-Feld hinzugefügt haben, ist es an der Zeit, Ihr bevorzugtes Layout auszuwählen.
Das Layout-Feld bietet mehrere Optionen zum Anordnen Ihrer Formularfelder in verschiedenen Spalten. Um das Bedienfeld „Feldoptionen“ zu öffnen und die verfügbaren Spaltenlayouts anzuzeigen, klicken Sie auf das Layout-Feld im Formular-Vorschau-Bereich.
Nun sehen Sie mehrere verfügbare Layouts mit 1 bis 4 Spalten. Standardmäßig wählt das Layout-Feld das 2-Spalten-Layout mit 2 gleich breiten Spalten aus.
Wir verwenden das Standardlayout in diesem Tutorial, aber die Funktionalität bleibt für alle Layouts gleich.
Hinweis: Ihre Formularfelder werden nicht korrekt angezeigt, wenn Sie zuvor die CSS-Klassenoption verwendet haben, um ein Mehrspaltenlayout zu aktivieren. Weitere Informationen finden Sie in unseren FAQ.
Festlegen der Feldanzeigereihenfolge
Das Dropdown-Menü Anzeige bestimmt, wie Felder in Ihrem Formular geordnet werden. Felder in den neuen Layout-Feldern werden standardmäßig in Zeilen angezeigt, sodass Benutzer horizontal von links nach rechts durch das Formular navigieren können.
Um diese Reihenfolge zu ändern, klicken Sie auf das Dropdown-Menü Anzeige und wählen Sie die gewünschte Option.
Hinweis: Wenn Ihr Formular ein Layout-Feld mit mehreren gestapelten Feldern enthält, wird empfohlen, die Option Zeilen – Felder werden von links nach rechts geordnet aus dem Dropdown-Menü Anzeige zu verwenden. Dies stellt sicher, dass die Felder in der mobilen Ansicht, den Formularbenachrichtigungen und den Einträgen genau so angezeigt werden, wie Sie sie angeordnet haben, und bewahrt die beabsichtigte Formularstruktur und das Benutzererlebnis.
Layouts wechseln
Wenn Sie Layouts ändern möchten, auch nachdem Sie Felder zu einzelnen Spalten hinzugefügt haben, wählen Sie einfach eines der verfügbaren Layouts aus dem Bereich Feldoptionen aus.
Spalten und deren Inhalte passen ihre Größe und Position automatisch an die Bildschirmgröße des Benutzers an.
Hinweis: Wenn das neu ausgewählte Layout weniger Spalten enthält als das vorherige, werden alle Felder in der letzten Spalte aus dem Layout-Feld entfernt und in den Hauptteil Ihres Formulars verschoben.
Verwendung mehrerer Layouts
Wenn Sie möchten, können Sie Ihrem Formular mehrere Layout-Felder hinzufügen und für jedes eine andere Spaltenkonfiguration wählen.
Zum Beispiel kann ein Layout-Feld 1 Spalte haben und ein anderes Layout-Feld 2 Spalten, was Ihnen mehr Flexibilität bei der Darstellung Ihres Formulars gibt.
Um jedes Layout-Feld besser unterscheiden zu können, können Sie dem Feld Beschriftung im Bereich Feldoptionen eine Bezeichnung hinzufügen.
Da Layout-Felder als Container fungieren, sind sie die perfekte Lösung, um Elemente im Formular zu gruppieren.
Hinzufügen von Feldern zu einzelnen Spalten
Um ein Feld zu einer beliebigen Spalte hinzuzufügen, klicken und ziehen Sie das Feld aus der Seitenleiste in die Zielspalte.
Hinweis: Die Felder Layout, Seitenumbruch, Wiederholer und Eingabevorschau können nicht in ein Layout-Feld eingefügt werden.
Die meisten Felder, die dem Layout-Feld hinzugefügt werden, haben standardmäßig eine große Feldgröße, was bedeutet, dass sie die gesamte Breite der Spalte einnehmen. Die Feldgröße für die Felder Rich-Text und Absatztext wird jedoch durch die Höhe bestimmt und hat standardmäßig eine mittlere Feldgröße innerhalb des Layout-Feldes.
Für eine einstellbare Höhe des Absatztext-Feldes siehe unsere Entwicklerdokumentation.
Aktivieren der bedingten Logik
Das Layout-Feld unterstützt auch die Aktivierung von bedingter Logik, um ein gesamtes Layout-Feld basierend auf der Benutzerauswahl ein- oder auszublenden.
Hinweis: Sie benötigen WPForms Version 1.9.0 oder höher, um auf die Funktion für bedingte Logik für das Layout-Feld zugreifen zu können.
Um bedingte Logik zu aktivieren, klicken Sie auf das Layout-Feld, um dessen Feldoptionen zu öffnen. Navigieren Sie dann zum Tab Intelligente Logik.
Dort angekommen, schalten Sie die Option Bedingte Logik aktivieren auf EIN.
Nach der Aktivierung erscheinen zusätzliche Optionen zur Konfiguration der Regel für bedingte Logik. In unserem Beispiel haben wir ein Feld für Mehrfachauswahl hinzugefügt, das die Benutzer fragt, ob sie eine Bewertung hinterlassen möchten. Dann haben wir die Regel so eingestellt, dass dieses Feld angezeigt wird, wenn Möchten Sie eine Bewertung hinterlassen? Ja ist.
Diese Regel blendet alle Felder innerhalb des Layout-Feldes aus, wenn Sie Ihr Formular veröffentlichen. Die Felder werden nur angezeigt, wenn der Benutzer Ja aus den Optionen des Mehrfachauswahlfeldes auswählt.
Nachdem die bedingte Logik für ein Layout-Feld aktiviert wurde, wird die Option zur Verwendung bedingter Logik für einzelne Felder innerhalb des Layout-Feldes deaktiviert.
Hinweis: Für weitere Details, wie bedingte Logik funktioniert, lesen Sie unseren vollständigen Leitfaden zur Verwendung bedingter Logik in WPForms.
Entfernen eines Layout-Felds aus Ihrem Formular
Wenn Sie ein Layout-Feld aus Ihrem Formular entfernen möchten, fahren Sie mit der Maus über das Feld und klicken Sie auf das Papierkorb-Symbol.
Da das Löschen eines Layout-Feldes auch alle darin enthaltenen Felder löscht, erscheint eine Überlagerung, die Sie auffordert, das Löschen zu bestätigen. Klicken Sie auf OK, wenn Sie zustimmen, das Layout-Feld und alle darin enthaltenen Felder zu löschen.
Hinweis: Sie können keine der Felder wiederherstellen, die Sie in das Layout-Feld eingefügt haben, sobald sie gelöscht wurden.
Vorschau Ihres Formulars
Sobald Sie Felder zu den Spalten in Ihren Layout-Feldern hinzugefügt haben, speichern Sie Ihre Änderungen, indem Sie auf Speichern klicken.
Klicken Sie dann auf die Schaltfläche Vorschau, um die Formularvorschau in einem neuen Tab zu öffnen.
Auf der Vorschauseite sehen Sie eine funktionierende Version Ihres Formulars. Hier können Sie mit Ihrem Formular interagieren und dessen visuelles Layout testen. Sie können auch testen, wie gut Ihr Formular auf verschiedenen Bildschirmgrößen funktioniert.
Häufig gestellte Fragen
Dies sind Antworten auf einige Top-Fragen zur Erstellung von Mehrspalten-Formularlayouts.
Warum wird das Layout-Feld in der Vorschau meines Formulars nicht richtig angezeigt?
Wenn Sie zuvor die Option CSS-Klassen verwendet haben, um mehrere Spalten in Ihrem Formular zu erstellen, wird dies die ordnungsgemäße Funktion des Layout-Feldes verhindern. Sie müssen die CSS-Klassen aus Ihren Formularfeldern entfernen, bevor Sie das Layout-Feld verwenden.
Öffnen Sie dazu den Formular-Builder und klicken Sie auf das Feld, das Sie bearbeiten möchten, um das Panel Feldoptionen zu öffnen. Navigieren Sie dann zur Registerkarte Erweitert und entfernen Sie die CSS-Klasse(n) für mehrere Spalten aus dem Feld CSS-Klassen.
Nachdem Sie die CSS-Klassen entfernt haben, stellen Sie sicher, dass Sie Ihre Änderungen speichern und Ihr Formular in der Vorschau anzeigen, um sicherzustellen, dass es wie erwartet aussieht und funktioniert.
Kann ich ein Layout-Feld basierend auf der Benutzerauswahl anzeigen oder ausblenden?
Ja, Sie können ein Layout-Feld in Ihren Formularen anzeigen oder ausblenden, abhängig von den Antworten Ihrer Benutzer. Dies erfordert die Aktivierung der bedingten Logik für das spezifische Layout-Feld, das Sie ausblenden möchten. Weitere Details finden Sie in unserem Abschnitt zur bedingten Logik.
Kann ich den Senden-Button in derselben Zeile wie das Layout-Feld ausrichten?
Ja. Wenn Sie das Layout-Feld verwenden möchten, um ein einzeiliges Formular zu erstellen, müssen Sie auf der Einstellungsseite des Formulars eine benutzerdefinierte CSS-Klasse hinzufügen.
Gehen Sie dazu in Ihrem Formular-Builder zu Einstellungen » Allgemein und fügen Sie die CSS-Klasse inline-fields zum Feld Formular-CSS-Klasse hinzu.
Hinweis: Die Verwendung der inline-fields-Klasse in WPForms kann manchmal mit den Stilen Ihres WordPress-Themes in Konflikt geraten. Um mehr zu erfahren, lesen Sie unbedingt unser Tutorial zum Anzeigen von Formularen in einer einzigen Zeile.
Das ist alles! Sie wissen jetzt, wie Sie das Layout-Feld in WPForms verwenden.
Möchten Sie als Nächstes wissen, wie Sie verschiedene Optionen in Ihrem Formular basierend auf Benutzerinteraktionen anzeigen können? Sehen Sie sich unsere Anleitung zur Verwendung der bedingten Logik in WPForms an.