Você pode centralizar um formulário em um modelo do HubSpot usando módulos espaçadores horizontais ou CSS personalizado.
Usando módulos espaçadores horizontais
- Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
- Clique no nome do modelo no localizador para editar.
- No inspetor à direita, clique em + Add ao inserir dois novos módulos de espaçador horizontais, um para a esquerda e um para a direita do módulo de formulário.
Usando CSS personalizado
- Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
- No localizador, lcalize seu arquivo CSS dentro das pastas, em seguida, clique para selecioná-lo no editor.
- Adicione o seguinte código ao centro de todos os formulários no site:
/* Para centralizar o formulário dentro do seu módulo e aplicar uma largura máxima */
form.hs-form,
.hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}
/* Para centralizar um título de formulário dentro de um módulo de formulário */
.hs_cos_wrapper .form-title {
text-align: center;
}
/* Para centralizar um botão de envio de formulário */
.hs_submit {
text-align: center;
}
- Se você quiser centralizar os formulários específicos, pode adicionar uma classe personalizada ao seu módulo de formulário em seu modelo e, em seguida, ajuste seu CSS para aplicar somente aos módulos com essa classe. Por exemplo, se você adicionar a classe personalizada center-form ao seu módulo de formulário em seu modelo, seu CSS ficaria assim:
/* Para centralizar o formulário em seu módulo e aplicar uma largura máxima */
form.hs-form,
.center-form .hs_cos_wrapper .form-title{
max-width: 600px;
display: block;
margin: 0 auto;
}
/* Para centralizar o título de formulário dentro de um módulo de formulário */
.center-form .hs_cos_wrapper .form-title {
text-align: center;
}
/* Para centralizar o botão de envio de formulário */
.center-form .hs_submit {
text-align: center;
}
- No canto superior direito, clique em Publicar mudanças.