Estilizar las etiquetas del formulario para que aparezcan al lado de los campos

¿Te gustaría crear un diseño de formulario más compacto mostrando las etiquetas junto a sus campos en lugar de encima de ellos? Aunque WPForms muestra las etiquetas encima de los campos de forma predeterminada, puedes modificar fácilmente este diseño usando CSS para mostrar las etiquetas y los campos uno al lado del otro.

Este tutorial te mostrará cómo lograr este diseño horizontal profesional.

Configuración de tu formulario

Primero, necesitarás crear tu formulario y añadir los campos deseados. Si necesitas ayuda, consulta esta guía sobre cómo crear tu primer formulario.

Una vez que hayas creado tu formulario, haz clic en Ajustes » General, haz clic en la flecha Avanzado para abrir estas opciones. Una vez allí, dentro de la Clase CSS del formulario, añade la clase wpforms-inline-labels.

Esta clase CSS nos permite apuntar a formularios específicos en lugar de afectar a todos los formularios de tu sitio.

Añadir el estilo de las etiquetas

Ahora es el momento de añadir el código CSS a tu sitio. Si no estás seguro de cómo añadir CSS a tu sitio, consulta esta guía sobre cómo añadir estilos CSS personalizados.

.wpforms-container.wpforms-inline-labels .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}

Después de añadir este CSS, verás que las etiquetas de tu formulario ahora aparecen en la misma línea que tus campos del formulario.

¡Y eso es todo! ¿Te gustaría dar estilo a las etiquetas del formulario para que aparezcan dentro del campo del formulario? Consulta nuestro tutorial sobre Cómo crear un formulario con etiquetas flotantes.

Preguntas frecuentes

P: ¿Qué pasa si quisiera aplicar esto a todos mis formularios?

R: Si quisieras esto para todos tus formularios, usa este CSS en su lugar y omite el paso anterior al añadir la Clase CSS del formulario. Esto no sería necesario si quisieras aplicar esto a todos los formularios.

.wpforms-container .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}

¡Eso es todo! A continuación, ¿te gustaría explorar más opciones de estilo para formularios? Echa un vistazo a nuestra guía sobre cómo dar estilo al botón de envío con CSS.