Lead Capture Tools

vrneuman
HubSpot Employee
HubSpot Employee

Center a form on a HubSpot template

You can center a form on a HubSpot template using horizontal spacer modules or custom CSS.

 

Using horizontal spacer modules

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • Click the template name in the finder to edit.
  • In the inspector on the right, click Add to insert two new horizontal spacer modules; one to the left and one to the right of your form module.

Using custom CSS

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • In the finder, locate your CSS file within the folders, then click it to select it in the editor.
  • Add the following code to center all of your forms across your website:
/* To center the form within its module and applying a max-width */
form.hs-form,
.hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* To center the form title within a form module */
.hs_cos_wrapper .form-title {
text-align: center;
}

/* To center the form submit button */
.hs_submit {
    text-align: center;
}
  • If you want to center specific forms, you can add a custom class to your form module on your template and then adjust your CSS to only apply to modules with that class. For example, if you add the custom class center-form to your form module on your template, your CSS would look like this:
/* To center the form within its module and applying a max-width */
form.hs-form,
.center-form .hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* To center the form title within a form module */
.center-form .hs_cos_wrapper .form-title {
text-align: center;
}

/* To center the form submit button */
.center-form .hs_submit {
    text-align: center;
}
  • In the upper right, click Publish changes.
1 Reply 1
TiphaineCuisset
Community Manager
Community Manager

Center a form on a HubSpot template

Thank you for sharing @vrneuman !


Saviez vous que la Communauté est disponible en français?
Rejoignez les discussions francophones en changeant votre langue dans les paramètres !

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Upvotes