# GHL Form Config — Kasya Activos (v2 financiera) > Colores y CSS para que un form nativo de GHL se vea idéntico al de `index-v2-financiera.html`. > Fuente: Inter (400–800). Generado por M.I.D.A.S. — 2026-07-14 ## Tabla de colores (hex exactos) | Elemento | Hex | Uso en el builder de GHL | |---|---|---| | **Fondo de la card del form** | `#FFFFFF` | Form Background | | Fondo de la sección detrás del form | `#F6F7F9` | Page/Section background | | **Fondo de los campos** | `#F6F7F9` | Field Background Color | | Borde de campos y card | `#E4E6EC` | Field Border Color (1px) | | **Texto que escribe el usuario** | `#1C2130` | Field Text Color | | Placeholder | `#6B7183` | Placeholder Color | | Labels / texto secundario | `#6B7183` | Label Color | | Título del form | `#0E1526` | Heading (20px, weight 800) | | **Botón (fondo)** | `#0E1526` | Button Background | | Botón hover | `#151F38` | Button Hover | | **Botón (texto)** | `#FFFFFF` | Button Text (15px, weight 700) | | **Acento focus (borde activo)** | `#C8A476` | Field Active/Focus Border | | Halo del focus | `rgba(200,164,118,.16)` | (solo vía CSS custom) | | Dorado profundo (detalles) | `#A98D5F` | Links/acentos | | Mensaje de éxito (fondo / texto) | `#E8F5E9` / `#1B5E20` | Thank you message | | Mensaje de error (fondo / texto) | `#FDECEA` / `#B71C1C` | Error state | **Radios y espaciado:** campos `9px` de border-radius, padding `14px 16px`, separación `13px`; card del form `16px` de radius; botón `8px` de radius, padding `15px 28px`, ancho 100%. ## CSS para el Custom CSS del Form Builder (DENTRO del iframe — versión canónica) > Pegar en: Form Builder → Styles → Custom CSS. Corre dentro del iframe del form, > por eso los selectores son los internos de GHL (con fallbacks) y el fondo va transparente > para heredar la card blanca de la landing. ```css @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); body, .hl_form-builder--main, .form-builder--wrap, .ghl-form-wrap, .form-builder--item { background: transparent !important; font-family: 'Inter', -apple-system, sans-serif !important; } .form-control, input, select, textarea, .hl-text-input, .hl-select, .multiselect { background: #F6F7F9 !important; border: 1px solid #E4E6EC !important; border-radius: 9px !important; padding: 14px 16px !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important; color: #1C2130 !important; box-shadow: none !important; height: auto !important; } ::placeholder { color: #6B7183 !important; opacity: 1 !important; } .form-control:focus, input:focus, select:focus, textarea:focus { outline: none !important; border-color: #C8A476 !important; background: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(200,164,118,0.16) !important; } label, .label, .hl-form-label { display: none !important; } .form-builder--item, .menu-field-wrap { margin-bottom: 13px !important; } button[type="submit"], .btn, .ghl-btn, .ghl-submit-btn { background: #0E1526 !important; color: #FFFFFF !important; border: none !important; border-radius: 8px !important; padding: 15px 28px !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .02em !important; width: 100% !important; transition: background .2s, transform .2s !important; } button[type="submit"]:hover, .ghl-btn:hover { background: #151F38 !important; transform: translateY(-1px) !important; } .error, .invalid-feedback, .field-error { color: #B71C1C !important; font-size: 12.5px !important; } /* Texto del botón SIEMPRE blanco (incluye spans anidados y themes con text-fill) */ button[type="submit"], button[type="submit"] *, .ghl-btn, .ghl-btn *, .ghl-submit-btn, .ghl-submit-btn *, .btn, .btn *, .form-builder--wrap button, .form-builder--wrap button * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } button[type="submit"]:hover, button[type="submit"]:hover *, button[type="submit"]:focus, button[type="submit"]:focus *, button[type="submit"]:active, button[type="submit"]:active * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } ``` ## CSS alternativo (si el form se incrusta SIN iframe, en la misma página) ```css /* ── Kasya Activos — form idéntico a la landing v2 ── */ .hl-form, .form-builder--wrap { font-family: 'Inter', -apple-system, sans-serif !important; background: #FFFFFF !important; border: 1px solid #E4E6EC !important; border-radius: 16px !important; box-shadow: 0 20px 54px rgba(14,21,38,.08) !important; padding: 34px 30px !important; } .hl-form input, .hl-form select, .hl-form textarea { background: #F6F7F9 !important; border: 1px solid #E4E6EC !important; border-radius: 9px !important; padding: 14px 16px !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important; color: #1C2130 !important; margin-bottom: 13px !important; box-shadow: none !important; } .hl-form input::placeholder, .hl-form textarea::placeholder { color: #6B7183 !important; } .hl-form input:focus, .hl-form select:focus, .hl-form textarea:focus { outline: none !important; border-color: #C8A476 !important; background: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(200,164,118,.16) !important; } /* LABELS — el form de la landing NO usa labels visibles (solo placeholders). Opción A (idéntico): ocultarlos */ .hl-form label { display: none !important; } /* Opción B (si prefieres labels visibles): borra la regla de arriba y usa esta — es el estilo de etiqueta de la calculadora, mismo sistema visual: .hl-form label { color: #6B7183 !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .12em !important; margin-bottom: 6px !important; font-family: 'Inter', sans-serif !important; } */ .hl-form button[type="submit"], .hl-btn-primary, .hl-form .btn { background: #0E1526 !important; color: #FFFFFF !important; border: none !important; border-radius: 8px !important; padding: 15px 28px !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; width: 100% !important; transition: background .2s, transform .2s !important; } .hl-form button[type="submit"]:hover { background: #151F38 !important; transform: translateY(-1px) !important; } .hl-form .success-message, .ty-message { background: #E8F5E9 !important; color: #1B5E20 !important; border-radius: 9px !important; padding: 12px !important; font-size: 14px !important; text-align: center !important; } ``` ## Campos del form (en este orden) | Campo | Tipo | Placeholder | Requerido | |---|---|---|---| | name | Text | Nombre completo | ✓ | | phone | Phone | WhatsApp (10 dígitos) | ✓ | | email | Email | Email | ✓ | | monto_interes | Dropdown | ¿Cuánto te interesa invertir? | ✓ | **Opciones del dropdown:** `$100,000 - $200,000` · `$200,000 - $500,000` · `$500,000 o más` · `Aún no lo sé — quiero información` **Campos ocultos recomendados:** `utm_source`, `utm_medium`, `utm_campaign`, `monto_simulado`, `fuente` (valor: "Landing GHL Kasya v2 financiera"). ## Mensaje de gracias (HTML) — versión card navy con branding ```html

¡Tu solicitud fue recibida!

Un asesor de Kasya Activos te contactará por WhatsApp en menos de 24 horas para explicarte el modelo a detalle y resolver todas tus dudas. Sin compromiso.

🏦 Tu capital, respaldado por inmuebles reales

``` *Alternativa minimalista (una línea):* ```html

¡Listo! Un asesor te contactará muy pronto.

``` ## Automatización sugerida - **Tag al entrar:** `kasya-lead-landing` + tag por monto (`kasya-100-200k`, `kasya-200-500k`, `kasya-500k+`) - **Pipeline:** etapa "Lead nuevo" → workflow de bienvenida por WhatsApp usando el campo `monto_interes`