Forms Design Custom

Hi @ClaudiaOliveira happy to help with updating the styling of the HubSpot form with a little CSS.

You’ll need to add this CSS to the individual page head HTML or the site head HTML depending on what you have access to, it needs to be contained in style tags unless your interface does that for you.

1 - the first code snippet for container.loaded removes the box shadow

2 - the second code snippet for hs-form_theme-round has the default border-radius of 15px, change this to your brand preferred border radius

3 - the hs-form field input snippet has three colors, I left all three so you can modify for your brand colors.

color = the text color of the input

background-color = the field color that is the blue you want to change

border = the color of the field outline

<style>
.container.loaded {
 box-shadow: none;
}
.hs-form_theme-round .hs-form__field__input {
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
}
.hs-form__field__input {
 color: #33475b;
 background-color: #f5f8fa;
 border: 1px solid #959494;
}
</style>

The extra margin below isn’t coming from the HubSpot form code, it looks like it’s coming from the grid that it’s contained in.

I would check the settings directly in the module/grid before overwriting with CSS.