Resumen de IA
¿Te gustaría tener más control sobre el diseño de tus formularios de WordPress? El campo de diseño para WPForms proporciona una solución potente para crear diseños de formularios avanzados que se adaptan automáticamente al tamaño de la pantalla de los usuarios.
Este tutorial te mostrará cómo usar el campo de diseño en WPForms.
Antes de empezar, asegúrate de instalar y activar WPForms y verificar tu licencia. Luego, crea un nuevo formulario o edita uno existente para acceder al creador de formularios.
Añadir un campo de diseño a tu formulario
En el creador de formularios, encontrarás el campo de diseño ubicado en la sección Campos avanzados. Haz clic en el campo Diseño o arrástralo al área de vista previa para añadirlo a tu formulario.
Elegir un diseño de columnas
Una vez que hayas añadido un campo de diseño a tu formulario, es hora de elegir tu diseño preferido.
El campo de diseño presenta varias opciones para organizar tus campos de formulario en diferentes columnas. Para abrir el panel de Opciones de campo y ver los diseños de columnas disponibles, haz clic en el campo Diseño en el área de vista previa del formulario.
Ahora verás varios diseños disponibles con entre 1 y 4 columnas. Por defecto, el campo de diseño seleccionará el diseño de 2 columnas, que tiene 2 columnas de igual anchura.
Usaremos el diseño predeterminado en este tutorial, pero la funcionalidad sigue siendo la misma para todos los diseños.
Nota: Tus campos de formulario no se mostrarán correctamente si anteriormente utilizaste la opción de clases CSS para habilitar el diseño de varias columnas. Consulta nuestra sección de Preguntas frecuentes para más detalles.
Establecer el orden de visualización de los campos
El menú desplegable Visualización determina cómo se ordenan los campos en tu formulario. Los campos en los nuevos campos de diseño se configuran para mostrarse en filas por defecto, lo que permite a los usuarios navegar por el formulario horizontalmente de izquierda a derecha.
Para cambiar este orden, haz clic en el menú desplegable Visualización y selecciona la opción preferida.
Nota: Si tu formulario incluye un campo de diseño con varios campos apilados, se recomienda usar la opción Filas: los campos se ordenan de izquierda a derecha del menú desplegable Visualización. Esto asegura que los campos se muestren en la vista móvil, notificaciones de formulario y entradas exactamente como los has organizado, conservando la estructura del formulario y la experiencia del usuario previstas.
Cambiar diseños
Si desea cambiar de diseño, incluso después de agregar campos a columnas individuales, simplemente seleccione cualquiera de los diseños disponibles en el panel Opciones de campo.
Las columnas y su contenido ajustarán automáticamente su tamaño y posición según el tamaño de la pantalla del usuario.
Nota: Si hay menos columnas en el diseño recién seleccionado que en el anterior, los campos de la última columna se eliminarán del campo Diseño y se colocarán en el cuerpo principal de su formulario.
Uso de Múltiples Diseños
Si lo desea, puede agregar varios campos de Diseño a su formulario y elegir diferentes configuraciones de columnas para cada uno.
Por ejemplo, un campo de Diseño puede tener 1 columna y otro campo de Diseño puede tener 2 columnas, lo que le brinda más flexibilidad en la apariencia de su formulario.
Para ayudarle a diferenciar cada campo de Diseño, no dude en agregar una etiqueta al campo Etiqueta en el panel Opciones de campo.
Dado que los campos de Diseño actúan como contenedores, son la solución perfecta para agrupar elementos en el formulario.
Añadir campos a columnas individuales
Para agregar un campo a cualquier columna, haga clic y arrastre el campo desde la barra lateral hasta la columna de destino.
Nota: Los campos Diseño, Salto de página, Repetidor y Vista previa de entrada no se pueden agregar dentro de un campo Diseño.
La mayoría de los campos agregados al campo Diseño tendrán por defecto un tamaño de campo grande, lo que significa que ocuparán todo el ancho de la columna. Sin embargo, el tamaño del campo Texto enriquecido y Texto de párrafo se determina por la altura, con un tamaño de campo mediano por defecto dentro del campo Diseño.
Para una altura ajustable para el campo Texto de párrafo, consulte nuestra documentación para desarrolladores.
Habilitar la lógica condicional
El campo Diseño también admite la habilitación de lógica condicional para mostrar u ocultar un campo Diseño completo según la selección del usuario.
Nota: Necesitará WPForms versión 1.9.0 o superior para acceder a la función de lógica condicional para el campo Diseño.
Para habilitar la lógica condicional, haga clic en el campo Diseño para abrir su panel Opciones de campo. Luego navegue a la pestaña Lógica inteligente.
Una vez allí, active la opción Habilitar lógica condicional a la posición ACTIVADO.
Después de habilitarla, aparecerán opciones adicionales para configurar la regla de lógica condicional. Para nuestro ejemplo, hemos agregado un campo de Opción múltiple que pregunta a los usuarios si desean dejar una reseña. Luego establecimos la regla para Mostrar este campo si ¿Le gustaría dejar una reseña? es Sí.
Esta regla ocultará todos los campos dentro del campo Diseño cuando publique su formulario. Los campos solo se mostrarán cuando el usuario seleccione Sí de las opciones del campo Opción múltiple.
Después de habilitar la lógica condicional para un campo Diseño, la opción para usar lógica condicional se deshabilitará en los campos individuales dentro del campo Diseño.
Nota: Para obtener más detalles sobre cómo funciona la lógica condicional, asegúrese de consultar nuestra guía completa sobre cómo usar la lógica condicional en WPForms.
Eliminar un campo de diseño de tu formulario
Si desea eliminar un campo de Diseño de su formulario, coloque el cursor sobre el campo y haga clic en el icono de papelera.
Dado que la eliminación de un campo de Diseño también eliminará todos los campos que contiene, aparecerá una superposición pidiéndole que confirme la eliminación. Continúe y haga clic en Aceptar si está de acuerdo en eliminar el campo de Diseño y todos los campos que ha agregado dentro de él.
Nota: No podrá recuperar ninguno de los campos que agregó dentro del campo de Diseño una vez que se eliminen.
Vista previa de tu formulario
Una vez que haya agregado campos a las columnas dentro de sus campos de Diseño, continúe y guarde sus cambios haciendo clic en Guardar.
Luego, haga clic en el botón Vista previa para abrir la vista previa del formulario en una nueva pestaña.
En la página de vista previa, verá una versión funcional de su formulario. Aquí puede interactuar con su formulario y probar su diseño visual. También podrá probar qué tan bien funciona su formulario en diferentes tamaños de pantalla.
Preguntas frecuentes
Estas son respuestas a algunas preguntas frecuentes sobre la creación de diseños de formularios de varias columnas.
¿Por qué el campo de Diseño no se muestra correctamente cuando previsualizo mi formulario?
Si utilizó previamente la opción de clases CSS para crear múltiples columnas en su formulario, esto impedirá que el campo de Diseño funcione correctamente. Deberá eliminar las clases CSS de los campos de su formulario antes de usar el campo de Diseño.
Para ello, abra el constructor de formularios y haga clic en el campo que desea editar para abrir el panel de Opciones de campo. A continuación, navegue hasta la pestaña Avanzado y elimine la(s) clase(s) CSS de varias columnas del campo Clases CSS.
Después de eliminar las clases CSS, asegúrese de guardar sus cambios y previsualizar su formulario para asegurarse de que se vea y funcione como se espera.
¿Puedo mostrar u ocultar un campo de Diseño según la selección del usuario?
Sí, puede mostrar u ocultar un Campo de Diseño en sus formularios dependiendo de las respuestas proporcionadas por sus usuarios. Esto requiere habilitar la lógica condicional en el campo de Diseño específico que desea ocultar. Consulte nuestra sección de lógica condicional para obtener detalles adicionales.
¿Puedo alinear el botón de envío en la misma línea que el campo de Diseño?
Sí. Si desea utilizar el campo de Diseño para crear un formulario de una sola línea, deberá agregar una clase CSS personalizada en la página de configuración del formulario.
Para ello, vaya a Configuración » General en su constructor de formularios y agregue la clase CSS inline-fields al campo Clase CSS del formulario.
Nota: El uso de la clase inline-fields en WPForms a veces puede entrar en conflicto con los estilos del tema de su WordPress. Para obtener más información, asegúrese de consultar nuestro tutorial sobre cómo mostrar formularios en una sola línea.
¡Eso es todo! Ahora sabe cómo usar el campo de Diseño en WPForms.
A continuación, ¿le gustaría saber cómo mostrar diferentes opciones en su formulario según las interacciones del usuario? Consulte nuestra guía sobre cómo usar la lógica condicional en WPForms.