Como integrar HubSpot & Webflow

Se você escolheu hospedar e construir seu site no Webflow, mas quer continuar usando os formulários do HubSpot e conectar os dois sistemas, talvez esteja se perguntando qual é a melhor forma de fazer isso. Neste artigo, vamos explorar as melhores maneiras de integrar o Webflow ao HubSpot para você aproveitar o melhor das duas ferramentas.

Opção 1: integração do HubSpot com o Webflow Enterprise

Infelizmente, por enquanto a integração "oficial" com o HubSpot só está disponível se você contratar a versão Enterprise do Webflow. Isso significa que a integração é bem simples e funciona de forma plug and play, mas e se você não quiser ou não precisar de um plano Webflow Enterprise só por causa da integração com o HubSpot?

Opção 2: usar formulários que não são do HubSpot

O HubSpot tem uma opção de configuração que permite acompanhar os envios de formulários que não são do HubSpot em um site onde o código de rastreamento do HubSpot esteja instalado. Para isso funcionar, essa opção precisa estar ativada nas configurações do HubSpot, em Formulários.

Depois de ativada, se o código de rastreamento do HubSpot estiver instalado no site e na página em que está o formulário, o HubSpot vai coletar as informações desse formulário. Há algumas ressalvas e limitações listadas neste artigo do HubSpot. Para que os envios sejam coletados no HubSpot, seu formulário precisa:

• ser um formulário HTML estático.
• estar dentro de tags HTML <form>.
• não estar dentro de um <iframe>.
• ter um campo de entrada de e-mail.

Talvez você precise da ajuda de um desenvolvedor se não tiver certeza sobre isso. Depois de configurado, quando alguém enviar o formulário do Webflow, ele aparecerá na seção de formulários do HubSpot. Note que você pode ver nomes de formulário incomuns, porque o HubSpot pega o nome do formulário a partir do código CSS do site.

A ferramenta identifica os formulários do seu site com base no seletor CSS do formulário. Isso significa que, se o seu formulário tiver o ID CSS "gform_7", ele aparecerá no painel de formulários como "#gform_7". Quando um formulário aparecer na ferramenta de formulários que não são do HubSpot, você pode renomeá-lo para que você e sua equipe consigam identificá-lo.

A vantagem da Opção 2 é que você usa o construtor de formulários do Webflow e estiliza os formulários como quiser, sem precisar incorporar formulários do HubSpot, que podem ter um visual diferente e exigir código JavaScript extra.

A outra desvantagem dessa opção é que você não pode usar formulários que não são do HubSpot como gatilhos de evento para o Google Ads. Isso não é essencial, mas, se você quiser usar os envios de formulário como um evento no HubSpot para alimentar o Google Ads, o formulário precisa ser do HubSpot, o que é um pouco chato.

Opção 3: usar formulários incorporados do HubSpot

A terceira opção é usar a incorporação normal do HubSpot para os seus formulários. É simples: basta copiar o código de incorporação do formulário do HubSpot e colá-lo na sua página no Webflow Designer. Para isso, use o recurso de embed do Webflow.

Este é um vídeo da base de conhecimento do Webflow sobre o código de incorporação. Se você tem um Workspace Core, Growth, Agency ou Freelancer, ou se o seu site tem um plano de site ativo, você pode usar o elemento Embed.

Abaixo, veja um exemplo de código de incorporação de formulário do HubSpot, que você obtém no HubSpot clicando no formulário e depois em compartilhar.

A possível desvantagem de integrar formulários do HubSpot ao Webflow dessa forma é que o estilo do formulário pode ficar diferente do estilo dos formulários do Webflow. Você pode alterar a configuração do formulário no HubSpot para remover todo o estilo, mas aí dá um pouco de trabalho criar e aplicar estilos CSS a todos os elementos do formulário para que combinem com os formulários do Webflow.

Resumo

HubSpot e Webflow não se entendem tão bem quanto outras ferramentas, mas ainda assim são bem fáceis de configurar. A função de formulários que não são do HubSpot ajuda bastante a integrar seus formulários do Webflow ao HubSpot, só que você perde um pouco de funcionalidade. O melhor cenário é incorporar o formulário do HubSpot e ajustar o estilo para combinar com o seu site, e para isso você pode precisar da ajuda de um desenvolvedor web.