NA5 Blog

Formulário HubSpot customizado com consulta API (a gente explica!)

Formulário HubSpot customizado com consulta API (a gente explica!)

Entenda o que é e aprofunde seu conhecimento sobre formulário customizado HubSpot.

Publicado em por

As empresas buscam formas de conseguir capturar as informações dos contatos que visitam os seus sites e é por isso que criam e espalham formulários em suas páginas.

Quem é cliente HubSpot sabe que a ferramenta de construção de formulários da plataforma torna este processo muito mais fácil.

Mas, as médias e grandes empresas são criativas e querem criar formulários sofisticados

Por exemplo: incluir um campo de CEP no formulário que pesquisa a base dos Correios para validar a informação no momento do cadastro, já que isso influencia na distribuição de leads.

Por isso, a NA5 encontra soluções para as médias e grandes empresas que usam HubSpot poderem ir além.

Para resolver esse problema é preciso realizar um desenvolvimento específico (você precisará de um programador interno ou contratar uma consultoria, como a NA5) que será combinado com um formulário HubSpot nativo da ferramenta, resultando em um formulário HubSpot customizado (que é diferente de um formulário personalizado).

Você pode ter formulários tão otimizados ao ponto de fazer as perguntas certas, na hora certa, para as pessoas certas, podendo até ter acesso às fontes externas para servir ao seu questionário de forma muito mais específica e poderosa.

Como muitas empresas nos procuram para saber como fazer com que os formulários da HubSpot possam consultar uma API — Application Programming Interface ou Interface de Programação de Aplicação, que nada mais é que a troca de informações entre sistemas —, nós resolvemos criar este artigo explicando como você pode fazer um formulário HubSpot customizado.

Bons estudos!

Os formulários HubSpot

As empresas gostam de usar os formulários HubSpot pela facilidade de criação e, principalmente, pelo rastreamento de informações — como identificar a origem dos contatos ou o anúncio (Ads) que gerou a conversão do lead.

Por padrão, o HubSpot oferece uma ferramenta de formulários personalizados. Entretanto, nosso objeto de estudo trata de formulários customizados.

Eles podem soar parecidos, mas oferecem resultados diferentes.

Formulário HubSpot Personalizado x Formulário HubSpot Customizado

Personalização é geralmente o padrão de qualquer criador de formulários. Ou seja, é possível escolher os campos que deseja adicionar no formulário, alterar a ordem dos campos e até o estilo visual de cada formulário por uma diversidade de campos e formatação de estilo.

Ao criar um formulário personalizado, você consegue solicitar informações relevantes para empresas que vão além do básico (nome, telefone e e-mail), como a solicitação de consentimento para envio de conteúdo (adequando-se a LGPD — Lei Geral de Proteção de Dados) e campo que determinam a segmentação da persona, entre outros.

O HubSpot tem diversas opções de personalização em seu criador de formulários, que funcionam especialmente bem para uma variedade de negócios e campanhas específicas (assinar blog, fale conosco, baixar e-books, entre outros).

Entretanto, para quem busca ter um formulário que vai além do que a funcionalidade de “Formulários” da HubSpot oferece, é preciso tratar isso como um projeto, já que um “formulário HubSpot customizado” não é uma funcionalidade pronta, mas uma solução sob medida.

O formulário HubSpot customizado abre um mundo de possibilidades. Ele personaliza o personalizado e cria infinitas possibilidades de aplicação e experiência para os visitantes de determinada página, ideal para médias e grandes empresas que precisam de formulários mais avançados e específicos para seus negócios.

Alguns exemplos práticos que podem ser usados com formulário HubSpot customizado:

  • Inclusão de campo de CNPJ e CPF com máscara de preenchimento e validação.
  • Oferecer solicitação de empréstimo ou cálculo de financiamento, com máscara no formato de moeda (R$, USD, etc.), consultando API externa para calcular o valor das parcelas, baseado no número de parcelas selecionadas.
  • Preenchimento automático de informações nos campos de endereço (logradouro, cidade e estado), que surgem a partir da consulta realizada na API dos Correios quando o campo CEP é informado.

Populando campos no formulário HubSpot customizado

No tópico anterior citamos como exemplo o preenchimento automático dos campos de endereço a partir do preenchimento do CEP.

É comum em aplicações termos esse tipo de formulário inteligente onde a informação de um “segundo campo” depende da informação inserida ou selecionada no “primeiro campo”, em que é feita uma consulta via API a partir das informações iniciais.

Essas consultas são feitas em outras fontes externas (seja tabelada ou atualizada em tempo real), para assim dar continuidade ao segundo campo agora customizado, durante o processo de captação de informações pelo questionário.

Formulário HubSpot Customizado com consulta via API – captura de informações externas

São características que superam a personalização, e por consequência, servem ao seu negócio de forma muito mais específica e poderosa.

Pré-requisitos para desenvolver um formulário HubSpot customizado

Apesar da ferramenta de construtor de formulários HubSpot conter recursos avançados, como lógica de preenchimento (mostra determinado campo de acordo com a opção escolhida em outro campo), as especificidades de certas operações de médias e grandes empresas requerem a criação de formulários customizados.

