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: Catálogo de campos y componentes disponibles.
• Panel central: Lienzo de diseño donde construyes tu formulario.
• Panel derecho: 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
Contraseña	Input enmascarado	Creación de cuentas

Campos numéricos

Campo	Descripción	Uso típico
Número	Input numérico con controles +/-	Cantidades, edades
Moneda	Input con símbolo de moneda	Presupuestos, precios
Porcentaje	Input con símbolo %	Descuentos, comisiones
Rango (slider)	Control deslizante	Escalas de satisfacción

Campos de selección

Campo	Descripción	Uso típico
Opción única	Radio buttons	Género, preferencia
Opción múltiple	Checkboxes	Intereses, servicios
Lista desplegable	Select dropdown	País, categoría
Escala de valoración	Estrellas o números	Calificación 1-5
Matriz	Tabla de opciones	Encuestas multi-criterio
Sí/No	Toggle o botones	Aceptación de términos

Campos avanzados

Campo	Descripción	Uso típico
Fecha	Selector de fecha	Fecha de nacimiento
Hora	Selector de hora	Horario preferido
Carga de archivos	Subida de documentos	Currículum, fotos
Firma digital	Lienzo de firma táctil	Contratos, consentimientos
Ubicación GPS	Mapa con marcador	Dirección de entrega
Campo calculado	Fórmula sobre otros campos	Totales, promedios

Diseño y estructura

Secciones

Organiza tu formulario en secciones lógicas:

1. Haz clic en + Sección en la barra de herramientas.
2. Asigna un título y descripción a la sección.
3. Arrastra campos dentro de la sección.

Páginas

Para formularios largos, divide el contenido en múltiples páginas:

1. Haz clic en + Página para agregar una nueva página.
2. Arrastra campos a la página correspondiente.
3. El usuario verá botones de "Anterior" y "Siguiente" para navegar.

Consejo

Muestra una barra de progreso activándola en Ajustes > Diseño > Mostrar progreso. Esto reduce la tasa de abandono en formularios largos.

Columnas

Coloca campos lado a lado usando el sistema de columnas:

1. Selecciona dos o más campos contiguos.
2. Haz clic en Agrupar en columnas.
3. Ajusta el ancho relativo de cada columna (50/50, 33/67, 25/75, etc.).

Lógica condicional

La lógica condicional permite mostrar u ocultar campos, secciones o páginas según las respuestas previas del usuario.

Configurar una condición

1. Selecciona el campo que quieres controlar.
2. En el panel derecho, abre Lógica condicional.
3. Define la regla:

campo: tipo_de_servicio
condicion:
  si: tipo_de_servicio
  es_igual_a: "Personalizado"
  entonces: mostrar

Operadores disponibles

Operador	Compatible con
Es igual a	Texto, Número, Selección
No es igual a	Texto, Número, Selección
Contiene	Texto
Mayor que / Menor que	Número
Está vacío / No está vacío	Todos
Está seleccionado	Checkbox, Opción múltiple

Acciones disponibles

• Mostrar campo: El campo aparece solo si se cumple la condición.
• Ocultar campo: El campo desaparece si se cumple la condición.
• Saltar a página: Redirige al usuario a una página específica.
• Hacer obligatorio: El campo se vuelve obligatorio condicionalmente.

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.

Temas y personalización

Temas predefinidos

Zelta Forms incluye temas listos para usar:

• Clásico: Fondo blanco, bordes sutiles, tipografía neutral.
• Moderno: Diseño minimalista con acentos de color.
• Oscuro: Tema dark mode para entornos con poca luz.
• Corporativo: Diseño formal para uso empresarial.

Personalización avanzada

Ajusta cada aspecto visual desde Ajustes > Tema:

• Colores: Primario, secundario, fondo, texto, bordes.
• Tipografía: Familia, tamaño, peso para títulos y cuerpo.
• Espaciado: Márgenes y padding entre campos y secciones.
• Bordes: Radio, grosor y estilo de los bordes de los campos.
• Logo: Sube el logo de tu empresa para la cabecera del formulario.
• CSS personalizado: Para ajustes que requieran control total.

/* Ejemplo de CSS personalizado */
.zf-field-label {
  font-weight: 600;
  color: #333;
}
.zf-submit-button {
  background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
  border-radius: 8px;
}

Atajos de teclado

Atajo	Acción
Ctrl/Cmd + S	Guardar formulario
Ctrl/Cmd + Z	Deshacer
Ctrl/Cmd + Shift + Z	Rehacer
Ctrl/Cmd + D	Duplicar campo seleccionado
Ctrl/Cmd + P	Vista previa
Delete	Eliminar campo seleccionado
Tab	Siguiente campo
Shift + Tab	Campo anterior