¿Cómo puedo utilizar y personalizar el contenedor «Well» en mis formularios?

Descripción general y explicación

La regla de los 5 segundos: si necesita crear un «recuadro» visual diferenciado o un área de inserción para separar un grupo de campos del resto de su formulario, el componente «Well» es la herramienta que necesita.

Piense en un «Well» como un contenedor estructural. No recopila datos por sí mismo, sino que actúa como un marco o una carpeta en la pantalla, lo que le ayuda a organizar preguntas o instrucciones relacionadas para que su equipo pueda leer y cumplimentar el formulario con mayor facilidad.

Cómo funciona (paso a paso)

1. Asigne un nombre a su contenedor: Abra la configuración del componente. En la pestaña «Visualización», introduzca una «Etiqueta». Esta actuará como nombre interno del contenedor. Si no desea que el nombre aparezca en el formulario propiamente dicho, marque la casilla «Ocultar etiqueta».

   • Referencia: Observe la advertencia roja «La etiqueta es obligatoria» en la primera captura de pantalla de la pestaña «Visualización».

2. Configure el ID técnico: Vaya a la pestaña «API». En el campo «Nombre de la propiedad», asigne al contenedor un nombre abreviado sencillo y único (por ejemplo, «pozo» o «sección_dirección»). Esto ayuda al sistema a identificar este campo concreto.

   • Referencia: tal y como se muestra en la captura de pantalla de la pestaña «API».

3. Cree reglas de «Mostrar/Ocultar» (opcional): Si solo desea que este cuadro aparezca bajo determinadas condiciones (por ejemplo, únicamente si un usuario selecciona «Sí» en una pregunta anterior), vaya a la pestaña «Condicional». Aquí puede establecer reglas sencillas para automatizar cuándo el contenedor está visible.

   • Referencia: tal y como se muestra en la captura de pantalla de la pestaña «Condicional».

4. Añada automatización avanzada (opcional): Para necesidades más complejas, la pestaña «Lógica» le permite añadir comportamientos específicos del tipo «si/entonces» al contenedor.

   • Referencia: tal y como se muestra en la captura de pantalla de la pestaña «Lógica».

5. Ajuste el aspecto: La pestaña «Diseño» le permite añadir atributos HTML específicos. Esto se utiliza normalmente para aplicar estilos avanzados o añadir una superposición de PDF si este formulario debe coincidir perfectamente con un documento en papel.

   • Referencia: tal y como se muestra en la captura de pantalla de la pestaña «Diseño».

6. Revise y guarde: compruebe siempre el panel de vista previa situado en la parte derecha de la ventana para ver cómo quedará su cuadro. Una vez que esté satisfecho, haga clic en el botón verde «Guardar».

Casos de uso y ventajas

• Agrupación de datos personales: Coloque «Nombre», «Apellidos» y «Correo electrónico» dentro de un recuadro para separar claramente la información de contacto del resto de la solicitud profesional.

• Destacar instrucciones: utilice un recuadro para incluir un bloque de texto o información «solo lectura» que proporcione indicaciones para la siguiente sección del formulario.

• Mejora del flujo del formulario: al agrupar campos relacionados, se reduce la «fatiga del formulario», lo que hace que los documentos largos resulten más organizados y menos abrumadores para el usuario.

• Secciones condicionales: utilice un «Well» para incluir cinco preguntas diferentes que permanezcan ocultas hasta que el usuario active una regla «condicional» específica, lo que mantiene el formulario ordenado.