Para construir formulários HubSpot customizados, será necessário:

  1. Desenvolver (codificar) um formulário, programado dentro ou fora do CMS da HubSpot.

    Caso ele tenha sido desenvolvido fora da plataforma, é necessário contratar uma empresa para hospedá-lo online, como AWS ou Heroku. Por isso, recomendamos usar o HubSpot CMS Enterprise (falaremos no tópico abaixo).
  2. Criar um formulário no construtor de formulários HubSpot para receber as informações submetidas pelo formulário do “Item 1".

O formulário desenvolvido no “Item 1" será a interface (a ”casca”) na qual o contato preencherá os dados.Via programação, essas informações serão enviadas para o formulário do “item 2" previamente criado para mensuração, rastreamento e acompanhamento dos dados captados.

Cuidados que o especialista HubSpot precisa ter

✅ Prepare os campos para receber as informações

Os campos do formulário do “Item 2" que receberão as informações precisam ser previamente criados no HubSpot.

Esses campos são propriedades do objeto “Contatos” do HubSpot. Para saber como criar uma propriedade no HubSpot, clique aqui.

Procure utilizar os nomes internos das propriedades seguindo um padrão.

✨ DicaPro: Na NA5, nós preferimos usar os nomes internos dos campos em inglês, separando as palavras com “_”. Por exemplo, o campo em que um contato escolhe o tamanho da empresa, chamamos internamente de “company_size_range”

✅ Certifique-se de realizar o rastreamento

É preciso submeter os dados do formulário do “Item 1" para o formulário do ”Item 2" usando uma API HubSpot específica para submissão de formulário.

✨ DicaPro: Para que seja feito o rastreamento da origem dos acessos é preciso ter o cuidado de transmitir o cookie da HubSpot como parâmetro via API.

Se o cookie não for passado, o contato e o formulário serão capturados como origem “offline”, perdendo toda a riqueza de dados que é revelada quando um contato é rastreado (diferente de "offline").

Benefícios de usar o HubSpot CMS Enterprise com formulário customizado

Na maioria das vezes quando se consulta um serviço externo via API, é preciso enviar uma credencial de autenticação, que valida se a empresa que está "consumindo" a API tem autorização para isso. Essa credencial precisa ficar muito bem guardada.

Por isso, quando um formulário consulta uma API externa, é preciso adicionar uma "camada" (layer) de comunicação para guardar essa credencial de modo que não fique exposta, por exemplo, no código-fonte da página que é carregada no navegador do visitante que contém o formulário.

Se você usar uma hospedagem como AWS da Amazon para manter seu formulário customizado online, o TI de sua empresa ou uma consultoria especializada deverá ficar responsável por sua manutenção e segurança.

Por outro lado, se você tiver contratado o HubSpot CMS Enterprise, seu desenvolvedor poderá utilizar um serviço da HubSpot chamado Serverless (sem servidor), que permite executar códigos de programação, usando a infraestrutura de servidores da própria HubSpot, sem a preocupação que envolve ter que manter um servidor, como na AWS.

Outro benefício de contar com a HubSpot para realizar a "hospedagem" do formulário HubSpot customizado é de ser um fornecedor já homologado, facilitando o processo de compras (suprimentos) para a contratação.

Dessa forma, você tem na plataforma HubSpot uma solução Enterprise completa em um único lugar.

Alternativa para rastrear formulários não-HubSpot

É possível coletar dados a partir de formulários fora da HubSpot, mesmo que não estejam integrados à plataforma via API, como um formulário de cadastro de cliente no ERP da TOTVS.

ATENÇÃO: esta não é a maneira que recomendamos, mas pode ser uma alternativa ("quebra-galho") para você que acabou de contratar a HubSpot, ainda não conseguiu concluir sua implementação e/ou seu TI não finalizou a integração de seu formulário não-HubSpot.

Usando o mesmo código de rastreamento HubSpot na página com o formulário não-HubSpot, existe uma opção nas configurações do HubSpot que possibilitará que os dados submetidos por esse formulário sejam destinados ao CRM. Veja aqui como habilitar.

Entretanto, tem alguns critérios que possibilitam ou não o sucesso dessa captura, resultando em uma coleta não muito efetiva.

Nossa dica aqui é usar essa alternativa caso você esteja implementando o HubSpot e precisa de uma solução temporária para levar tais informações para o seu CRM, mas que por fim, o ideal é que você posteriormente desenvolva seus próprios formulários customizados via o módulo do HubSpot CMS Enterprise OU usem formulários não-HubSpot integrados com a API da HubSpot específica para submeter formulários (descrito neste artigo anteriormente).

Conclusão

As médias e grandes empresas que querem entregar uma experiência superior podem encontrar na plataforma HubSpot os recursos Enterprise necessários para trabalhar de forma centralizada.

Ao trabalhar com formulários HubSpot customizados, que consultam APIs externas, a empresa pode "ganhar" em dobro: oferece uma melhor experiência ao consumidor e melhora os processos internos. Por exemplo: se o campo CEP é um gatilho para segmentar a base de contatos (Marketing) e distribuir o lead por território (Vendas), o simples fato de conseguir ter essa informação validada no momento do cadastro, otimiza todos os processos envolvidos, evitando desgastes e esforços humanos desnecessários.

A NA5 ajuda sua empresa com consultoria e na contratação de HubSpot.

Este é o nosso segredo

Nós revelamos os segredos que inspiram especialistas HubSpot de grandes empresas do mundo.