COS-General

How do I center a form on a HubSpot template?

Last updated: November 9, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A
Service: N/A

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

Using horizontal spacer modules

  • In your HubSpot Marketing Basic, Professional, or Enterprise account, navigate to Content > Design Manager.
  • Click the template name to edit.
  • Click Add row to add a new module to the left and right of your form module.
  • Within the newly added modules, click the Gear Icon, and select Swap Module to swap the newly added Rich Text module for a Horizontal Spacer module.
User-added image

Using custom CSS

  • In your HubSpot Marketing BasicProfessional, or Enterprise account, navigate to Content Design Manager.
  • In the left sidebar menu, click Coded Files.
  • Locate your template CSS file within the folders, then click it to edit.
  • 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 or at the upper right to take your changes live.

Was this article helpful?