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.