# Custom Form Module

**URL:** <https://community.hubspot.com/t/custom-form-module/96603>\
**Category:** CMS Development\
**Created:** [December 21, 2023, 11:58am UTC](https://community.hubspot.com/t/custom-form-module/96603 "2023-12-21T11:58:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![SWhitworthP3](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@SWhitworthP3](https://community.hubspot.com/u/SWhitworthP3)\
**Post date:** [December 21, 2023, 11:58am UTC](https://community.hubspot.com/t/custom-form-module/96603/1 "2023-12-21T11:58:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [December 21, 2023, 7:25pm UTC](https://community.hubspot.com/t/custom-form-module/96603/2 "2023-12-21T19:25:12Z")

</div>

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

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

```lia-code-sample
<div class="form-container">
 <!-- Your HubSpot Form -->
</div>

```

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

```lia-code-sample
.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