Custom Form Module

Developer Support CMS Development
1

Hi everyone

I’m trying to centre a from on a HTML & HubL page. I was using the default form.module but could not get this to appear centred on mobile & desktop.

So, I cloned the default module and added some custom CSS:

/* 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;
}

This successfully centres the form BUT it loses all the styling and I also don’t have the option to style the form in in the Hubspot page editor itself anymore.

My HTML / CSS knowledge is pretty entry level so if there’s a straightforward solution then I am here for it! Thank you

2

Hey, @SWhitworthP3 :waving_hand: Beginner questions and learning new things are 100% welcome here!

Have you tried wrapping your form in a div? Like this?

<div class="form-container">
 <!-- Your HubSpot Form -->
</div>

Then styling the .form-container class to get it centered?

.form-container {
 display: flex;
 justify-content: center;
 align-items: center;
 max-width: 600px;
 margin: 0 auto;
}

If it’s still now working as expected, try viewing your page using the Chrome Developer tools to look for conflicting CSS that might be overriding what you’ve tried. On a personal note, I love CS, but it’s often so frustrating.

Best,

Jaycee