Constructor de formularios
El constructor de Zelta Forms es un editor visual drag-and-drop que te permite diseñar formularios completos sin escribir una sola línea de código.
Interfaz del editor
El editor se divide en tres paneles:
- Panel izquierdo (Paleta de campos): Catálogo de campos disponibles para arrastrar al formulario.
- Panel central (Lienzo): Área de diseño donde construyes tu formulario arrastrando y reordenando campos.
- Panel derecho (Editor de campo): Propiedades y configuración del campo seleccionado.
Tipos de campo
Campos de texto
| Campo | Descripción | Uso típico |
|---|---|---|
| Texto corto | Input de una línea | Nombre, ciudad, asunto |
| Texto largo | Área de texto multilínea | Comentarios, descripciones |
| Correo electrónico | Input con validación de email | Dirección de correo |
| Teléfono | Input con formato telefónico | Número de contacto |
| URL | Input con validación de URL | Sitio web, perfil social |
Campos numéricos
| Campo | Descripción | Uso típico |
|---|---|---|
| Número | Input numérico con controles +/- | Cantidades, edades |
Campos de selección
| Campo | Descripción | Uso típico |
|---|---|---|
| Selección única | Radio buttons | Género, preferencia |
| Selección múltiple | Checkboxes | Intereses, servicios |
| Lista desplegable | Select dropdown | País, categoría |
| Calificación | Estrellas (por defecto 1–5, personalizable) | Satisfacción, calidad |
| Escala | Rango numérico con etiquetas en los extremos | Grado de acuerdo, intensidad |
| NPS | Net Promoter Score (escala fija 0–10) | Lealtad del cliente |
| Sí/No | Botones de opción binaria | Aceptación de términos, confirmaciones |
Campos de fecha y hora
| Campo | Descripción | Uso típico |
|---|---|---|
| Fecha | Selector de fecha | Fecha de nacimiento, plazos |
| Hora | Selector de hora | Horario preferido |
Campos especiales
| Campo | Descripción | Uso típico |
|---|---|---|
| Declaración | Bloque de texto informativo (sin input) | Instrucciones, avisos, separadores |
| Grupo | Contenedor para agrupar campos relacionados | Secciones lógicas, datos de contacto |
IDs internos
Los campos generan IDs automáticos con el formato field_XXXXXXXX (nanoid de 8 caracteres). Las opciones de selección usan el formato opt_XXXXXX (nanoid de 6 caracteres).
Propiedades de campo
Cada campo puede configurarse con las siguientes propiedades:
| Propiedad | Descripción |
|---|---|
| Etiqueta | Nombre visible del campo |
| Descripción | Texto de ayuda debajo de la etiqueta |
| Placeholder | Texto de ejemplo dentro del input |
| Opciones | Lista de opciones (solo para selección única, múltiple y desplegable) |
| Escala mín/máx | Rango numérico (solo para calificación, escala y NPS) |
| Etiquetas de escala | Textos en los extremos de la escala (ej. "Nada probable" — "Muy probable") |
| Validación | Reglas de validación (ver ) |
| Lógica condicional | Reglas para mostrar/ocultar el campo dinámicamente |
| Orden | Posición del campo (se reindexan automáticamente al mover) |
Lógica condicional
La lógica condicional permite mostrar, ocultar o hacer obligatorios los campos según las respuestas previas del usuario.
Configurar una condición
- Selecciona el campo que quieres controlar.
- En el panel derecho, abre Lógica condicional.
- Define el campo de referencia, el operador y el valor esperado.
- Elige la acción y el tipo de lógica (AND/OR).
Operadores disponibles
| Operador | Descripción | Compatible con |
|---|---|---|
equals | Es igual a | Texto, Número, Selección |
not_equals | No es igual a | Texto, Número, Selección |
contains | Contiene el texto | Texto |
not_contains | No contiene el texto | Texto |
greater_than | Mayor que | Número |
less_than | Menor que | Número |
is_empty | Está vacío | Todos |
is_not_empty | No está vacío | Todos |
in | Está en la lista de valores | Selección |
not_in | No está en la lista de valores | Selección |
Acciones disponibles
| Acción | Descripción |
|---|---|
show | El campo aparece solo si se cumple la condición |
hide | El campo desaparece si se cumple la condición |
skip_to | Salta directamente a otro campo específico |
require | El campo se vuelve obligatorio condicionalmente |
Tipo de lógica
all(AND): Todas las condiciones deben cumplirse.any(OR): Al menos una condición debe cumplirse.
Atención
Los campos ocultos por lógica condicional no se incluyen en la validación ni en la respuesta final. Si un campo oculto tenía un valor, este se elimina al ocultarse.
Personalización de marca
La personalización visual se configura a nivel de workspace (espacio de trabajo) y se aplica a todos los formularios publicados del workspace.
| Opción | Descripción |
|---|---|
| Logo | Sube el logo de tu organización (aparece en la cabecera del formulario) |
| Color primario | Color principal de la marca (botones, encabezados) |
| Color de acento | Color secundario para acentos y elementos interactivos |
Plan requerido
La personalización de marca (custom branding) está disponible en los planes Pro y Business. Los formularios del plan gratuito usan el estilo por defecto de Zelta Forms.
Los tienen opciones de estilo adicionales (tema visual, estilo narrativo, tipo de gráfico).
Configuración del formulario
Cada formulario tiene ajustes globales en settings:
| Ajuste | Descripción | Valor por defecto |
|---|---|---|
| Barra de progreso | Muestra el avance del usuario | Desactivado |
| Navegación hacia atrás | Permite regresar a preguntas anteriores | Activado |
| Mezclar campos | Aleatoriza el orden de los campos | Desactivado |
| Título de completado | Texto mostrado al terminar | "¡Gracias!" |
| Mensaje de completado | Mensaje detallado post-envío | Configurable |
| URL de redirección | Redirige al usuario al terminar (opcional) | — |
| Contraseña | Protege el formulario con contraseña | — |
Atajos de teclado
| Atajo | Acción |
|---|---|
Ctrl/Cmd + S | Guardar formulario |
Ctrl/Cmd + Z | Deshacer |
Ctrl/Cmd + Shift + Z | Rehacer |
Autoguardado
El constructor guarda automáticamente los cambios después de 2 segundos de inactividad. El indicador de cambios sin guardar te avisa si hay cambios pendientes.
Deshacer y rehacer
El constructor mantiene un historial de hasta 50 acciones para deshacer y rehacer. El historial incluye todas las operaciones: agregar, eliminar, mover, duplicar y editar campos.
- Cargar formulario (
setSchema): Resetea el historial de undo/redo. - Cambios de IA (
applySchema): Se agregan al historial (puedes deshacer cambios de IA).