Form inputs overlap on RAW HTML input

[KevinHayesCA]

My input fields that are side by side, overlap.

Also, my button at the bottom is off, but I think I can fix that.

Any help?

[Mike_Eastwood · Accepted solution]

Hi @KevinHayesCA 

Looks to me like the Raw HTML Output isn't using the default HubSpot CSS and/or your site's CSS is overwriting the Form CSS.

How geeky are you?

Fixing the CSS isn't hard, but if you're not geeky then that's like saying "learning a few Latin phrases is easy".

If you, or your team, are fixing the CSS make sure you throw some errors in the form (e.g. don't enter first name) so you can see all the error CSS rules.

Have fun

Mike

[KevinHayesCA]

Hey Mike!

I am fairly geeky and can mess around with CSS. So, don't hold back. I did do some custom CSS stuff to get the form fitting our style. But, I think I hit a ceiling.

Can you guide me on what to update on the CSS here?

[Mike_Eastwood]

Excellent Kevin,

Somewhere in the docs I've seen a list of CSS that the forms use... but I can't find it now...

So, what I'd do is go into Design Manager and find the main.css file in your theme. Then in there you will see a link to include _forms.css (or something similar). 

The forms.css file will have everything you need to consider if you are restyling the forms on a different site.

Have fun

Mike