Configurar e estilizar um formulário HubSpot em um site externo (herdado)

 Após criar um formulário no HubSpot, você pode adicioná-lo às páginas do HubSpot ou às páginas que você criou fora do HubSpot. Os formulários podem ser compartilhados em seu site externo não hospedado pela HubSpot das seguintes maneiras:

• Incorporando o código do formulário a uma página existente.
• Criando uma página de formulário independente à qual adicionar um link.

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. CSS Depois de adicionar o formulário, você poderá estilizar o formulário HubSpot incorporado nas páginas externas no editor de formulários ou com

Se você estiver trabalhando com o WordPress, saiba como inserir um formulário em sua postagem ou página do WordPress.

Observe: é recomendável usar o editor de formulários atualizado para criar e gerenciar formulários. Este artigo deve ser usado como referência para formulários existentes criados somente com o editor antigo. Saiba mais sobre formulários de estilo em um site externo.. 

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

Observe: a partir de 16 de maio de 2024, ao adicionar o código de inserção do formulário em uma página externa, o domínio da página deve ser adicionado como um domínio de site para ser tratado como um domínio confiável. Caso contrário, os envios para o formulário também serão filtrados para seus envios de spam.

• Na sua conta HubSpot, acesse Marketing > Formulários.
• Passe o cursor 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 ao seu formulário, o código de inserção do formulário será alterado. Nesse caso, você deve adicionar novamente o código de incorporação ao site externo.
• Clique em Copiar.
• 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 o formulário usando o Link de compartilhamento. Em um Link de compartilhamento, o formulário será exibido em uma página independente com seu próprio URL. Este link de compartilhamento não pode ser ocultado nem tornado privado. Qualquer pessoa com o link de compartilhamento poderá acessar o formulário. 

• Na sua conta HubSpot, acesse Marketing > Formulários. 
• Passe o cursor sobre um formulário e clique em Ações > Compartilhar.
• Na caixa de diálogo, clique na guia Link de compartilhamento. 
• Clique em Copiar para copiar o URL da página de formulário para a área de transferência. 
• No navegador, abra uma nova janela ou guia e cole a URL da página de formulário na barra de endereços para carregá-la. Você também pode compartilhar a URL da página de formulário diretamente com outras pessoas para que elas tenham acesso ao formulário.
  
  

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

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

Observe: os temas e estilos definidos no editor de formulários serão aplicados somente a formulários inseridos ou páginas de formulários autônomas. Os formulários em suas páginas HubSpot só podem ter o estilo com as opções de estilo de módulo de formulário no editor de conteúdo.

Estilizar o formulário com um tema 

Se quiser criar um estilo para o formulário herdado sem escrever nenhum código personalizado, você poderá aplicar temas predefinidos ao formulário incorporado ou à página de formulário independente. Esses temas adicionam mais opções de personalização aos formulários, além de quaisquer configurações globais de estilo de formulário.

Para estilizar o formulário com um tema: 

• Na sua conta HubSpot, acesse Marketing > Formulários.
• Passe o cursor do mouse sobre um formulário e clique em Editar. 
• No editor de formulários, clique no botão Visualização & do Estilo guia.
• Se você estiver editando um formulário herdado, no painel esquerdo, desmarque a caixa de seleção Manter tema antigo. Isso removerá o estilo HubSpot padrão antigo aplicado a este formulário. Qualquer CSS ou JavaScript personalizado adicionado ao formulário deixará funcionará. Esta caixa de seleção não se aplica a novos formulários criados em sua conta. 
• Selecione um tema.
• Na parte superior direita, clique em Publicar ou Atualizar.

Usar um estilo personalizado

Também é possível estilizar formulários em um nível mais granular. 

Para aplicar um estilo personalizado: 

• Na sua conta HubSpot, acesse Marketing > Formulários.
• Passe o cursor do mouse sobre um formulário e clique em Editar. 
• Se você tiver um Marketing hub Starter, Professional, Visualização & do Estilo no editor de formulários. 
  • 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 do formulário. Esses estilos são definidos individualmente e substituirão as configurações globais de estilo de formulário.
  • Depois de personalizar o formulário, no canto superior direito, clique em Publicar ou Atualizar.
    
    

CSS Estilo do formulário incorporado com

Se você tiver uma conta HubSpot ou um Marketing hub Content hub CSS ou umProfissional, você poderá incorporar seu formulário em seu HubSpot e, em seguida, criar um estilo para este formulário incorporado com 

Observe: você só pode definir formulários herdados como HTML bruto. CSS Saiba mais sobre como criar um estilo para o formulário incorporado com o  

CSS Para estilizar o formulário incorporado com 

• Na sua conta HubSpot, acesse Marketing > Formulários.
• Passe o cursor do mouse sobre um formulário e clique em Editar. 
• No editor de formulários, clique no botão  & Visualização do estilo@ info: whatsthis guia.
• Clique para ativar ou desativar a opçã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.
• Na parte superior direita, clique em Publicar ou Atualizar.
• Adicione o código de inserção de formulário à sua página externa. Se você já inseriu o formulário, substitua o código de inserção existente por esta nova versão sem estilo. Depois de incorporar o formulário:
  
  • Você poderá estilizar o formulário na sua folha de estilos externa com CSS.
  • Você também pode modificar o código de incorporação do formulário para fazer personalizações adicionais do formulário. Como os formulários HubSpot são criados com JavaScript, não HTML, personalizar o código de inserção de formulário requer a ajuda de um desenvolvedor que sabe como trabalhar com JavaScript