Personalizzazione delle colonne dei campi a scelta multipla sui dispositivi mobili

Introduzione

Desideri 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, potrai personalizzarlo con uno snippet CSS personalizzato.

In questo tutorial, ti mostreremo come utilizzare una visualizzazione a 2 colonne nella vista mobile per i campi WPForms a scelta multipla (Checkbox e Scelta multipla).

Creazione del tuo modulo

Per seguire questo tutorial, dovrai creare un nuovo modulo o modificare uno esistente per accedere al generatore di moduli. Nel generatore di moduli, assicurati di aggiungere il campo Checkbox o Scelta multipla al tuo modulo.

Successivamente, fai clic sul campo a scelta multipla per accedere al suo pannello Opzioni campo. Quindi, vai alla scheda Avanzate.

Qui, seleziona l'opzione Layout scelta e scegli l'opzione Due colonne.

Quando visualizzi il tuo modulo, questo mostrerà 2 colonne per il campo Checkbox o Scelta multipla. Tuttavia, sui dispositivi mobili, ogni scelta verrà visualizzata in una singola colonna.

In questo tutorial, ti mostreremo come utilizzare CSS personalizzato per forzare i campi Scelta multipla e Checkbox a mantenere il layout a colonne su una visualizzazione mobile.

Aggiunta dello Snippet

Per iniziare, aggiungeremo prima lo snippet al sito. Se hai bisogno di aiuto su come e dove aggiungere snippet, assicurati di consultare 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;
    }
}

Assicurati di sostituire #wpforms-form-2525 con l'ID del modulo specifico a cui desideri applicare queste modifiche. Consulta il nostro tutorial per scoprire come recuperare l'ID del modulo e l'ID del campo se hai bisogno di aiuto.

Questo snippet garantirà che i campi Checkbox e Scelta multipla che utilizzano il layout a 2 colonne mantengano il layout nella vista mobile.

Fatto! Ora hai imparato come personalizzare il layout delle colonne per i campi a scelta multipla (Checkbox e Scelta multipla) nella vista mobile.

Vuoi imparare altri modi per personalizzare i campi WPForms? Dai un'occhiata al nostro tutorial su come aggiungere un'opzione Seleziona tutto al campo Checkbox in WPForms.