Compartilhar um formulário do HubSpot em um site externo

Com a ferramenta de formulários, você pode coletar informações de visitantes ao seu website, permitindo você fazer marketing, vender e servir esses visitantes conforme se envolvem com seu negócio. 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 de duas maneiras em seu site externo, não hospedado pela HubSpot: ao incorporar o código do formulário a uma página existente ou ao criar uma página de formulário independente.

Com qualquer método, todas as alterações feitas no formulário na ferramenta de formulários da HubSpot serão refletidas automaticamente no formulário ativo em seu site externo

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

Observação: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.

• Na sua conta da HubSpot, navegue até Marketing > Captura de leads > Formulários.
• Crie um novo formulário ou passe o mouse sobre um formulário existente, clique no menu suspenso Ações e selecione Editar formulário.
• Clique na guia Opções para personalizar o que acontecerá após um visitante enviar seu formulário. Você pode optar por redirecionar seus visitantes para uma página de agradecimento ou exibir uma mensagem de agradecimento in-line quando um visitante enviar seu formulário.

• No editor de formulário, no canto superior direito, clique em 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.
• Clique emCopiar. 
  
• No canto superior direito, clique em Publicar. 
• 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. O HubSpot coletará os envios de formulário sem o código de rastreamento do HubSpot instalado, mas nenhuma análise será registrada. 

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

Crie uma página de formulário independente 

Você pode compartilhar seu formulário por meio de uma página de formulário para que ele exista em sua própria página em seu próprio URL.  

• Na sua conta da HubSpot, navegue até Marketing > Captura de leads > Formulários. 
• Crie um novo formulário ou passe o mouse sobre um formulário existente, clique no menu suspenso Ações e selecione Editar formulário.
• No canto superior direito, clique em Compartilhar.

• Na caixa de diálogo, clique naguia Compartilharlink. 
• Clique emCopiarURL para copiar a URL da página de formulário.

• No canto superior direito, clique em Publicar.

• 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.

Se você observar que seu formulário não está funcionando no WordPress, ou que o código integrado está sendo alterado quando você visualiza a página ativa, talvez seja necessário inserir o formulário usando um plug-in para garantir que o código integrado permaneça intacto. Se você estiver usando a versão mais recente do Gutenberg, a que remove JavaScript integrado, use o plug-in Inline JS Block para Gutenberg para incorporar formulários e CTAs na sua página.

Estilizar o formulário incorporado em páginas externas

Personalize seu formulário do HubSpot incorporado em páginas externas no editor de formulários ou com CSS na sua folha de estilos externa.

No editor de formulários

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. Os temas adicionam mais opções de personalização aos formulários, além de qualquer configuração de estilo de formulário global.

• Na sua conta da HubSpot, acesse Marketing > Captura de leads > Formulários.
• Clique no nome de um formulário.
• No editor de formulário, clique na guia Estilo e visualização.
• No painel esquerdo, na seção Tema, desmarque a caixa de seleção  Manter o tema antigo.

Observação: desmarcar a caixa de seleção Manter tema antigo 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 está disponível apenas para formulários antigos e não estará mais disponível nos novos formulários criados em sua conta. 

• Selecione um dos quatro temas.

Estilo (somente Marketing Hub Starter, Professional, Enterprise ou Antigo Marketing Hub Basic )

Além dos temas, você pode estilizar os formulários incorporados em um nível mais granular.

• Na sua conta da HubSpot, acesse Marketing > Captura de leads > Formulários.
• Clique no nome de um formulário.
• No editor de formulário, clique na guia Estilo e visualização.

• No painel esquerdo, clique na seção > Estilo para expandi-la. Aqui, você pode estilizar 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.

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 seu formulário com CSS em sua folha de estilos externa (somente Marketing Hub e CMS Hub Professional ou Enterprise, ou Antigo Marketing Hub Basic )

• Na sua conta da HubSpot, acesse Marketing > Captura de leads > Formulários.
• Clique no nome  do formulário.
• 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 Compartilhar.
• Na caixa de diálogo, clique em Copiar para copiar o código incorporado do formulário.
• 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 o formulário, você pode estilizá-lo em sua folha de estilos externa com CSS. 
• Como alternativa, você 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.