Easily build and embed forms on your site. Try HubSpot Forms for free.  
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

Estilizar o formulário incorporado em páginas externas

Ultima atualização: Outubro 31, 2019

Você pode estilizar o formulário do HubSpot incorporado em suas páginas externas de duas maneiras:

  1. Estilizar seu formulário incorporado no editor de formulários
  2. Estilizar seu formulário incorporado com CSS na folha de estilos externa

 

Estilizar seu formulário incorporado 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, navegue até Marketing > Captura de leads > Formulários.
  • Clique no nome de um contato.
  • No editor de formulários, clique na guia Estilo e visualização.
  • No painel esquerdo, na seção de Tema, desmarque a caixa de seleção Manter tema antigo.

Observação: desmarcar a caixa de seleção Manter tema antigo removerá o estilo padrão antigo do HubSpot aplicado ao formulário. Qualquer CSS ou JavaScript personalizado adicionado ao formulário deixará funcionará.

  • Selecione um dos quatro temas.

 

Estilo (somente para Marketing Hub Starter, Basic, Professional e Enterprise)

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

  • Na sua conta da HubSpot, navegue até Marketing > Captura de leads > Formulários.
  • Clique no nome de um formulário.
  • No editor de formulários, 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 independentesOs formulários nas suas páginas do HubSpot podem ser estilizados apenas com opções de estilo de módulo de formulário no editor de conteúdo.

 

Estilizar seu formulário incorporado com CSS na folha de estilos externa (somente para HubSpot Marketing Basic, Professional e Enterprise)

  • Na sua conta da HubSpot, navegue até Marketing > Captura de leads > Formulários.
  • Clique no nome  do formulário.
  • No editor de formulário, clique na guia Opções.
  • Clique no botão para ativar o Formulário sem estilo. 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.
New Call-to-action