Ir para o conteúdo principal
Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.
Forms

Compartilhar um formulário do HubSpot em um site externo

Ultima atualização: Setembro 15, 2022

Disponível para

Todos os produtos e planos

 Depois de criar um formulário no HubSpot, você poderá adicioná-lo a páginas do HubSpot ou páginas que você criou fora do HubSpot. Os formulários podem ser compartilhados em seu site externo, não hospedado pela HubSpot, por:

  • Incorporar o código do formulário a uma página existente.
  • Criando uma página de formulário independente.

Com qualquer método, as alterações feitas no formulário na ferramenta de formulários da HubSpot serão refletidas automaticamente no formulário ao vivo em seu site externo. Depois de adicionar seu formulário, você pode digitar seu formulário do HubSpot incorporado em suas páginas externas no editor de formulários ou com CSS na sua folha de estilos externa.

Se estiver trabalhando com WordPress, saiba como inserir um formulário no seu post ou página do WordPress.

Adicione o código de incorporação de formulário

Para acessar o código de incorporação do formulário: 
  • Na sua conta da HubSpot, navegue até Marketing > Captura de leads > Formulários.
  • Passe o mouse sobre um formulário e clique em Ações > Compartilhar
  • Na caixa de diálogo, se desejar adicionar contatos que enviaram o formulário a uma campanha do Salesforce, clique nomenu Adicionar contatos a um menu suspenso de campanhado Salesforce e selecione uma campanha. Se você associar uma campanha do Salesforce com seu formulário, o código incorporado do formulário será alterado. Nesse caso, você deve adicionar novamente o código de incorporação ao site externo.
  • Clique emCopiar
  • Cole o código incorporado no módulo HTML em sua página externa. Para rastrear o formulário, o código de rastreamento do HubSpot deve ser instalado na página externa que contém um formulário do HubSpot. 


Crie uma página de formulário independente 

Você também pode compartilhar seu formulário através do link Compartilhar. Em um link Compartilhar, o formulário será exibido em uma página autônoma em seu próprio URL. Este link de compartilhamento não pode ser oculto ou tornado privado. Qualquer pessoa com o link de compartilhamento poderá acessar o formulário.   

  • Na sua conta da HubSpot, navegue até Marketing > Captura de leads > Formulários
  • Passe o mouse sobre um formulário e clique em Ações > Compartilhar
  • Na caixa de diálogo, clique naguia Compartilharlink. 
  • Clique em Copiar URL para copiar a URL da página de formulário. 
  • No seu navegador, abra uma nova janela ou guia e cole o URL da página do formulário 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.

Estilizar seu formulário incorporado no editor de formulários

Ao estilizar seu formulário incorporado com o editor de formulários HubSpot, você pode usar um tema ou aplicar seu próprio estilo personalizado. 

Observação: os temas e estilos definidos no editor de formulários se aplicam apenas a formulários incorporados ou páginas de formulário independentes. Os formulários nas suas páginas do HubSpot somente podem ser estilizados com as opções de estilo do módulo de formulário no editor de conteúdo.

Estilize o seu formulário com um tema

Se quiser estilizar os formulários sem escrever nenhum código personalizado, você pode aplicar temas predefinidos ao seu formulário incorporado ou na página de formulário independente. Esses temas adicionam mais opções de personalização aos seus formulários, além de qualquer configuração de estilo de formulário global.

Para estilizar seu formulário com um tema: 

  • Na sua conta da HubSpot, navegue até Marketing > Captura de leads > Formulários.
  • Passe o cursor do mouse sobre um formulário e clique em Editar
  • No editor de formulário, clique na guia Estilo e visualização.
  • Se estiver editando um formulário herdado, no painel esquerdo, desmarque a caixa de seleção Manter o tema antigo. Isso vai remover o estilo padrão antigo do HubSpot aplicado ao formulário. Qualquer CSS ou JavaScript personalizado adicionado ao formulário deixará funcionará. Essa caixa de seleção não se aplica a novos formulários criados em sua conta. 
  • Seleccione um tema.
  • No canto superior direito, clique em Publicar ou Atualizar.

 

Usar um estilo

Se você tiver uma assinatura Marketing Hub Starter, Professional ou Enterprise com sua conta HubSpot, também poderá criar formulários incorporados em um nível mais granular.

Para aplicar um estilo personalizado: 

  • Na sua conta da HubSpot, navegue até Marketing > Captura de leads > Formulários.
  • Passe o cursor do mouse sobre um formulário e clique em Editar
  • No editor de formulário, clique na guia Estilo e visualização.
  • No painel esquerdo, clique na seção Estilo. Aqui, você pode configurar a largura do campo de formulário, a família de fontes, os tamanhos de fonte, as cores de fonte e o botão de formulário. Esses estilos são definidos em uma base de formulário individual e substituirão as configurações de estilo de formulário global.
  • Depois de personalizar seu formulário, no canto superior direito, clique em Publicar ou Atualizar.



Estilizar seu formulário incorporado com CSS na folha de estilos externa 

Se você tiver uma assinatura do Marketing Hub ou CMS Hub Professional ou Enterprise com sua conta HubSpot, você pode incorporar seu formulário como um formulário HTML bruto e, em seguida, estilizar este formulário incorporado com CSS em sua folha de estilos externa. 

Para estilizar seu formulário incorporado com CSS: 

  • Na sua conta da HubSpot, navegue até Marketing > Captura de leads > Formulários.
  • Passe o cursor do mouse sobre um formulário e clique em Editar
  • No editor de formulário, clique na guia Estilo e visualização.
  • Clique para ativar o botão Definir como formulário HTML bruto. O formulário será renderizado como um elemento HTML bruto na sua página externa, em vez de dentro de um iFrame, e qualquer estilo padrão do HubSpot aplicado ao formulário será removido.
  • No canto superior direito, clique em Publicar ou Atualizar.
  • Adicione o código incorporado do formulário à página externa. Se o formulário já tiver sido incorporado, você deve substituir o código incorporado existente por esta nova versão sem estilo. Após incorporar seu formulário:
    • Você poderá estilizar o formulário em sua folha de estilos externa com CSS.
    • Você também pode modificar o código incorporado do formulário para fazer personalizações de formulário adicionais. Como os formulários do HubSpot são criados com JavaScript, não HTML, a personalização do código incorporado do formulário requer a ajuda de um desenvolvedor que saiba como trabalhar com JavaScript

 

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.