How to change background colour of form on Landing Page

[KPhilippou]

Hi there!

I am creating a landing page with a form and wasn't sure how to change the background colour of the form itself. I can change the colour behind the form but not the box itself. Does anyone know how to do this in the WYSIWYG Editor?

Many thanks in advance,

Katrina 

[JDavis08]

I had the same problem but found a solution.

Head to 'design' on your landing page and there's an option to 'edit theme settings'. 

Click 'more settings' and under 'forms' you can then set the colours for each part of your form; title, background, fields, labels etc.

[BrookeDruyven]

Thankyou so much! I never would've found it myself! 🙂

[JWhittaker]

Same issue here, too! I'll call their tech team and post an update.

[JWhittaker]

I spoke with tech support.

When I would insert the form onto the page in editor it would come up with a grey background. After saving the changes and refreshing, the form background would show up correctly, matching the background of the theme colour I was using. 

I think it's a bug that makes the form look grey in the editor, but actually saves the right colour once updated.

Note: I used the HubSpot plugin to get a shortcode as embedding code as HTML wouldn't work for me.

[LCoucheron]

I spoke with support yesterday after struggling with this and they shared the solution. The background color of the form is coming from the landing page theme you are using. So you have to change the color from the theme. 

Unfortunately, I do not know where to find the settings for the theme myself - I only found it because they shared a link with me to the theme that I was using. But perhaps you guys know where to find this 🙂

[JGood]

I'm having the same issue. I have the right service level to customize the form styling but I'm not a coder. Surely there is a way to change the background. Does everyone using hubspot forms on landing pages that isn't a coder use the same background color?!  Can't be.  Everything else has a WYSIWYG editor.  Let me know if you know of another way.

[LCoucheron]

I have the same issue!

[Jake_Lett · Accepted solution]

If you are using professional or enterprise you can customize the form styling. Try adding this to the HEAD of your landing page.

<style>
.hbspt-form {
background-color: red;
padding:1rem;
}
</style>

[SujithKolaprath]

This is not a feasible solution because:

- The form url is hosted in Hubspot and not on the client's landing page

- Any css applied will only impact client's landing page not form as the form url is hosted on hubspot

This is such a basic change and hubspot shouldn't enforce thier branding