CMS-General

How do I center a form on a HubSpot template?

Last updated: May 31, 2018

Applies to:

Marketing Hub
marketing-basic-pro-enterprise
Basic, Professional, Enterprise

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.
center-a-form

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'd only like 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;
}
  • Click Publish changes or at the upper right to take your changes live.

Was this article helpful?

If you still need help you can get answers from the , or to contact support.