KI-Zusammenfassung
Möchten Sie ein Formularlayout mit mehreren Spalten in eine einzelne Spalte konvertieren, wenn es auf Mobilgeräten angezeigt wird? Während die Verwendung mehrerer Spalten auf größeren Bildschirmen gut aussehen kann, werden Ihre Formulare professionell und einfach zu bedienen aussehen, wenn Sie auf kleineren Bildschirmen zu einem einspaltigen Formularlayout wechseln.
Diese Anleitung zeigt Ihnen, wie Sie Ihre Layouts mit mehreren Spalten nur für Benutzer, die Ihre Website auf einem Mobilgerät besuchen, in eine einzelne Spalte umwandeln.
Hinweis: Wir empfehlen die Verwendung des Layout-Felds für einen einfacheren Drag-and-Drop-Ansatz zum Erstellen erweiterter Formularlayouts, die sich automatisch an die Bildschirmgröße der Benutzer anpassen. Die in dieser Anleitung behandelten Layout-CSS-Klassen werden jedoch weiterhin unterstützt.
Bevor Sie beginnen, stellen Sie sicher, dass WPForms auf Ihrer WordPress-Website installiert und aktiviert ist und dass Sie Ihre Lizenz verifiziert haben. Anschließend können Sie ein neues Formular erstellen oder ein vorhandenes bearbeiten, um auf den Formular-Generator zuzugreifen.
Erstellen eines Formularlayouts mit mehreren Spalten
Mit WPForms können Sie ganz einfach Formulare mit mehreren Spalten erstellen. Erstellen wir in diesem Beispiel ein Zweispaltenlayout mit der folgenden CSS-Klasse: wpforms-one-half. Hier ist ein Beispiel dafür, wie unser Formular mit mehreren Spalten aussehen wird.
Hinweis: Das erste Feld in jeder Zeile im obigen Bild verwendet auch die Klasse wpforms-first (d. h. wpforms-one-half wpforms-first. Diese Klasse teilt dem Feld mit, dass es eine neue Zeile beginnen muss.
Nachdem wir ein zweispaltiges Formularlayout erstellt haben, möchten wir sicherstellen, dass die Formularfelder nur für Benutzer, die Ihre Website auf einem Mobilgerät besuchen, in einer einzelnen Spalte angezeigt werden.
Anzeigen von Feldern in einer einzigen Spalte auf Mobilgeräten
Um Felder auf Mobilgeräten in einer einzelnen Spalte anzuzeigen, müssen wir eine vordefinierte CSS-Klasse verwenden. Klicken Sie im Formular-Generator auf ein Feld, um die Feldoptionen anzuzeigen. Fügen Sie dann im Abschnitt Erweitert die Klasse wpforms-mobile-full in das Feld CSS-Klassen ein.
Machen Sie dasselbe schließlich für die anderen Felder im Formular und vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken, um die Änderungen zu übernehmen.
Für mobile Besucher wird Ihr Formularlayout mit mehreren Spalten nun als einzelne Spalte angezeigt. Hier ist ein Beispiel dafür, wie das Formular auf einem Mobilgerät aussehen würde:
Das ist alles! Sie können jetzt Formulare erstellen, die auf Mobilgeräten von Layouts mit mehreren Spalten zu einer einzelnen Spalte wechseln.
Möchten Sie als Nächstes das Erscheinungsbild Ihres Formulars weiter anpassen? Dann lesen Sie unbedingt unsere Anleitung zum Hinzufügen von benutzerdefiniertem CSS zu Ihrem Formular.