Estilizar e incorporar formulários do HubSpot em um site externo

Use os formulários do HubSpot no seu site externo para capturar leads e sincronizar automaticamente os dados de contato com a sua conta da HubSpot. Você pode estilizar seu formulário no HubSpot e usar o código de incorporação para adicioná-lo ao seu site. Ou use um link de compartilhamento para enviar um formulário independente para seu público. 

A incorporação de um formulário garante que os envios sejam sincronizados diretamente com sua conta da HubSpot, onde você pode gerenciar contatos, gatilho a automação e analisar o desempenho. Por exemplo, você pode adicionar um formulário da HubSpot a uma página de produto no site da sua empresa para capturar solicitações de demonstração e acompanhar com um e-mail automatizado. 

Se o seu formulário foi criado no editor de formulários antigos, saiba como configurar e estilizar um formulário antigo em um site externo.

Antes de começar

Antes de começar a trabalhar com esse recurso, revise os requisitos técnicos e as considerações sobre o uso de formulários em sites externos.

Requisitos

• Ao incorporar um formulário da HubSpot em um site externo, você precisará adicionar o domínio do site às configurações de rastreamento. Os envios de formulários dos domínios que não foram adicionados serão marcados como spam.
• Para rastrear análise no formulário integrado, você deve instalar o código de rastreamento da HubSpot na página externa.
  

Limitações e considerações

• A definição do seu formulário como um formulário HTML bruto não está disponível no editor de formulários atualizado. Somente formulários criados usando o editor de formulários antigo podem ser definidos como HTML bruto.
• A personalização do código de incorporação de um formulário requer a ajuda de um desenvolvedor que saiba como trabalhar com JavaScript. Uma personalização mais avançada pode ser feita com um formulário personalizado e a API de Formulários da HubSpot.

Estilizar seu formulário 

Personalize o texto, os campos de entrada, os botões e o plano de fundo do formulário e das etapas do formulário. As personalizações do estilo de formulário são aplicadas a todas as etapas do formulário. Você não pode estilizar etapas individuais do formulário separadamente. 

1. Na sua conta HubSpot, acesse Marketing > Formulários.
2. Crie um novo formulário ou passe o mouse sobre um formulário existente e clique em Editar. 
3. No menu da barra lateral esquerda, clique no botão styles Ícone de estilo.
4. No painel Estilos de formulário , você pode personalizar os seguintes componentes:
   • Campos: personalize o campo, incluindo plano de fundo e bordas. Você também pode personalizar a fonte, o tamanho da fonte e as cores dos seus rótulos, bem como as cores do texto de ajuda, espaços reservados e texto de erro. 
   • Botões: personalize a altura, o arredondamento dos cantos, o plano de fundo, o gradiente e adicione uma sombra projetada ao botão. Você também pode personalizar a fonte, o tamanho da fonte e a cor do texto do botão. 
   • Parágrafo (Rich text): personalize a fonte, o tamanho da fonte e a cor do texto do corpo. 
   • Cabeçalho: personalize a fonte e a cor do texto do cabeçalho. Você pode optar por adicionar uma sombra projetada ao texto do cabeçalho. 
   • Plano de fundo: personalize o plano de fundo do seu formulário e das etapas do formulário. Você pode optar por definir uma cor ou usar uma imagem de fundo. Você pode usar Assistentes de ia para gerar imagens. Você também pode optar por definir uma borda para o seu formulário.
   • Barra de progresso: personalize a barra de progresso no seu formulário, incluindo a cor da linha de progresso e a fonte da barra de progresso. 

Compartilhar uma página de formulário independente 

Use um link de compartilhamento para exibir seu formulário em uma página independente. Qualquer pessoa com o link de compartilhamento pode acessar o formulário. O link de compartilhamento não pode ser ocultado ou tornado privado.

Para copiar o link de compartilhamento:

1. Na sua conta HubSpot, acesse Marketing > Formulários.
2. Passe o mouse sobre um formulário e clique em Editar.
3. Na parte superior direita, clique em Revisar e atualizar.
4. No painel direito, na parte inferior, clique em Atualizar.
5. Na caixa de diálogo, clique em Copiar um link de compartilhamento.
6. Na parte inferior, clique em Copiar. Isso copiará o endereço da web da página para a área de transferência.
7. No seu navegador, abra uma nova janela ou guia e cole o URL da sua página na barra de endereço para carregá-lo. Você também pode compartilhar o URL da página de formulário diretamente com outras pessoas para fornecer acesso ao formulário.

Copiar o código de inserção de formulário

Incorpore seu formulário em sua página externa copiando o código de incorporação do formulário e colando-o em sua página externa. Para rastrear análises para seu formulário incorporado, seu código de rastreamento HubSpot deve estar instalado na página externa onde você incorpora o formulário HubSpot.

Para copiar o código de incorporação: 

1. Na sua conta HubSpot, acesse Marketing > Formulários.
2. Passe o mouse sobre um formulário e clique em Editar. 
3. Na parte superior direita, clique em Revisar e atualizar.
4. No painel direito, na parte inferior, clique em Atualizar.
5. Na caixa de diálogo, clique em Obter código incorporado.
6. Na guia Código de incorporação , clique em Copiar.
7. Cole o código incorporado no módulo HTML em sua página externa.

Acessar o código do desenvolvedor do formulário

Incorpore seu formulário e personalize o estilo usando CSS em sua folha de estilo externa. Com esse método, você pode substituir estilos padrão, aplicar estilo granular a elementos de formulário específicos e definir regras globais para estilo consistente em todos os formulários inseridos. Saiba mais sobre como definir estilo personalizado para formulários incorporados usando 

Para acessar o código do desenvolvedor: 

1. Na sua conta HubSpot, acesse Marketing > Formulários.
2. Passe o mouse sobre um formulário e clique em Editar. 
3. Na parte superior direita, clique em Revisar e atualizar.
4. No painel direito, na parte inferior, clique em Atualizar.
5. Na caixa de diálogo, clique em Obter código incorporado.
6. Clique na guia Código do desenvolvedor (Avançado) .
7. Para aceitar o risco de que as alterações feitas externamente em
8. Na parte inferior, clique em Copiar.
9. Adicione o código de inserção de formulário à sua página externa. CSS Depois de incorporar o formulário, você poderá estilizá-lo na folha de estilos externa com
   • As variáveis que você pode substituir estão listadas neste artigo.
   • Os estilos globais substituirão os estilos de nível superior em todos os formulários incorporados. Você também pode direcionar elementos individuais de seus formulários, como uma linha de elemento de formulário, botões de envio ou cabeçalhos de formulário.