Anpassen von Spalten für Multiple-Choice-Felder auf Mobilgeräten

Einleitung

Möchten Sie die Anzahl der Spalten anpassen, die in der mobilen Ansicht für Multiple-Choice-Felder angezeigt werden? Standardmäßig werden Multiple-Choice-Felder in WPForms als einzelne Spalten angezeigt. Sie können dies jedoch mit einem benutzerdefinierten CSS-Snippet anpassen.

In diesem Tutorial zeigen wir Ihnen, wie Sie eine 2-Spalten-Anzeige in der mobilen Ansicht für WPForms-Mehrfachauswahlfelder (Kontrollkästchen und Multiple Choice) verwenden.

Erstellen Ihres Formulars

Um diesem Tutorial folgen zu können, müssen Sie ein neues Formular erstellen oder ein vorhandenes bearbeiten, um auf den Formular-Generator zuzugreifen. Stellen Sie im Formular-Generator sicher, dass Sie entweder das Kontrollkästchen- oder das Multiple Choice-Feld zu Ihrem Formular hinzufügen.

Klicken Sie anschließend auf das Multiple-Choice-Feld, um dessen Feldoptionen-Panel aufzurufen. Navigieren Sie dann zur Registerkarte Erweitert.

Wählen Sie hier die Option Layout der Auswahlmöglichkeiten und wählen Sie die Option Zwei Spalten.

Wenn Sie Ihr Formular anzeigen, wird es für das Kontrollkästchen- oder Multiple-Choice-Feld in 2 Spalten angezeigt. Auf Mobilgeräten wird jedoch jede Auswahlmöglichkeit in einer einzelnen Spalte angezeigt.

In diesem Tutorial zeigen wir Ihnen, wie Sie benutzerdefiniertes CSS verwenden, damit Multiple-Choice- und Kontrollkästchen-Felder das Spaltenlayout auf einem mobilen Display beibehalten.

Hinzufügen des Snippets

Zuerst fügen wir den Snippet zur Website hinzu. Wenn Sie Hilfe benötigen, wie und wo Sie Snippets hinzufügen können, lesen Sie bitte diese hilfreiche Dokumentation.

/**
 * Customizing Multiple Choice Field Column on Mobile Display
 *
 * @link   https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/
 */
 
 /* Checkboxes and Radio Buttons */
 @media screen and (max-width: 600px) {
    /* Target both checkbox and radio fields */
    #wpforms-form-2525 .wpforms-field-checkbox ul,
    #wpforms-form-2525 .wpforms-field-radio ul {
        display: flex;
        flex-wrap: wrap;
        margin: 0; /* Reset any default margins */
        padding: 0; /* Reset any default padding */
    }

    /* Target list items in 2-column layouts */
    #wpforms-form-2525 .wpforms-list-2-columns ul li {
        width: calc(50% - var(--wpforms-field-size-input-spacing));
        margin-right: var(--wpforms-field-size-input-spacing);
        box-sizing: border-box; /* Ensure padding doesn't affect width */
    }

    /* Remove margin from every second item to prevent overflow */
    #wpforms-form-2525 .wpforms-list-2-columns ul li:nth-child(2n) {
        margin-right: 0;
    }
}

Ersetzen Sie #wpforms-form-2525 durch die ID des spezifischen Formulars, auf das Sie diese Änderungen anwenden möchten. Sehen Sie sich unser Tutorial an, um zu erfahren, wie Sie die Formular-ID und Feld-ID abrufen, falls Sie dabei Hilfe benötigen.

Dieser Snippet stellt sicher, dass Kontrollkästchen- und Multiple-Choice-Felder, die das 2-Spalten-Layout verwenden, das Layout auch in der mobilen Ansicht beibehalten.

Das war's! Jetzt haben Sie gelernt, wie Sie das Spaltenlayout für Mehrfachauswahlfelder (Kontrollkästchen und Multiple Choice) in der mobilen Ansicht anpassen.

Möchten Sie weitere Möglichkeiten zur Anpassung von WPForms-Feldern kennenlernen? Sehen Sie sich unser Tutorial zum Hinzufügen einer Option "Alle auswählen" zum Kontrollkästchen-Feld in WPForms an.