Personalizzazione delle colonne dei campi a scelta multipla sui dispositivi mobili

Introduzione

Volete personalizzare il numero di colonne visualizzate nella vista mobile per i campi a scelta multipla? Per impostazione predefinita, i campi a scelta multipla in WPForms vengono visualizzati come colonne singole. Tuttavia, potrete personalizzarli con uno snippet CSS personalizzato.

In questo tutorial vi mostreremo come utilizzare una visualizzazione a 2 colonne nella vista mobile per i campi a scelta multipla di WPForms (caselle di controllo e scelta multipla).

Creazione del modulo

Per seguire questa esercitazione, è necessario creare un nuovo modulo o modificarne uno esistente per accedere al costruttore di moduli. Nel costruttore di moduli, assicurarsi di aggiungere al modulo il campo Caselle di controllo o Scelta multipla.

Successivamente, fare clic sul campo a scelta multipla per accedere al pannello Opzioni campo. Passare quindi alla scheda Avanzate.

Selezionare la scheda Avanzate

Qui, selezionare l'opzione Layout di scelta e scegliere l'opzione Due colonne.

Selezionare il layout a due colonne

Quando si visualizza il modulo, vengono visualizzate due colonne per le caselle di controllo o i campi a scelta multipla. Tuttavia, sui dispositivi mobili, ogni scelta verrà visualizzata in un'unica colonna.

Visualizzazione a colonna singola su mobile

In questo tutorial vi mostreremo come utilizzare i CSS personalizzati per forzare i campi a scelta multipla e le caselle di controllo a mantenere il layout a colonne su un display mobile.

Aggiunta dello snippet

Per iniziare, aggiungeremo prima lo snippet al sito. Se avete bisogno di aiuto su come e dove aggiungere gli snippet, consultate questa utile documentazione.

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

Assicurarsi di sostituire #wpforms-form-2525 con l'ID del modulo specifico a cui si desidera applicare le modifiche. Vedere il nostro tutorial per imparare come recuperare l'ID del modulo e l'ID del campo se avete bisogno di aiuto.

Questo snippet assicura che le caselle di controllo e i campi a scelta multipla che utilizzano il layout a 2 colonne mantengano il layout nella visualizzazione mobile.

Visualizzazione a due colonne nella vista Mobile

Ecco fatto! Ora avete imparato a personalizzare il layout delle colonne per i campi a scelta multipla (caselle di controllo e scelta multipla) nella visualizzazione mobile.

Volete conoscere altri modi per personalizzare i campi di WPForms? Date un'occhiata al nostro tutorial sull'aggiunta di un'opzione Seleziona tutto al campo Caselle di controllo in WPForms.