Personnalisation des colonnes de champs à choix multiples sur les appareils mobiles

Introduction

Souhaitez-vous personnaliser le nombre de colonnes affichées en vue mobile pour les champs à choix multiples ? Par défaut, les champs à choix multiples dans WPForms s'affichent en une seule colonne. Cependant, vous pourrez le personnaliser avec un extrait de CSS personnalisé.

Dans ce tutoriel, nous vous montrerons comment utiliser un affichage en 2 colonnes en vue mobile pour les champs à choix multiples (cases à cocher et choix multiples) de WPForms.

Création de votre formulaire

Pour suivre ce tutoriel, vous devrez créer un nouveau formulaire ou modifier un formulaire existant pour accéder au constructeur de formulaires. Dans le constructeur de formulaires, assurez-vous d'ajouter soit le champ Cases à cocher, soit le champ Choix multiples à votre formulaire.

Après cela, cliquez sur le champ à choix multiples pour accéder à son panneau Options de champ. Ensuite, accédez à l'onglet Avancé.

Ici, sélectionnez l'option Disposition des choix et choisissez l'option Deux colonnes.

Lorsque vous visualisez votre formulaire, il s'affichera en 2 colonnes pour le champ Cases à cocher ou Choix multiples. Cependant, sur les appareils mobiles, chaque choix s'affichera dans une seule colonne.

Dans ce tutoriel, nous vous montrerons comment utiliser du CSS personnalisé pour forcer les champs Choix multiples et Cases à cocher à conserver la disposition en colonnes sur un affichage mobile.

Ajout de l'extrait

Pour commencer, nous allons d'abord ajouter l'extrait au site. Si vous avez besoin d'aide sur comment et où ajouter des extraits, veuillez consulter cette documentation utile.

/**
 * 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;
    }
}

Assurez-vous de remplacer #wpforms-form-2525 par l'ID du formulaire spécifique auquel vous souhaitez appliquer ces modifications. Consultez notre tutoriel pour savoir comment récupérer l'ID du formulaire et l'ID du champ si vous avez besoin d'aide.

Cet extrait garantira que les champs Cases à cocher et Choix multiples qui utilisent la disposition en 2 colonnes conservent cette disposition en vue mobile.

C'est tout ! Vous savez maintenant comment personnaliser la disposition des colonnes pour les champs à choix multiples (Cases à cocher et Choix multiples) en vue mobile.

Vous souhaitez en savoir plus sur la personnalisation des champs WPForms ? Consultez notre tutoriel sur l'ajout d'une option Tout sélectionner au champ Cases à cocher dans WPForms.