### [Cómo mostrar tu formulario en una sola línea](https://wpforms.com/docs/how-to-display-your-form-in-a-single-line/)

**Publicado:** 23 de noviembre de 2023
**Autor:** Umair Majeed

**Resumen:** Descubre cómo mostrar todos los campos de tu formulario en una sola línea.

**Contenido:**

¿Te gustaría que los campos de tu formulario se mostraran en una sola línea? Tener tu formulario en un diseño de una sola línea puede ayudarte a colocarlo en áreas clave de tu sitio web (como la sección superior de tu página de inicio) para conseguir la máxima visibilidad.

En este tutorial, te mostraremos cómo mostrar tu formulario en una sola línea.

![Formulario en línea](https://wpforms.com/wp-content/uploads/2023/06/inline-form.gif "Formulario en línea")**Nota:** Si prefieres una opción sencilla de arrastrar y soltar para personalizar el diseño de tu formulario, te sugerimos que utilices el [campo Diseño](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/). Sin embargo, la clase `inline-fields` que se trata en este tutorial sigue siendo compatible y se recomienda si deseas alinear el botón de envío en la misma línea que los campos del formulario.

---

Para nuestro ejemplo, crearemos un formulario con tres campos: **Nombre**, **Teléfono** y **Correo electrónico**.

Para mostrar los campos del formulario en una sola línea, vaya a **Ajustes » General** en su generador de formularios y añada la clase CSS `inline-fields` al campo **Clase CSS del formulario**.

**Nota:** Ten en cuenta que el uso de la clase `inline-fields` en WPForms puede entrar en conflicto en ocasiones con los estilos de tu tema de WordPress. Como resultado, es posible que el aspecto no se ajuste a tus expectativas.

![CSS de campos en línea](https://wpforms.com/wp-content/uploads/2021/07/Inline-fields-CSS.png)A continuación, para reducir la altura de tu formulario, abre la sección **Avanzado** de cada campo y selecciona la opción **Ocultar etiqueta**.

![Ocultar etiqueta del campo](https://wpforms.com/wp-content/uploads/2021/07/Hide-Label-for-field-1.png)A continuación, configuraremos un texto de marcador de posición para orientar a los usuarios. En nuestro ejemplo, añadiremos **Correo electrónico** como texto de marcador de posición para nuestro campo de correo electrónico.

![Añadir texto de marcador de posición](https://wpforms.com/wp-content/uploads/2021/07/add-placeholder-text.png)**Nota:** Si deseas cambiar el aspecto del botón de envío para que se adapte al estilo de tu formulario, puedes seguir [nuestra guía sobre cómo personalizar el botón de envío](https://wpforms.com/docs/how-to-customize-the-submit-button/).

Así es como se verá el formulario en la interfaz del sitio:

Activa JavaScript en tu navegador para completar este formulario.

Nombre

Correo electrónico

Teléfono

Enviar![Cargando](https://wpforms.com/wp-content/plugins/wpforms/assets/images/submit-spin.svg)

 **Nota:** Si buscas otro ejemplo o una plantilla lista para usar para un formulario de una sola línea, echa un vistazo a nuestra [Plantilla de formulario de suscripción al boletín en línea](https://wpforms.com/templates/inline-newsletter-signup-form/).

¡Eso es todo! Ahora puedes crear formularios que se mostrarán en una sola línea.

A continuación, ¿te gustaría recibir una copia de la información enviada por tus usuarios a través de tus formularios? No te pierdas nuestro tutorial sobre [cómo configurar notificaciones de formularios](https://wpforms.com/docs/setup-form-notification-wpforms/ «Cómo configurar notificaciones de formularios en WPForms») para obtener más detalles.

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

---