devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoria do site

Estilizador de Formulário HubSpot — CSS Personalizado para Webflow

Monte seu formulário HubSpot com uma prévia ao vivo — campos, rótulos, linhas de duas colunas, checkboxes, mensagens de erro e o botão de envio — e copie o CSS, o código de incorporação completo ou um Code Embed para Webflow pronto para usar.

Atualizado em
Predefinições:

Texto

inherit usa a fonte do seu site.

Campos

Botão

Incorporação

Encontre os dois IDs no HubSpot em Marketing → Formulários → seu formulário → Compartilhar → Código de incorporação.

Prévia ao vivo (marcação de exemplo do HubSpot)
Adicione seu Portal ID e o Form ID para obter um código de incorporação funcional. O CSS funciona de qualquer forma.
A segunda opção coloca o script no rodapé (veja abaixo).

Webflow aberto em um navegador diferente? Os navegadores não compartilham a área de transferência do Webflow — cole no Webflow Clipboard Bridge nesse navegador e copie novamente.

Incorporação completa (estilo + container + script)

  
Somente CSS

  
Incorporar na página: estilo + container

  
Script para Página / rodapé do site



    
 Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

    
    
    

      
Como usar: Estilizador de Formulário HubSpot
  1. Escolha um preset e depois ajuste fontes, cores, bordas dos campos, espaçamentos e o botão. A prévia usa o mesmo marcador que o HubSpot gera para formulários incorporados.
  2. Insira seu Portal ID, o Form ID e a região (todos estão no código de incorporação do formulário no HubSpot).
  3. Clique em Copiar para Webflow (Code Embed), selecione onde o formulário deve ficar no Designer e pressione Ctrl/⌘+V.
  4. Prefere páginas mais limpas? Use “apenas estilos + container” na página e coloque o script em Page settings → Before </body> ou em Site settings → Custom code → Footer. Publique e teste o formulário no domínio real.


Por que os formulários HubSpot ficam diferentes no seu site


Um formulário HubSpot incorporado traz sua própria marcação — .hs-form, .hs-form-field, .hs-input, .hs-button — e, a menos que você desative, a folha de estilos padrão do HubSpot. O resultado raramente combina com um site Webflow bem planejado: fontes diferentes, campos estreitos, colunas meia-largura flutuantes e um botão laranja genérico. Estilizar o formulário significa sobrescrever essas classes com CSS específico o bastante para prevalecer.


O que este estilizador cobre


    

  • Layout — campos em largura total, espaçamento consistente e fieldsets de duas ou três colunas refeitos com flexbox (empilhados no celular).
    • 

  • Campos — texto, e-mail, select (com seta personalizada), textarea, checkboxes e radios com a cor de destaque da sua marca.
    • 

  • Estados — anel de foco, campos inválidos e as mensagens de erro do HubSpot, com a mensagem “preencha todos os campos obrigatórios” oculta.
    • 

  • Texto de consentimento e links — texto de LGPD/GDPR e termos legais em um estilo menor e legível.
    • 

  • Botão — cores, hover, arredondamento, espaçamento interno e opção de largura total.
    • 

  • Mensagem de agradecimento — o .submitted-message embutido após o envio.
    • 



Todas as regras estão limitadas à classe de container .hubspot-form, então não afetam nada mais na página.


Importante: formulários HTML puros vs. formulários em iframe


O CSS da sua página só consegue estilizar um formulário que é renderizado na própria página. Formulários HubSpot incorporados com o script clássico hbspt.forms.create (v2) são renderizados como HTML quando o formulário está configurado como formulário HTML puro (opção nas configurações do HubSpot; a disponibilidade depende do seu plano). Formulários exibidos dentro de um iframe — incluindo os criados com o novo editor de formulários do HubSpot — não podem ser estilizados de fora; nesses casos, use as configurações de estilo do próprio HubSpot. Teste rápido: clique com o botão direito em um campo do formulário na sua página publicada e escolha Inspecionar — se aparecer class="hs-input" diretamente na página, este CSS vai funcionar.


A opção css: "" no código de incorporação diz ao HubSpot para não carregar o CSS padrão do formulário, assim seus estilos se aplicam sem conflitos. Desmarque se preferir sobrescrever apenas alguns detalhes.


