Formulários do HubSpot

Use os formulários da HubSpot para capturar informações de usuários do site, que você pode acessar em todo o HubSpot. Você pode compartilhar links para formulários diretamente com os usuários, enviar dados de formulário por meio da API e incorporá-los às páginas do site usando o CMS.

Os formulários são uma parte essencial da HubSpot e podem ser criados em contas da HubSpot de qualquer nível de assinatura. Os formulários não são importantes apenas para a conversão do cliente, mas também porque os dados do formulário podem ser usados em outras ferramentas e ativos da HubSpot, como conteúdo inteligente, listas, fluxos de trabalho, personalização de conteúdo e muito mais.

Para adicionar um módulo de formulário a um modelo fora de uma área de arrastar e soltar, faça referência a ele como um module padrão. 

Com qualquer implementação, você pode adicionar parâmetros à tag do módulo para especificar configurações, como o formulário a ser usado e as opções de redirecionamento, conforme mostrado no exemplo de código acima. Consulte a documentação dos módulos padrão para obter mais informações sobre os parâmetros disponíveis.

Clone do módulo padrão

Além de usar o módulo padrão como está, você pode cloná-lo para torná-lo editável, permitindo personalizá-lo conforme necessário. Por exemplo, você poderia clonar o módulo de formulário padrão, adicionar um campo de cor e agrupar o HTML do módulo em uma tag <section> com estilo para adicionar a cor como plano de fundo:

• No gerenciador de design da barra lateral esquerda, acesse a pasta @hubspot, clique com o botão direito em form.module e selecione Clonar módulo.

• Na barra lateral direita, clique em Adicionar campo e, em seguida, selecione Cor.
• Adicione uma tag <section> em torno do conteúdo HTML e, em seguida, inclua o estilo para fazer referência ao campo de cor, como:

<section style="background:">

Ao criar um módulo personalizado, você pode incluir um formulário nele adicionando um campo de formulário, além de adicionar o snippet de código do campo ao HTML do módulo. Por exemplo, você pode adicionar um formulário de solicitação de consulta a um módulo que contenha uma imagem de um produto e uma proposta de valor descritiva.

Para adicionar um campo de formulário a um módulo personalizado com o gerenciador de design:

• Na barra lateral direita do editor de módulos, clique em Adicionar campo, em seguida, selecione Formulário.

• Depois de adicionar o campo, passe o cursor do mouse sobre o campo na barra lateral direita, em seguida, clique em Ações e selecione Copiar snippet.

• Cole o snippet no campo de HTML do módulo.

Depois de adicionado a uma página, os criadores de conteúdo normalmente têm controle sobre muitos aspectos do formulário, incluindo qual formulário usar e os próprios campos do formulário. No entanto, você pode limitar o controle fornecido no editor de páginas, modificando o arquivo fields.json do módulo de formulário localmente para incluir os seguintes campos:

Por exemplo, caso tenha criado um módulo que deve ser usado apenas para formulários que permitem aos visitantes entrar em contato com os vários departamentos de serviços da sua empresa, você pode permitir que os criadores de conteúdo selecionem apenas os formulários que usam propriedades de tickets.

Embora o HubSpot ofereça estilos de formulário de uma configuração global e nível de configuração específico de formulário, você também pode definir estilos a um formulário dependendo de como ele é adicionado às suas páginas do CMS.

Os formulários da HubSpot adicionados às páginas da HubSpot podem ser estilizados usando o CSS do seu site. A HubSpot inclui várias classes e atributos diferentes em formulários gerados nos quais você pode aplicar estilo. Como ponto de partida, consulte o CSS de formulário no Boilerplate da HubSpot, que representa as práticas recomendadas para definir estilos aos formulários.

Os formulários dentro dos módulos personalizados podem ser estilizados por CSS no painel de CSS do módulo no gerenciador de design. Ao manter o escopo do CSS no módulo, você pode garantir que, sempre que o módulo for adicionado a uma página, o estilo virá com ele. É recomendável adicionar um wrapper ao formulário e usá-lo como seletor de nível superior para o CSS. Assim, o estilo de formulário do módulo personalizado não será substituído por estilos adicionais na folha de estilo principal do site. Veja a seguir uma captura de tela do módulo personalizado mencionado acima com o estilo de formulário adicionado ao Painel CSS.

Estilizar os formulários adicionados por meio do código de incorporação de formulários

Ao usar o código de incorporação de formulários, você pode estilizar o formulário usando as configurações globais de estilo de formulário ou usando o CSS do seu site.

O uso das configurações globais de estilo de formulário permite definir configurações padrão para cada formulário na conta. Você também pode substituir esses estilos em um formulário individual dentro do editor de formulários.

Se você tiver uma assinatura do Marketing Hub ou do CMS Hub Professional ou Enterprise, poderá selecionar a opção Definir como formulário HTML bruto ao criar um formulário. Essa configuração renderiza o formulário como HTML em vez de iframe, o que facilita estilizar o formulário incorporado com CSS. 

Saiba mais sobre como estilizar formulários incorporados na Central de Conhecimento.