Creación de diseños de formularios multicolumna con clases CSS

¿Te gustaría condensar tus formularios mostrando los campos en varias columnas? WPForms facilita la división de formularios en mitades, tercios o incluso diseños más complejos.

Este tutorial te mostrará cómo usar nuestra configuración de diseño de varias columnas para que tus formularios luzcan lo mejor posible.

---

Antes de empezar, primero deberás asegurarte de que WPForms está instalado y activado en tu sitio de WordPress y que has verificado tu licencia. Luego, puedes crear un nuevo formulario o editar uno existente para acceder al constructor de formularios.

Creación de formularios de varias columnas con diseños visuales

WPForms incluye una herramienta de diseño visual que te permite crear varias columnas sin necesidad de código.

Para acceder a esta herramienta, haz clic en cualquier campo en el constructor para abrir su panel de Opciones de Campo. Luego haz clic en la pestaña Avanzado.

Abre la herramienta de diseños visuales haciendo clic en Mostrar diseños junto a la opción Clases CSS.

Esto mostrará varias opciones de diseño predefinidas que puedes usar en tu formulario.

Para nuestro ejemplo, queremos que nuestros campos de Nombre y Correo electrónico aparezcan uno al lado del otro, y que cada uno ocupe la mitad del ancho del formulario. Para crear este diseño, seleccionaremos la opción que muestra dos cuadros de igual tamaño.

Una vez que seleccionemos este diseño, debemos elegir en qué columna queremos que aparezca este campo en particular. Dado que nuestro campo de Nombre es el primero en nuestro formulario, queremos que aparezca en la columna izquierda.

Cuando haces clic en una columna en la herramienta de diseños visuales, las clases correspondientes se añaden automáticamente a la configuración de Clases CSS del campo. La clase wpforms-one-half indica al campo que ocupe la mitad del ancho disponible, mientras que la clase wpforms-first indica al campo que debe iniciar una nueva fila.

A continuación, necesitamos realizar el mismo proceso para nuestro campo de Correo electrónico. Sin embargo, lo pondremos en la columna derecha.

Cuando hayas terminado de añadir tus campos a tu diseño, asegúrate de guardar tus cambios en el constructor de formularios.

Así es como se ve nuestro ejemplo de diseño de varias columnas en el frontend de nuestro sitio:

Añadir manualmente clases CSS de varias columnas

Si prefieres no usar la herramienta de diseños visuales, puedes escribir manualmente clases CSS en el campo correspondiente en la pestaña Avanzado del panel Opciones de Campo.

Aquí están todas las clases CSS disponibles para diseños de varias columnas:

• wpforms-media
• wpforms-untercio
• wpforms-un-cuarto
• wpforms-un-quinto
• wpforms-un-sexto
• wpforms-dos-tercios
• wpforms-dos-cuartos
• wpforms-dos-quintos
• wpforms-dos-sextos
• wpforms-tres-cuartos
• wpforms-tres-quintos
• wpforms-tres-sextos
• wpforms-cuatro-quintos
• wpforms-cuatro-sextos
• wpforms-cinco-sextos

La imagen de abajo muestra 3 diseños comunes de varias columnas. Las etiquetas indican qué clases CSS se usaron de la lista anterior.

Notas adicionales para usar diseños de varias columnas

Al usar clases de columna, hay algunas cosas importantes a tener en cuenta:

• Las columnas no se aplican en el constructor de formularios. Solo son visibles al ver el formulario en el frontend de tu sitio. Siempre prueba tus formularios antes de publicarlos para asegurarte de que estás satisfecho con sus diseños.
• El primer campo de cada fila debe tener la clase wpforms-first además de su clase de columna. Esto le dice al plugin que es el primer elemento y restablece cualquier columna anterior en el formulario.
• En la mayoría de los casos, al usar clases de columna, debes establecer el Tamaño del campo (también en la pestaña Avanzado del panel Opciones del campo) en Grande. Esto permite que el campo ocupe todo el espacio disponible en su columna y mantiene el espaciado derecho e izquierdo uniforme con los campos vecinos.

• Si usas un diseño de varias columnas con campos condicionales, los campos que se muestren condicionalmente se alinearán a la izquierda. Para mantener estos campos alineados según tu diseño preferido, puedes usar este fragmento de CSS:

Preguntas frecuentes

Estas son respuestas a algunas preguntas frecuentes sobre la creación de diseños de formularios de varias columnas.

¿Por qué no funciona el diseño de varias columnas cuando previsualizo mi formulario?

Si la Marcación Moderna está habilitada en tu configuración de WPForms, las clases CSS de varias columnas no funcionarán cuando veas tu formulario en el frontend. Para solucionar este problema, deberás deshabilitar la Marcación Moderna.

Para ello, ve a WPForms » Ajustes y selecciona la pestaña General.

Después de eso, desplázate hacia abajo y desmarca la opción Usar Marcación Moderna.

Asegúrate de guardar tus cambios una vez que hayas terminado.

¡Eso es todo! Ahora puede optimizar sus formularios con diseños de varias columnas.

¿Le gustaría también que sus formularios se vean bien en dispositivos móviles? Puede configurar su formulario para que tenga un diseño de varias columnas que cambie a mostrar los campos en una sola columna en dispositivos móviles, para que sea fácil de usar en cualquier dispositivo.