Resumen de IA
¿Desea convertir un diseño de formulario de varias columnas a una sola columna cuando se ve en dispositivos móviles? Si bien el uso de varias columnas puede quedar muy bien en pantallas más grandes, cambiar a un diseño de formulario de una sola columna en pantallas más pequeñas hará que sus formularios se vean profesionales y fáciles de usar.
Este tutorial le mostrará cómo convertir sus diseños de varias columnas en una sola columna solo para los usuarios que visitan su sitio en un dispositivo móvil.
Nota: Recomendamos usar el campo Diseño para un enfoque más simple de arrastrar y soltar para crear diseños de formularios avanzados que se ajustan automáticamente al tamaño de la pantalla de los usuarios. Sin embargo, las clases CSS de diseño cubiertas en este tutorial todavía son compatibles.
Antes de empezar, primero deberás asegurarte de que WPForms esté instalado y activado en tu sitio de WordPress y que hayas verificado tu licencia. Luego, puedes crear un nuevo formulario o editar uno existente para acceder al constructor de formularios.
Creación de un diseño de formulario de varias columnas
Con WPForms, puede crear fácilmente formularios con varias columnas. Para este ejemplo, creemos un diseño de dos columnas usando la siguiente clase CSS: wpforms-one-half. Aquí tiene un ejemplo de cómo se verá nuestro formulario de varias columnas.
Nota: El primer campo de cada fila en la imagen anterior también usa la clase wpforms-first (es decir, wpforms-one-half wpforms-first. Esta clase le indica al campo que debe iniciar una nueva fila.
Después de crear un diseño de formulario de dos columnas, queremos asegurarnos de que los campos del formulario se muestren en una sola columna solo para los usuarios que visitan su sitio en un dispositivo móvil.
Mostrar campos en una sola columna en dispositivos móviles
Para mostrar los campos en una sola columna en dispositivos móviles, necesitaremos usar una clase CSS preestablecida. En el constructor de formularios, haga clic en un campo para mostrar las Opciones del campo. Luego, en la sección Avanzado, agregue la clase wpforms-mobile-full al campo Clases CSS.
Finalmente, haga lo mismo para los otros campos del formulario y recuerde hacer clic en el botón Guardar para conservar los cambios.
Ahora, para los visitantes móviles, su diseño de formulario de varias columnas se mostrará como una sola columna. Aquí tiene un ejemplo de cómo se vería el formulario en un dispositivo móvil:
¡Eso es todo! Ahora puede crear formularios que cambian de diseños de varias columnas a una sola columna en dispositivos móviles.
A continuación, ¿desea personalizar aún más la apariencia de su formulario? Entonces asegúrese de consultar nuestro tutorial sobre cómo agregar CSS personalizado a su formulario.