Compartilhar um formulário do HubSpot em um site externo

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. Se o seu conteúdo estiver hospedado fora do HubSpot, você poderá adicionar formulários com os seguintes métodos:

• Incorpore o formulário copiando o código de inserção e adicionando-o à sua página externa.
• Use o link de compartilhamento de formulário, que oferece uma página da Web autônoma para o formulário que você pode vincular.

Com qualquer um dos métodos, as alterações feitas no formulário serão atualizadas automaticamente no formulário em tempo real no site externo. Você pode estilizar o formulário HubSpot incorporado no editor de formulários ou com

Antes de começar

• Se desejar definir o formulário como um formulário HTML bruto, essa opção não estará disponível no editor de formulários atualizado. Somente formulários criados usando o editor de formulários herdados podem ser definidos como HTML bruto.
• Se você estiver incorporando seu formulário HubSpot em uma página externa, instale o código de rastreamento HubSpot para rastrear análises. Saiba como instalar o código de rastreamento HubSpot. 

Estilizar seu formulário 

Personalize o texto, os campos de entrada, o botão e o plano de fundo do formulário e das etapas do formulário. Opções de estilo configuradas no Estilo global serã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. Você pode personalizar o estilo dos seguintes componentes de formulário:
   • 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. 

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

Você pode incorporar seu formulário HubSpot à sua página externa copiando o código de inserção de formulário e colando-o na 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 acessar 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.

Usar o link de compartilhamento para compartilhar uma página de formulário independente 

Você pode compartilhar seu formulário com o link de compartilhamento, que exibirá o formulário em uma página da Web autônoma. Este link de compartilhamento não pode ser oculto nem tornado privado. Qualquer pessoa com o link de compartilhamento poderá acessar o formulário. 

Para acessar 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 Web da página de formulário para a área de transferência.
7. 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 o URL da página de formulário diretamente com outras pessoas para fornecer acesso ao formulário.

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

Os usuários de um Professional ou de um Professional podem incorporar formulários e criar estilos usando 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.