¿Cómo centrar un formulario en una plantilla de HubSpot?

[vrneuman]

Puedes centrar un formulario en una plantilla de HubSpot usando módulos de espaciador horizontales o CSS personalizados.

Usar módulos de espaciador horizontales

• En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
• Haz clic en el nombre de la plantilla en el visor para editar.
• En el inspector de la derecha, haz clic en + Agregar para insertar dos módulos de separador horizontales, uno a la izquierda y uno hacia la derecha del módulo de formulario.

Uso de CSS personalizadas

• En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
• En el buscador, busca el archivo CSS dentro de las carpetas y luego haz clic en él para seleccionarlo en el editor.
• Agrega el siguiente código para centrar todos tus formularios en tu sitio web:

/*Para centrar el formulario en su módulo y aplicar un ancho máximo */ 
form.hs-form,
.hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/*para centrar el título del formulario dentro de un módulo de formulario */
.hs_cos_wrapper .form-title {
text-align: center;
}

/*para centrar el botón de envío del formulario */
.hs_submit {
    text-align: center;
}

• Si solo deseas centrar formularios específicos, puedes agregar una clase personalizada a tu módulo de formulario en tu plantilla y luego ajustar tu CSS para aplicar solo a los módulos con esa clase. Por ejemplo, si agregas el formulario de clase personalizado center-form a tu módulo de formulario en tu plantilla, tu CSS se verá como lo siguiente:

/*Para centrar el formulario en su módulo y aplicar un ancho máximo */
form.hs-form,
.center-form .hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/*para centrar el título del formulario dentro de un módulo de formulario */
.center-form .hs_cos_wrapper .form-title {
text-align: center;
}

/*para centrar el botón de envío del formulario */
.center-form .hs_submit {
    text-align: center;
}

• En la parte superior derecha, haz clic en Publicar cambios.