Ultima atualização: Junho 28, 2023
Disponível com qualquer uma das seguintes assinaturas, salvo menção ao contrário:
Todos os produtos e planos
|
Você pode estilizar o formulário do HubSpot incorporado em suas páginas externas de duas maneiras:
- Estilizar seu formulário incorporado no editor de formulários
- 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 independentes. Os 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.
- Após incorporar o formulário, você pode estilizá-lo em sua folha de estilos externa com CSS. Saiba mais sobre como estilizar os formulários do HubSpot com seletores de atributos padrão na documentação de designers da HubSpot.
- 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.
