Personalización de las columnas del campo de opción múltiple en dispositivos móviles

Introducción

¿Le gustaría personalizar el número de columnas que se muestran en la vista móvil para los campos de opción múltiple? Por defecto, los campos de opción múltiple en WPForms se muestran como columnas únicas. Sin embargo, podrá personalizarlo con un fragmento de CSS personalizado.

En este tutorial, le mostraremos cómo utilizar una visualización de 2 columnas en la vista móvil para los campos de opción múltiple (Casillas de verificación y Opción múltiple) de WPForms.

Creación de su formulario

Para seguir este tutorial, necesitará crear un nuevo formulario o editar uno existente para acceder al creador de formularios. En el creador de formularios, asegúrese de añadir el campo Casillas de verificación o Opción múltiple a su formulario.

Después de eso, haga clic en el campo de opción múltiple para acceder a su panel de Opciones de Campo. Luego, navegue a la pestaña Avanzado.

Aquí, seleccione la opción Diseño de opciones y elija la opción Dos columnas.

Al ver su formulario, se mostrará en 2 columnas para el campo Casillas de verificación u Opción múltiple. Sin embargo, en los dispositivos móviles, cada opción se mostrará en una sola columna.

En este tutorial, le mostraremos cómo utilizar CSS personalizado para forzar que los campos de Opción múltiple y Casillas de verificación conserven el diseño de columnas en una pantalla móvil.

Añadir el fragmento

Para empezar, vamos a añadir primero el fragmento al sitio. Si necesita ayuda sobre cómo y dónde añadir fragmentos, asegúrese de revisar esta útil documentación.

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

Asegúrese de reemplazar #wpforms-form-2525 con el ID del formulario específico al que desea aplicar estos cambios. Consulte nuestro tutorial para aprender cómo recuperar el ID del formulario y el ID del campo si necesita ayuda con ello.

Este fragmento garantizará que los campos de Casillas de verificación y Opción múltiple que utilizan el diseño de 2 columnas conserven el diseño en la vista móvil.

¡Eso es todo! Ahora ha aprendido a personalizar el diseño de columnas para los campos de opción múltiple (Casillas de verificación y Opción múltiple) en la vista móvil.

¿Desea aprender más formas de personalizar los campos de WPForms? Consulte nuestro tutorial sobre cómo añadir una opción Seleccionar todo al campo Casillas de verificación en WPForms.