Como conectar formulários do Webflow ao HubSpot com o Make?

Resposta rápida: você pode conectar formulários do Webflow ao HubSpot sem o app nativo criando um cenário no Make que monitora novos envios de formulário do Webflow, mapeia os campos para as propriedades de contato do HubSpot, trata duplicatas e define o lifecycle stage correto automaticamente. Isso garante dados mais limpos e mais controle do que a integração padrão.

O app nativo de HubSpot do Webflow funciona bem para configurações básicas. Mas se você precisa de um mapeamento de campos que vá além de nome e e-mail, de lógica de deduplicação ou de atribuição automática de lifecycle stage, vai bater nos limites dele rapidamente.

O Make (antigo Integromat) preenche essa lacuna. Ao encaminhar os envios dos seus formulários do Webflow por um cenário do Make, você tem um pipeline totalmente configurável entre o seu site e o seu CRM. Sem código e sem dores de cabeça com a qualidade dos dados do outro lado.

Este tutorial mostra o passo a passo: conectar Webflow e HubSpot no Make, mapear seus campos corretamente, filtrar duplicatas e definir lifecycle stages de acordo com o formulário enviado.

O que você precisa antes de começar

Antes de montar o cenário, deixe estes itens prontos:

• Um site no Webflow com pelo menos um formulário publicado
• Uma conta no HubSpot (qualquer plano serve, inclusive o gratuito)
• Uma conta no Make (o plano gratuito atende a este cenário)
• Acesso de administrador às três plataformas

Passo 1: configure o gatilho do Webflow no Make

O gatilho do Webflow monitora novos envios de formulário e dispara o cenário a cada envio recebido.

1. Abra o Make e clique em Create a new scenario
2. Busque por Webflow e selecione o módulo Watch Form Submissions
3. Clique em Add para criar uma nova conexão com o Webflow
4. No Webflow, acesse Site Settings > Integrations > API Access e gere um novo token de API
5. Cole o token no Make e salve a conexão
6. Selecione o seu site na lista suspensa
7. Selecione o formulário específico que você quer monitorar (você pode criar cenários separados para formulários que exijam lógicas diferentes)
8. Defina o limite como 1 para processamento em tempo real

Clique em OK e execute o módulo uma vez com um envio de teste para que o Make capture a estrutura dos dados. Envie seu formulário do Webflow com dados fictícios antes de passar para a próxima etapa.

Passo 2: busque primeiro um contato existente no HubSpot

Pular a deduplicação é o erro mais comum nesse tipo de integração. Sem ela, cada envio de formulário cria um novo registro de contato, e sua base do HubSpot se enche de duplicatas em poucas semanas.

Adicione um módulo Search for a Contact do HubSpot antes de criar qualquer coisa:

1. Adicione um novo módulo depois do gatilho do Webflow
2. Busque por HubSpot CRM e selecione Search for Contacts
3. Conecte sua conta do HubSpot usando OAuth (o Make vai solicitar)
4. Defina o Adicione um módulo para buscar por email, usando o valor de e-mail do envio do Webflow (mapeie a partir da saída do Passo 1)
5. Defina o limite de resultados como 1

Esse módulo retorna o contato existente, se encontrado, ou retorna vazio se não houver correspondência. A próxima etapa se ramifica com base nesse resultado.

Passo 3: adicione um Router para tratar contatos novos e existentes

Um módulo Router divide o seu cenário em dois caminhos: um para contatos novos e outro para contatos existentes.

1. Adicione um módulo Router depois da etapa de busca
2. Caminho 1 (contato novo): adicione um filtro com a condição "Number of results equals 0"
3. Caminho 2 (contato existente): adicione um filtro com a condição "Number of results greater than 0"

Com essa estrutura, você nunca sobrescreve por acidente os dados de um contato com um campo em branco de um formulário e nunca cria duplicatas.

Passo 4: mapeie os campos e crie o contato no HubSpot (Caminho 1)

No caminho de contato novo, adicione um módulo Create a Contact do HubSpot.

O mapeamento de campos é onde a maioria das integrações quebra. Os nomes dos campos do Webflow e os nomes das propriedades do HubSpot raramente coincidem de saída. Veja como tratar isso corretamente:

Mapeamentos de campos padrão:

Separando um campo de nome completo:

Se o seu formulário do Webflow tem um único campo "Name", use as funções de texto nativas do Make para separá-lo:

• Nome: {{1.name | split: " " | first}}
• Sobrenome: {{1.name | split: " " | last}}

Mapeando a origem do lead:

Sempre envie o nome do formulário ou a URL da página como uma propriedade do HubSpot para saber de onde veio cada contato. Mapeie o pageUrl valor do envio do Webflow para uma propriedade personalizada do HubSpot chamada lead_source_url.

Passo 5: atualize o contato existente (Caminho 2)

No caminho de contato existente, adicione um módulo Update a Contact do HubSpot.

1. Mapeie o Contact ID a partir da saída do módulo de busca (isso indica ao HubSpot qual registro atualizar)
2. Mapeie apenas os campos que devem ser atualizados em um novo envio (evite sobrescrever campos como createdate ou original_source)
3. Um padrão seguro: atualize last_form_submitted e last_activity_date apenas, a menos que seu caso de uso exija mais

Isso mantém seus registros de contato existentes limpos e ainda registra a nova interação.

Passo 6: defina o lifecycle stage automaticamente

O lifecycle stage é uma das propriedades mais valiosas do HubSpot e uma das mais frequentemente deixadas em branco. Faça dele parte do cenário para que todo contato chegue com o estágio certo já definido. Se você for analisar o desempenho do seu funil depois, também ajuda comparar a progressão dos estágios com benchmarks de B2B SaaS mais amplos.

