Sistema de Diseño para Formularios IGSA

Guía completa de arquitectura, contenedores y componentes para el desarrollo de formularios consistentes

Arquitectura de Contenedores

1. Contenedor Principal de Formulario

.form-container

Uso: Contenedor principal para formularios completos. Incluye borde decorativo, sombra y espaciado estándar.

Ejemplo de contenido

2. Contenedor de Información (Solo Lectura)

.info-container

Uso: Para mostrar datos de solo lectura (información del cliente, detalles de oportunidad, etc.)

Dato de Solo Lectura

Valor no editable

3. Sección de Formulario Específico

.section-FormGral

Título de Sección Específica

Uso: Para agrupar preguntas específicas de un tipo de equipo (Plantas Eléctricas, UPS, etc.)

Pregunta específica

4. Barra de Acciones

.action-bar

Etiqueta:

Uso: Para acciones horizontales como búsquedas, filtros, o acciones principales del formulario.

Jerarquía y Estructura Recomendada



<main>
  <div class="form-container">
    <!-- Título principal del formulario -->
    <h1 class="form-title">Nombre del Formulario</h1>
    
    <!-- 1. Datos de solo lectura (si aplica) -->
    <div class="info-container">
      <h2 class="section-title">Datos de la Oportunidad</h2>
      <!-- Campos de información -->
    </div>
    
    <!-- 2. Acciones principales -->
    <div class="action-bar">
      <!-- Búsquedas, filtros, acciones -->
    </div>
    
    <!-- 3. Formularios específicos -->
    <div class="section-FormGral">
      <h4 class="forms-container-subtitle">Formulario Específico</h4>
      <!-- Preguntas del formulario -->
    </div>
    
    <!-- 4. Acciones finales -->
    <div class="action-bar">
      <!-- Guardar, enviar, cancelar -->
    </div>
  </div>
</main>

Tipos de Formularios Según su Propósito

📝 Formulario de Captura

Uso: Nuevos registros, solicitudes
Características: Muchos campos editables, validaciones estrictas
Ejemplo: Solicitud de cotización nueva

🔍 Formulario de Consulta

Uso: Búsquedas, filtros
Características: Pocos campos, resultados dinámicos
Ejemplo: Búsqueda de oportunidades

✏️ Formulario de Edición

Uso: Modificar datos existentes
Características: Datos precargados, validaciones parciales
Ejemplo: Editar cotización existente

👀 Formulario de Visualización

Uso: Solo mostrar información
Características: Campos de solo lectura, sin acciones de guardado
Ejemplo: Ver detalles de cliente

🔧 Formulario Multipaso

Uso: Procesos complejos paso a paso
Características: Múltiples secciones, navegación entre pasos
Ejemplo: Configurador de equipos

⚡ Formulario de Acción Rápida

Uso: Acciones inmediatas
Características: Mínimos campos, acción directa
Ejemplo: Aprobar/rechazar solicitud

Layouts de Distribución de Campos

Distribución Horizontal (field-row)

.field-group

Uso: Para campos relacionados que deben verse juntos (nombre, apellido, teléfono)

Distribución Vertical (field-column)

.field-group

Uso: Para formularios en espacios reducidos o listas de opciones largas

Guía de Buenas Prácticas

✅ Hacer

Usar .info-field para datos no editables
Agrupar campos relacionados en .field-row
Marcar campos obligatorios con .field-label--required
Usar .section-FormGral para cada tipo de equipo
Colocar acciones principales en .action-bar
Mantener máximo 3 campos por fila en desktop
Usar estados de validación (--error, --success)

❌ Evitar

Usar input disabled para mostrar datos
Mezclar campos editables y no editables sin distinción
Más de 4 campos en una sola fila
Botones sin jerarquía clara (primario/secundario)
Formularios sin títulos de sección
Labels muy largos que rompan el diseño
Campos obligatorios sin indicación visual

Elementos Complementarios del Sistema

Mensajes de Sistema y Alertas

Mensajes de Validación

Campo con Error

Este campo es obligatorio

Campo con Advertencia

Verifique este valor

Campo Válido

Campo validado correctamente

Alertas de Sistema

ℹ️

Información: Los datos se guardan automáticamente cada 30 segundos.

✅

Éxito: La cotización se ha enviado correctamente al departamento de ingeniería.

⚠️

Advertencia: Algunos campos opcionales están vacíos. ¿Desea continuar?

❌

Error: No se pudo conectar con el servidor. Verifique su conexión a internet.

Estados de Carga y Progreso

Botones con Estados de Carga

Indicadores de Progreso

Progreso de Formulario

65% Completado

Elementos de Ayuda y Contexto

Tooltips y Ayuda Contextual

Potencia Requerida ?

Campo con Ayuda

Ingrese el código tal como aparece en su documento de identidad

Campo Opcional (Opcional)

Separadores y Organización

Separadores Visuales

Información Adicional

Etiquetas y Estados

Badges de Estado

