Última modificação: 10 de outubro 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:
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 %}
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"
}
%}
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:{{ module.color_field.color }}">
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:
| Parâmetro | Tipo | Descrição |
|---|
disable_inline_form_editing | String | Defina 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_types | Matriz | Uma 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". |
// 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."
}
}
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.
<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âmetro | Tipo | Descrição |
|---|
portalId | Número ou string | O ID da conta da HubSpot na qual o formulário foi criado. Isso é usado para recuperar a definição do formulário. |
formId | String | O ID do formulário, que é usado para recuperar a definição do formulário. |
region | String | A 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!',
},
},
},
});
// 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}');
}
});
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.
