Forms Design Custom

[ClaudiaOliveira]

Hello HubSpot Developer Community,

I'm working on integrating a HubSpot form into our website (Strapi), and while the embedding process went smoothly, I've encountered a few styling challenges that the standard HubSpot form styles and options don't quite address. I’m hoping to get some guidance or CSS hacks that could help me customize the appearance of this embedded form to better match our site's design.

Here are the specific customizations I’m looking to implement:

1. Remove Shadow: The default form comes with a shadow effect. I need to remove this to fit our flat design aesthetic better.

2. Round Corners: Our design language uses rounded corners, and I'd like the form inputs and the form itself to reflect this with a specific radius.

3. Background Color Match: The form's background is currently blue, which clashes with our site's grey background. I need to match the form's background color with the website's to ensure visual coherence.

4. Remove Extra Bottom Space: After embedding the form, there's a noticeable large space below it that doesn't align with our layout. I need a way to eliminate this extra padding or margin.

   
   I’m looking for any advice, CSS snippets, or alternative approaches that could help me address these styling issues without breaking the form's functionality or responsiveness.

   Thank you in advance for your help and suggestions!

   
   See image:

   

[Randy-John]

Impressive and informative post

[Jnix284 · Accepted solution]

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.

[alyssamwilie]

Hi @ClaudiaOliveira ,

By default embedded HubSpot forms are added to the page in an iFrame and due to the nature of iFrames this makes it impossible to style the content within. In this case the only styling options would be that provided by HubSpot.

If you have Marketing Hub/CMS Hub Professional or Enterprise though this opens up the option to either modify the embed code to add additional styling or turn on a setting to set the form as a raw HTML form instead of an iFrame which will allow your external stylesheets to effect the form.