Nuevo Aprobado Pendiente Rechazado Borrador

Navegación de Formularios Multipaso

Datos Básicos

Selección de Equipos

Especificaciones

Revisión

Secciones Colapsables

Voltaje

Frecuencia

Contenido colapsado...

Listas Dinámicas

Lista de Equipos (Agregar/Quitar)

Ejemplo Completo Integrado

ℹ️

Complete todos los campos marcados como obligatorios antes de continuar.

Proyecto ?

Nombre válido y disponible

Estado

En Proceso Pendiente

85% Completado

Tablas y Listados de Datos

Tabla Básica

ID	Cliente	Equipo	Estado	Fecha
COT-001	Grupo Empresarial ABC	Planta Eléctrica 150kW	Aprobada	15/06/2025
COT-002	Hospital San José	UPS 5000VA + Baterías	Pendiente	14/06/2025
COT-003	Centro Comercial Norte	Aires Acondicionados (3 unidades)	Nueva	13/06/2025

Tabla con Funcionalidades Avanzadas

Mostrar:

Buscar:

ID Cotización ↕️	Cliente ↕️	Fecha Creación ⬇️	Estado	Total
COT-2025-001	Industrias del Norte S.A.	15/06/2025	Enviada	$125,000.00
COT-2025-002	Clínica Especializada	14/06/2025	En Revisión	$89,500.00
COT-2025-003	Universidad Tecnológica	13/06/2025	Rechazada	$200,000.00
COT-2025-004	Grupo Hotelero Premium	12/06/2025	Borrador	$156,750.00

Mostrando 1 a 4 de 47 registros

...

0 elementos seleccionados

Elementos Adicionales de Interfaz

Tarjetas y Paneles

Total

Aprobadas

Plantas Eléctricas 28

UPS 15

Aires Acondicionados 8

5 cotizaciones pendientes de revisión desde hace más de 3 días.

Pestañas de Navegación

Nombre del Proyecto

Cliente

Hospital San José S.A.

Ventanas Modales

Panel de Filtros

Fecha Desde

Fecha Hasta

Estado

Cliente

Tipo de Equipo

Navegación por Migas de Pan

Línea de Tiempo

La cotización fue enviada exitosamente al cliente.

María González

La cotización fue revisada y aprobada por ingeniería.

Carlos López

Se creó la cotización inicial con los requerimientos del cliente.

Ana Martínez

Sistema de Diseño para Formularios IGSA

Arquitectura de Contenedores

1. Contenedor Principal de Formulario

2. Contenedor de Información (Solo Lectura)

3. Sección de Formulario Específico

Título de Sección Específica

4. Barra de Acciones

Jerarquía y Estructura Recomendada

Tipos de Formularios Según su Propósito

📝 Formulario de Captura

🔍 Formulario de Consulta

✏️ Formulario de Edición

👀 Formulario de Visualización

🔧 Formulario Multipaso

⚡ Formulario de Acción Rápida

Layouts de Distribución de Campos

Distribución Horizontal (field-row)

Distribución Vertical (field-column)

Guía de Buenas Prácticas

✅ Hacer

❌ Evitar

Elementos Complementarios del Sistema

Mensajes de Sistema y Alertas

Mensajes de Validación

Alertas de Sistema

Estados de Carga y Progreso

Botones con Estados de Carga

Indicadores de Progreso

Elementos de Ayuda y Contexto

Tooltips y Ayuda Contextual

Separadores y Organización

Separadores Visuales

Etiquetas y Estados

Badges de Estado

Navegación de Formularios Multipaso

Secciones Colapsables

Listas Dinámicas

Lista de Equipos (Agregar/Quitar)

Equipos Solicitados

Ejemplo Completo Integrado

Tablas y Listados de Datos

Tabla Básica

Tabla con Funcionalidades Avanzadas

Elementos Adicionales de Interfaz

Tarjetas y Paneles

Cotizaciones del Mes

Equipos Más Solicitados

⚠️ Atención Requerida

Pestañas de Navegación

Ventanas Modales

Confirmar Eliminación

Panel de Filtros

Filtros de Búsqueda

Navegación por Migas de Pan

Línea de Tiempo

Datos de la Oportunidad (Solo Lectura)

Elección de Formularios para Cotización

Sección de Formularios

Formulario de Plantas Eléctricas

Formulario de Aires Acondicionados

Formulario de UPS

Catálogo de Componentes Reutilizables

Campos de Entrada Básicos

Listas Desplegables (Select)

Áreas de Texto

Casillas de Verificación (Checkboxes)

Checkboxes en Línea

Checkboxes en Columna

Botones de Radio (Selección Única)

Radios en Columna

Radios en Línea

Estados de Validación

Botones y Acciones

Tipos de Botones

Tamaños de Botones

Ejemplos de Distribución

Tres Columnas Iguales

Columnas de Tamaños Diferentes

Campo de Ancho Completo

Distribuciones con Botones y Acciones