Adicione esta lógica aos caminhos de criação e de atualização:

Opção A: defina um lifecycle stage fixo por formulário

Se o seu formulário "Request a Demo" sempre gera Sales Qualified Leads, defina fixamente lifecyclestage como salesqualifiedlead no módulo desse cenário.

Opção B: use uma condicional com base no nome do formulário

Se você tem um cenário que trata vários formulários, adicione um módulo Set Variable antes do módulo do HubSpot e use uma condicional:

If form name = "Request a Demo" → lifecyclestage = salesqualifiedlead
If form name = "Download Guide" → lifecyclestage = lead
If form name = "Contact Us" → lifecyclestage = marketingqualifiedlead

Depois, mapeie essa variável para o campo lifecyclestage no HubSpot.

Valores de lifecycle stage do HubSpot (use exatamente estas strings):

• subscriber
• lead
• marketingqualifiedlead
• salesqualifiedlead
• opportunity
• customer

Passo 7: adicione tratamento de erros para que nada se perca

Os cenários do Make falham silenciosamente por padrão. Um timeout da API do HubSpot ou um campo malformado vai descartar o envio sem aviso.

Adicione um tratador de erros básico para capturar falhas:

1. Clique com o botão direito no módulo Create/Update do HubSpot
2. Selecione Add error handler
3. Escolha Resume e conecte-o a um módulo Send an Email ou Slack que avise você quando algo falhar
4. Inclua os dados brutos do envio na notificação para poder adicionar o contato manualmente, se necessário

Isso leva cinco minutos para configurar e evita perda de dados quando o cenário falha.

Passo 8: teste o cenário completo

Antes de ativar o cenário, faça um teste completo de ponta a ponta:

1. Clique em Run once no Make
2. Envie seu formulário do Webflow com um novo endereço de e-mail
3. Verifique se o contato aparece no HubSpot com os campos e o lifecycle stage corretos
4. Envie o mesmo formulário de novo com o mesmo e-mail
5. Verifique se o HubSpot mostra um contato, e não dois, e se os campos relevantes foram atualizados

Se o caminho de deduplicação não for acionado, verifique se o seu módulo de busca está filtrando pelo campo de e-mail correto da saída do Webflow. O nome do campo varia conforme o rótulo do formulário no Webflow.

Passo 9: ative e programe o cenário

Depois que os testes passarem:

1. Mude o cenário para Active
2. Defina o intervalo de agendamento para a cada 15 minutos (plano gratuito do Make) ou use gatilhos instantâneos se estiver em um plano pago
3. Monitore a aba Scenario History nas primeiras 24 horas para identificar casos extremos

Para formulários de alto volume, faça upgrade para o plano Core do Make para ter gatilhos instantâneos e limites de operações maiores.

Por que usar o Make em vez do app nativo de HubSpot do Webflow?

A integração nativa do Webflow com o HubSpot cuida da passagem básica de campos. O Make é a melhor escolha quando você precisa de:

• Lógica de deduplicação antes da criação dos registros
• Atribuição condicional de lifecycle stage com base no tipo de formulário
• Fluxos de trabalho em várias etapas (por exemplo, também notificar o Slack ou criar um negócio no HubSpot junto com o contato)
• Mapeamento personalizado de campos para propriedades fora do padrão
• Tratamento de erros com notificações de contingência

Para equipes que têm mais de um formulário ou que gerenciam um CRM com dados já existentes, o Make dá um controle que o app nativo não oferece. Se esses formulários ficam em páginas de conversão importantes, aprimorar a integração é ainda mais valioso quando combinado com boas práticas de landing page para SaaS.

Perguntas frequentes

P: Posso conectar vários formulários do Webflow ao HubSpot usando um único cenário do Make?

R: Sim. Use um módulo Router para ramificar o cenário com base no nome do formulário na saída do gatilho do Webflow. Cada ramificação pode ter seu próprio mapeamento de campos e lógica de lifecycle stage. Como alternativa, crie cenários separados por formulário para facilitar a manutenção.

P: Isso funciona com os formulários nativos do Webflow ou só com formulários incorporados?

R: Este tutorial usa os formulários nativos do Webflow por meio do gatilho de API. Funciona com qualquer formulário criado no construtor de formulários nativo do Webflow. Se você usa formulários do HubSpot incorporados diretamente no Webflow, esses envios vão direto para o HubSpot e não precisam do Make no meio do caminho.

P: O que acontece se o HubSpot estiver fora do ar quando um formulário for enviado?

R: O Make tenta novamente as operações com falha automaticamente, com base nas configurações do seu error handler. Com o error handler configurado como descrito na Etapa 7, qualquer envio com falha dispara uma notificação para que você possa resolvê-lo manualmente. O Make também registra todas as execuções com falha na aba Scenario History.

P: Como evitar a sobrescrita do lifecycle stage de contatos existentes?

R: No caminho Update Contact, defina apenas lifecyclestage se o valor atual estiver numa etapa mais baixa do funil do que o novo. Use um filtro antes do módulo Update que verifique o lifecycle stage do contato existente e só siga com a atualização se o novo estágio for uma evolução (por exemplo, passar de lead como marketingqualifiedlead).

P: O Make é gratuito para este caso de uso?

R: O plano gratuito do Make inclui 1.000 operações por mês e intervalos de polling de 15 minutos. Para um formulário de volume baixo a médio (menos de 500 envios por mês), o plano gratuito cobre o scenario descrito aqui. Volumes maiores ou triggers instantâneos exigem um plano pago, a partir de cerca de $9 por mês.