Cómo usar: Estilizador de formularios HubSpot
- Elige un preajuste y ajusta fuentes, colores, bordes de campos, espaciado y botón. La vista previa usa el mismo marcado que HubSpot genera para los formularios embebidos.
- Introduce tu Portal ID, tu Form ID y la región (todo está en el código embed del formulario en HubSpot).
- Haz clic en Copiar a Webflow (Code Embed), selecciona en el Designer el lugar donde debe ir el formulario y pulsa Ctrl/⌘+V.
- ¿Prefieres páginas más limpias? Usa «solo estilos + contenedor» para la página y pon el script en Configuración de página → Antes de </body> o en Configuración del sitio → Código personalizado → Footer. Publica y prueba el formulario en el dominio real.
Por qué los formularios de HubSpot se ven distintos en tu sitio
Un formulario de HubSpot embebido trae su propio marcado — .hs-form, .hs-form-field, .hs-input, .hs-button — y, salvo que lo desactives, la hoja de estilos por defecto de HubSpot. El resultado rara vez encaja con un sitio de Webflow bien diseñado: otras fuentes, inputs estrechos, columnas flotantes a medio ancho y un botón naranja genérico. Para estilizar el formulario hay que sobrescribir esas clases con CSS lo bastante específico como para ganar.
Qué cubre este estilizador
- Diseño — inputs a ancho completo, espaciado consistente y conjuntos de dos o tres columnas reconstruidos con flexbox (apilados en móvil).
- Campos — texto, email, select (con flecha personalizada), textarea, casillas y radios con tu color de acento.
- Estados — anillo de foco, campos no válidos y los mensajes de error de HubSpot, con el resumen «completa todos los campos obligatorios» oculto.
- Texto de consentimiento y enlaces — texto de RGPD y legal con un estilo más pequeño y legible.
- Botón — colores, hover, radio, relleno y opción de ancho completo.
- Mensaje de agradecimiento — el
.submitted-messageen línea tras enviar.
Todas las reglas están limitadas a la clase de contenedor .hubspot-form, así que no pueden afectar a nada más de la página.
Importante: formularios HTML nativos frente a formularios en iframe
El CSS de tu página solo puede estilizar un formulario que se renderiza dentro de la página. Los formularios de HubSpot embebidos con el script clásico hbspt.forms.create (v2) se renderizan como HTML cuando el formulario está configurado como formulario HTML nativo (opciones del formulario en HubSpot; la disponibilidad depende de tu plan de HubSpot). Los formularios que se renderizan dentro de un iframe — incluidos los creados con el nuevo editor de formularios de HubSpot — no se pueden estilizar desde fuera; en ese caso usa los ajustes de estilo propios de HubSpot. Prueba rápida: haz clic derecho sobre un campo del formulario en tu página publicada y elige Inspeccionar; si ves class="hs-input" directamente en la página, este CSS funcionará.
La opción css: "" en el código embed indica a HubSpot que no cargue su CSS por defecto del formulario, para que tus estilos se apliquen limpiamente. Desmárcala si prefieres sobrescribir solo algunos detalles.
Cómo añadir un formulario de HubSpot en Webflow
- Pega el Code Embed de esta herramienta (o añade un Code Embed y pega el código embed completo).
- El formulario solo aparece en el sitio publicado; el Designer muestra un embed vacío.
- Si tienes varios formularios en la misma página, asigna a cada uno un ID de contenedor distinto.
- Mide las conversiones con campos ocultos y parámetros UTM, o escucha el callback
onFormSubmittedde HubSpot en tu script del footer.
¿Necesitas igualar colores de tu sistema de diseño? Conviértelos con el Conversor de colores y comprueba el contraste del texto con el Comprobador de contraste. Para secciones nativas de Webflow, consulta HTML & CSS a Webflow.
También se busca como: css formulario hubspot, estilos formulario hubspot, personalizar formulario hubspot, formulario hubspot webflow, código embed hubspot, diseño formulario hubspot, hs-form css, hbspt.forms.create.
Herramientas que combinan con: Estilizador de formularios HubSpot
- Conversor de formato de fecha — Pega un formato de fecha como DD.MM.YYYY HH:mm y obtén el equivalente para Make, Zapier, n8n, date-fns, Python y PHP, con vista previa en vivo y expresiones listas para pegar.
- Buscador de rutas JSON — Pega un payload de webhook o una respuesta de API, haz clic en cualquier valor y copia su ruta exacta para JavaScript, JSONPath, jq, Python, PHP, n8n y Make.
- HTML y CSS a Webflow — Pega el HTML y su CSS, haz clic en Copiar a Webflow y pega en el Designer: obtendrás Div Blocks, Headings, Links, Images y Lists reales, con clases, combo classes, breakpoints para tablet y móvil y estados hover, en lugar de un único Code Embed.
- Generador UTM — Añade utm_source, utm_medium, utm_campaign y otros parámetros a cualquier enlace, comprueba en qué canal de GA4 caerá la visita y etiqueta una lista completa de URLs de una vez.
Preguntas frecuentes
¿Por qué mi CSS no cambia el formulario de HubSpot?
<iframe>, cambia el formulario a HTML nativo en HubSpot (si tu plan lo permite) o estilízalo en los ajustes de estilo de formularios de HubSpot.¿Dónde encuentro el Portal ID y el Form ID?
portalId y formId están en ese fragmento, junto con la región (por ejemplo eu1 o na1).¿Por qué el formulario aparece vacío en el Designer de Webflow?
¿Puedo estilizar campos de dos columnas?
fieldset.form-columns-2; el CSS generado convierte esos conjuntos en una fila flexible que se apila en pantallas de menos de 768px.