Como adicionar um formulário HubSpot no Webflow


    

  1. Cole o Code Embed gerado nesta ferramenta (ou adicione um Code Embed e cole o código de incorporação completo).
    2. 

  2. O formulário só aparece no site publicado — o Designer mostra um embed vazio.
    3. 

  3. Se houver vários formulários na mesma página, dê a cada um um ID de container diferente.
    4. 

  4. Acompanhe conversões com campos ocultos e parâmetros UTM, ou use o callback onFormSubmitted do HubSpot no script do rodapé.
    5. 



Precisa combinar cores com o seu design system? Converta-as com o Conversor de Cores e verifique o contraste do texto com o Verificador de Contraste. Para seções nativas do Webflow, veja HTML & CSS para Webflow.
Também pesquisado como: css formulário hubspot, estilizar formulário hubspot, personalizar formulário hubspot, formulário hubspot webflow, código embed hubspot, design formulário hubspot, hs-form css, hbspt.forms.create.
Ferramentas que combinam com: Estilizador de Formulário HubSpot
  • Conversor de Formato de Data — Cole um formato de data como DD.MM.YYYY HH:mm e receba o equivalente para Make, Zapier, n8n, date-fns, Python e PHP, com prévia ao vivo e expressões prontas para colar.
  • Localizador de Path JSON — Cole um payload de webhook ou a resposta de uma API, clique em qualquer valor e copie o caminho exato — para JavaScript, JSONPath, jq, Python, PHP, n8n e Make.
  • HTML e CSS para Webflow — Cole o HTML e o CSS, clique em Copy to Webflow e cole no Designer — você recebe Div Blocks, Headings, Links, Imagens e Listas reais, com classes, combo classes, breakpoints para tablet e mobile e estados hover, em vez de um grande Code Embed.
  • Gerador de UTM — Adicione utm_source, utm_medium, utm_campaign e outros parâmetros a qualquer link, veja em qual canal do GA4 a visita será registrada e marque uma lista inteira de URLs de uma vez.
Perguntas frequentes
Por que meu CSS não altera o formulário HubSpot?
Provavelmente o formulário é renderizado dentro de um iframe, que o CSS da página não alcança. Inspecione um campo na página publicada: se os inputs estiverem dentro de um <iframe>, mude o formulário para HTML puro no HubSpot (se seu plano permitir) ou estilize-o nas configurações de estilo de formulário do HubSpot.
Onde encontro o Portal ID e o Form ID?
No HubSpot, abra Marketing → Formulários, selecione o formulário, clique em Compartilhar (ou Incorporar) e copie o código de incorporação. portalId e formId estão nesse trecho, junto com a região (por exemplo eu1 ou na1).
Por que o formulário aparece vazio no Designer do Webflow?
Scripts incorporados não são executados no Designer. Publique o site e verifique o formulário no domínio de staging ou no domínio real.
Consigo estilizar campos em duas colunas?
Sim. O HubSpot coloca campos lado a lado em fieldset.form-columns-2; o CSS gerado transforma isso em uma linha flexível que empilha em telas abaixo de 768px.
Esta ferramenta é afiliada ao HubSpot?
Não. A devpack é independente; HubSpot é marca registrada da HubSpot, Inc. A ferramenta apenas gera CSS e código de incorporação para formulários de sua propriedade.
Posso instalar o Estilizador de Formulário HubSpot como um aplicativo da web e usá-lo offline?
Sim. O Estilizador de Formulário HubSpot é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

      
    

    
    
Ferramentas relacionadas
localHTML e CSS para WebflowCole o HTML e o CSS, clique em Copy to Webflow e cole no Designer — você recebe Div Blocks, Headings,…localGerador de UTMAdicione utm_source, utm_medium, utm_campaign e outros parâmetros a qualquer link, veja em qual canal do…localConversor de CoresCole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros…localVerificador de ContrasteInforme uma cor de texto e uma cor de fundo para obter a razão de contraste WCAG exata, o resultado de…localConversor de Formato de DataCole um formato de data como DD.MM.YYYY HH:mm e receba o equivalente para Make, Zapier, n8n, date-fns,…localLocalizador de Path JSONCole um payload de webhook ou a resposta de uma API, clique em qualquer valor e copie o caminho exato —…