### [Mostrar campos en una sola columna en dispositivos móviles](https://wpforms.com/docs/how-to-display-fields-in-a-single-column-on-mobile/)

**Publicado:** 23 de noviembre de 2023.
**Autor:** David Ozokoye

**Resumen:** Aprenda a utilizar clases CSS de diseño para mostrar sus formularios en una sola columna en dispositivos móviles.

**Contenido:**

¿Desea convertir un diseño de formulario de varias columnas en uno de una sola columna cuando se ve en un dispositivo móvil? Aunque 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 tengan un aspecto profesional y sean 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.

- [Creación de un diseño de formulario de varias columnas](#multi-column)
- [Visualización de campos en una sola columna en dispositivos móviles](#single-column-mobile)

**Nota:** Recomendamos utilizar el [campo Diseño](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/) para crear diseños de formularios avanzados de forma más sencilla, mediante arrastrar y soltar, que se ajustan automáticamente al tamaño de la pantalla de los usuarios. No obstante, las clases CSS de diseño que se tratan en este tutorial siguen siendo compatibles.

---

Antes de empezar, primero debe asegurarse de que WPForms está [instalado y activado](https://wpforms.com/docs/install-wpforms-plugin/ «Cómo instalar el plugin WPForms») en su sitio de WordPress y de que ha [verificado su licencia](https://wpforms.com/docs/verify-wpforms-license/ «Cómo verificar su licencia de WPForms»). A continuación, puede [crear un nuevo formulario](https://wpforms.com/docs/creating-first-form/ «Cómo crear su primer formulario») o editar uno existente para acceder al generador de formularios.

Echa un vistazo a nuestra [plantilla personalizable de formulario de solicitud de presupuesto con varias columnas](https://wpforms.com/templates/multi-column-request-a-quote-form-template/) para empezar fácilmente.

## Creación de un diseño de formulario con varias columnas

Con WPForms, puede [crear fácilmente formularios con varias columnas](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/ «Cómo crear diseños de formularios de varias columnas en WPForms»). Para este ejemplo, vamos a crear un diseño de dos columnas utilizando la siguiente clase CSS: `wpforms-one-half`. Aquí tienes un ejemplo de cómo quedará nuestro formulario de varias columnas.

![Diseño de formulario de dos columnas](https://wpforms.com/wp-content/uploads/2021/10/two-column-form-layout.png)**Nota:** El primer campo de cada fila de la imagen anterior también utiliza la clase `wpforms-first` (es decir, `wpforms-one-half wpforms-first`. Esta clase indica al campo que debe comenzar 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, tendremos que utilizar una clase CSS preestablecida. En el generador de formularios, haga clic en un campo para mostrar las **Opciones de campo**. A continuación, en la sección **Avanzado**, añada la clase `wpforms-mobile-full` al campo **Clases CSS**.

![wpforms-mobile-full class](https://wpforms.com/wp-content/uploads/2021/10/wpforms-mobile-full-class.png)Por último, haz lo mismo con los demás campos del formulario y recuerda hacer clic en el botón **Guardar** para conservar los cambios.

Ahora, para los visitantes móviles, el diseño de tu formulario de varias columnas se mostrará en una sola columna. Aquí tienes un ejemplo de cómo se vería el formulario en un dispositivo móvil:

![Vista móvil de una sola columna](https://wpforms.com/wp-content/uploads/2021/10/single-column-mobile-view.png)¡Eso es todo! Ahora puedes crear formularios que cambien de diseños de varias columnas a una sola columna en dispositivos móviles.

A continuación, ¿quieres personalizar aún más el aspecto de tu formulario? Entonces no te pierdas nuestro tutorial sobre cómo [añadir CSS personalizado](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/ «Cómo añadir CSS personalizado a tu WPForms») a tu formulario.

**Categorías:** Estilo, Estilo y personalización.

---