Modos de presentación
Zelta Forms ofrece tres modos de presentación que transforman la experiencia de llenado del formulario. El modo se selecciona al crear o editar un formulario y afecta cómo se renderizan los campos al usuario final.
Conversacional
El modo por defecto. Presenta una pregunta por pantalla con transiciones fluidas estilo chat, creando una experiencia interactiva y enfocada.
Configuración
| Opción | Descripción | Valores | Por defecto |
|---|---|---|---|
| Tema visual | Estilo de presentación del campo | minimal, chat, card | card |
| Animación de escritura | Simula escritura progresiva en la pregunta | Activado / Desactivado | Activado |
| Burbuja de avatar | Muestra un avatar junto a cada pregunta | Activado / Desactivado | Activado |
| Duración de transición | Milisegundos entre preguntas | Número (ms) | 500 |
Cuándo usarlo
- Encuestas de satisfacción
- Formularios de contacto
- Cualquier formulario donde quieras maximizar la tasa de completado
Consejo
El modo Conversacional con tema chat funciona particularmente bien en dispositivos móviles, donde una pregunta por pantalla aprovecha mejor el espacio.
Narrativo (Storytelling)
Presenta el formulario como una narrativa con tonos emocionales, divisores de capítulo y texto contextual. Ideal para encuestas de experiencia, evaluaciones con contexto o formularios que requieren empatía.
Configuración
| Opción | Descripción | Valores | Por defecto |
|---|---|---|---|
| Estilo narrativo | Tono del texto que acompaña las preguntas | friendly, professional, empathetic, curious | friendly |
| Divisores de capítulo | Separadores visuales entre secciones | Activado / Desactivado | Activado |
| Avance automático | Avanza al siguiente campo automáticamente al responder | Activado / Desactivado | Desactivado |
| Imágenes de fondo | Fondos decorativos por capítulo | Activado / Desactivado | Desactivado |
Personalización por campo
Cada campo puede tener overrides de modo específicos para Storytelling:
- Texto narrativo: Texto contextual que acompaña la pregunta.
- Tono emocional: Tono específico para ese campo (sobrescribe el estilo general).
Cuándo usarlo
- Evaluaciones de bienestar o clima laboral
- Encuestas de experiencia del cliente con contexto
- Formularios educativos o de onboarding
Diagnóstico Visual
Presenta un layout dividido: el formulario a la izquierda y un gráfico en vivo a la derecha que se actualiza conforme el usuario responde. Los campos se mapean a categorías de diagnóstico.
Configuración
| Opción | Descripción | Valores | Por defecto |
|---|---|---|---|
| Tipo de gráfico | Visualización de resultados | radar, bar, gauge, progress | radar |
| Resultados en vivo | Actualizar gráfico conforme el usuario responde | Activado / Desactivado | Activado |
| Animar resultados | Transiciones animadas en el gráfico | Activado / Desactivado | Activado |
| Layout dividido | Panel de resultados junto al formulario | Activado / Desactivado | Activado |
Categorías de diagnóstico
Para usar este modo, configura diagnosticCategories en los ajustes del formulario. Cada categoría:
- Tiene un nombre y un color
- Se mapea a uno o más campos del formulario
- Recibe un puntaje basado en las respuestas
El gráfico muestra las categorías y sus puntajes actualizándose en tiempo real.
Cuándo usarlo
- Evaluaciones de competencias o habilidades
- Diagnósticos de salud o bienestar
- Auditorías con múltiples dimensiones
- Cualquier formulario donde visualizar resultados en vivo agregue valor
Requisito
El modo Diagnóstico Visual requiere configurar al menos una categoría de diagnóstico con campos mapeados. Sin categorías, el gráfico no se renderiza.
Configuración de modo por formulario
El modo de presentación se define con dos propiedades en el formulario:
defaultMode: El modo activo (conversational,storytelling,visual_diagnostic).modeSettings: Objeto con la configuración específica de cada modo.
Cada formulario tiene un solo modo activo, pero puede tener configuración preconfigurada para los tres modos, facilitando cambiar entre ellos.