Última modificação: 28 de agosto de 2025
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. Depois de criar um formulário da HubSpot, você pode adicioná-lo aos seus modelos e páginas. Existem algumas maneiras de adicionar um formulário a um modelo, dependendo do seu caso de uso:

​
O módulo de formulário padrão

Se o seu modelo tiver áreas de arrastar e soltar, os criadores de conteúdo poderão adicionar o módulo de formulário padrão a uma página usando o editor de páginas e, em seguida, configurar as opções de formulário na barra lateral esquerda. Para codificar um módulo de formulário diretamente para um modelo com áreas de arrastar e soltar, faça referência a ele como um dnd_module. 
{% dnd_area "dnd_area" class='body-container body-container__landing', label='Main section' %}
 {% dnd_section vertical_alignment='MIDDLE' %}
  {% dnd_column width=6, offset=6 %}
   {% dnd_row %}

    <!-- Form module tag for use in templates -->
    {% dnd_module path='@hubspot/form' %}
    {% end_dnd_module %}

   {% end_dnd_row %}
  {% end_dnd_column %}
 {% end_dnd_section %}
{% end_dnd_area %}
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. 
{% module "form"
 path="@hubspot/form"
 form={
  "form_id": "9e633e9f-0634-498e-917c-f01e355e83c6",
  "response_type": "redirect",
  "message": "Thanks for submitting the form.",
  "redirect_id": null,
  "redirect_url": "http://www.google.com"
 }
%}
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.
clone-form-module
  • 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:{{ module.color_field.color }}">
default-form-module-clone-section

​
Campos de formulário em módulos personalizados

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.
design-manager-select-form-field
  • 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.
module-field-copy-snippet
  • Cole o snippet no campo de HTML do módulo.
module-field-paste-snippet

​
Limitar opções de formulário no editor

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:
ParâmetroTipoDescrição
disable_inline_form_editingStringDefina a propriedade disable_inline_form_editing como true para ocultar todos os controles de edição de formulário integrados no módulo de formulário. Isso inclui os campos do formulário, o texto do botão de envio, as opções de privacidade e consentimento de dados e o CAPTCHA.
required_property_typesMatrizUma matriz que especifica quais formulários podem ser selecionados com base nos tipos de propriedade dos campos do formulário. Os valores incluem: "CONTACT", "COMPANY" e "TICKET".
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. 
// Form field
{
  "id": "843b4f0f-0ed7-5b10-e86a-5cc8a0f11a0c",
  "name": "form_field_1",
  "display_width": null,
  "label": "Form",
  "required": false,
  "locked": false,
  "type": "form",
  "disable_inline_form_editing": true,
  "required_property_types": ["TICKET"],
  "default": {
    "response_type": "inline",
    "message": "Thanks for submitting the form."
  }
}

​
Usar o código de incorporação de formulário

Quando uma tag do módulo ou do HubL não é ideal, ou se você deseja adicionar um formulário a uma página externa, você pode incorporá-lo usando o Código de incorporação do formulário. Você também pode personalizar o código de incorporação do formulário para estender a funcionalidade do formulário. Veja todas as opções de personalização do código de incorporação de formulário e muito mais no guia de referência de formulários.

​
Observação:

  • As opções de personalização de formulário estão disponíveis somente para formulários criados no HubSpot que foram definidos como HTML bruto. A conta da HubSpot deve ter uma assinatura do Marketing Hub ou Content Hub Professional ou Enterprise.
  • Formulários da HubSpot somente devem ser carregados usando o arquivo JavaScript hospedado no HubSpot. Não é possível copiar o código de incorporação do formulário e hospedá-lo por conta própria. Quaisquer melhorias que o HubSpot fizer para melhorar a segurança, a detecção de spam, a acessibilidade e o desempenho não serão propagadas para o seu formulário se você decidir hospedar por conta própria o código de incorporação do formulário do HubSpot.
Veja a seguir um exemplo de um formulário de código de incorporação sem nenhuma personalização. 
<script
  charset="utf-8"
  type="text/javascript"
  src="//js.hsforms.net/forms/embed/v2.js"
></script>
<script>
  hbspt.forms.create({
    region: 'na1',
    portalId: '123456',
    formId: 'df93f0c1-2919-44ef-9446-6a29f9a7f',
  });
</script>
ParâmetroTipoDescrição
portalIdNúmero ou stringO ID da conta da HubSpot na qual o formulário foi criado. Isso é usado para recuperar a definição do formulário.
formIdStringO ID do formulário, que é usado para recuperar a definição do formulário.
regionStringA região da conta em que o formulário foi criado. Isso é usado para recuperar a definição do formulário. Estes são os possíveis valores: na1 ou eu1.

​
Adicionar internacionalização

Por padrão, o HubSpot fornece um número de mensagens de validação em vários idiomas diferentes, que você pode acessar usando o parâmetro locale. Você também pode adicionar idiomas personalizados ou substituir as mensagens de erro e os meses/dias do seletor de data exibidos no formulário usando o parâmetro translation. Saiba mais sobre internacionalização e mensagens de erro de validação de formulários na documentação de referência de formulários. 
hbspt.forms.create({
  portalId: '',
  formId: '',
  locale: 'en',
  translations: {
    en: {
      fieldLabels: {
        email: 'Electronic mail',
      },
      required: "Hey! That's required!",
      submitText: 'Custom Submit Button Text',
      submissionErrors: {
        MISSING_REQUIRED_FIELDS: 'Please fill in all required fields!',
      },
    },
  },
});

​
Eventos de formulário

Os formulários permitem duas maneiras de vincular a funcionalidade aos eventos: retornos de chamada no código de incorporação de formulário do HubSpot e eventos de formulário globais. Saiba mais sobre os retornos de chamada de código de incorporação de formulários e os eventos de formulário globais disponíveis na documentação de referência de formulários. 
// Example form embed code callback
hbspt.forms.create({
  portalId: '',
  formId: '',
  onBeforeFormSubmit: function ($form) {
    // YOUR SCRIPT HERE
  },
});

// Example listener
window.addEventListener('message', (event) => {
  if (
    event.data.type === 'hsFormCallback' &&
    event.data.eventName === 'onFormSubmitted'
  ) {
    someAnalyticsLib('formSubmitted');
    console.log('Form Submitted! Event data: ${event.data}');
  }
});

​
Estilos do formulário

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.

​
Observação:

Todos os formulários gerados no HubSpot CMS (excluindo o uso do código de incorporação de formulário) ignorarão qualquer estilo definido por meio das configurações globais ou de nível individual do formulário.

​
Estilizar os formulários por meio do módulo de formulário padrão ou da tag HubL

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.

​
Estilizar os formulários por meio de um módulo personalizado

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.
Personalizar o módulo com CSS

​
Definir estilo personalizado para formulários incorporados

Se você tem o Marketing Hub ou CMS Hub Professional ou Enterprise, você pode usar definições de variáveis CSS para definir estilos globais, personalizar botões e outras entradas, bem como estilizar seus formulários de várias etapas e barras de progresso. Saiba mais sobre como aplicar definições CSS personalizadas a seu formulário incorporado.

​
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.
Estilos de formulários globais
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.
Definir como formulário HTML bruto