Maquetador de Formularios

El maquetador de formularios es la herramienta que permite diseñar, configurar y personalizar formularios dinámicos mediante un editor visual, sin necesidad de programación. Desde este módulo se definen los campos, validaciones, estilos, comportamientos condicionales y notificaciones asociadas al formulario.

1. Estructura general del maquetador

El maquetador se compone de las siguientes áreas principales:

• Panel de elementos del formulario (lado izquierdo)

• Área central de diseño del formulario

• Panel de configuración y estilos (lado derecho)

• Barra superior de acciones (preview, integración y guardado)

Cada sección cumple una función específica dentro del proceso de construcción del formulario.

2. Panel de elementos del formulario (Form Element)

Este panel permite agregar campos al formulario mediante selección o arrastre. Se divide en dos pestañas:

2.1 Quick Add

Permite añadir rápidamente elementos estándar al formulario. Los elementos están organizados por categorías.

2.2 Add Object Fields

Permite agregar campos vinculados directamente a objetos del sistema (por ejemplo, contactos u oportunidades), facilitando la sincronización de datos.

3. Categorías de campos disponibles

3.1 Información personal (Personal Info)

Campos diseñados para capturar datos básicos del usuario:

• Full Name

• First Name

• Last Name

• Date of Birth

• Phone

• Email

Estos campos pueden configurarse como obligatorios y validarse automáticamente según su tipo.

3.2 Envío del formulario (Submit)

• Button
  Define el botón de envío del formulario.
  Este elemento permite personalizar:

• Texto del botón

• Color y estilo

• Acción posterior al envío

3.3 Pagos (Payments)

• Sell Products

• Collect Payment

Estos campos permiten integrar el formulario con flujos de pago, asociando productos o montos directamente al envío del formulario.

3.4 Dirección (Address)

Campos estructurados para capturar información de ubicación:

• Address

• City

• State

• Country

• Postal Code

• Organization

El campo Address se encuentra actualizado para mejorar la captura y normalización de datos.

3.5 Sitio web

• Website
  Campo destinado a la captura de URLs, con validación automática de formato.

3.6 Campos de texto (Text)

• Single Line

• Multi Line

• Text Box List

Permiten capturar información abierta del usuario, desde respuestas cortas hasta listas o descripciones extensas.

3.7 Elementos de selección (Choice Elements)

• Single Dropdown

• Multi Dropdown

• Checkbox

• Radio

Estos campos permiten definir opciones preconfiguradas y controlar si el usuario puede seleccionar una o varias respuestas.

3.8 Calificación (Rating)

• Rating

Campo utilizado para capturar valoraciones del usuario, comúnmente aplicado en encuestas o formularios de feedback.

3.9 Elementos personalizados (Customized)

• Text

• HTML

• Captcha

• Source

• T & C (Términos y condiciones)

• Score

Estos elementos permiten:

• Mostrar textos informativos

• Insertar código HTML

• Proteger el formulario contra envíos automatizados

• Mostrar términos legales

• Calcular o mostrar puntuaciones

3.10 Otros elementos (Other Elements)

• Image

• File Upload

• Monetary

• Number

• Date Picker

• Signature

Estos campos amplían la funcionalidad del formulario permitiendo carga de archivos, selección de fechas, captura de valores monetarios y firmas digitales.

4. Área de diseño del formulario

El área central muestra una vista previa en tiempo real del formulario.
Desde aquí se puede:

• Reordenar campos

• Editar etiquetas y placeholders

• Visualizar validaciones

• Probar el flujo del formulario

5. Condiciones del formulario (Conditions)

El sistema permite definir comportamientos condicionales basados en las respuestas del usuario.

5.1 Tipos de condiciones disponibles

• Redirect to URL
  Redirige al usuario a una URL específica tras el envío del formulario.

• Display custom message
  Muestra mensajes personalizados según las respuestas ingresadas.

• Disqualify lead
  Filtra y descarta envíos que no cumplan criterios definidos.

• Show / Hide Fields
  Muestra u oculta campos dinámicamente según condiciones establecidas.

Las condiciones se ejecutan en orden descendente según su configuración.

6. Notificaciones del formulario (Form Notification)

Este panel permite configurar acciones automáticas tras el envío del formulario.

6.1 Email Notification

Envía una notificación por correo electrónico cuando un usuario completa el formulario.

6.2 Auto Responder

Envía un correo automático al usuario que realizó el envío, incluyendo los datos proporcionados si así se configura.

7. Panel de estilos (Styles)

Desde este panel se controla la apariencia visual del formulario.

7.1 Layout

• Tipo de layout (una columna, dos columnas, línea única)

• Ancho del formulario

• Espaciado entre campos

7.2 Estilo de campos

• Tipo de input (box, línea, etc.)

• Alineación de etiquetas

• Ancho de etiquetas

7.3 Márgenes y padding

Permite definir espaciados internos y externos para mejorar la presentación visual.