Overwriting Form CSS

Develop, Build & Integrate CMS Development
1

Hi All,
I feel like this should be an easy and simple fix but I’ve had no luck overwriting the padding around this button on a form.
URL: https://info.comporium.com/business-expansion-phase-4-charlotte
Code I added to the page in the <head> but had no luck getting it to overwrite.
.form-container .hs_submit .hs-button {
margin-top: 0px!important;
margin-bottom: 0px!important;
padding: 0px!important;
}

Screen Shot 2020-04-08 at 11.42.02 AM.png
Screen Shot 2020-04-08 at 11.42.02 AM.png1276×1270 312 KB

Appreciate your thoughts!

2

Hi Christina,

Try this CSS

.hs-form-fef1d6cd-eda0-4be3-ad57-b193851bf810_67ea71a7-ba88-4c66-b509-448df8c4fc4d .hs-submit > .actions {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}

I think your issue is your CSS is targeting the wrong element.

Let me know if this helps,

Thanks,
David

3

I added the code but it didn’t overwrite. I also tried adding !important to the css and still nothing. Do you have any other thoughts?

4

@christinacschne if you are using the iframe embed, you will not be able to override the styles from outside of the iframe. I believe you can edit the form and click on “Style & preview” tab then turn on the “Set as raw HTML form” toggle and it should now let you style it with CSS as it will no longer display in an iFrame.

5

Ah, got it! Thank you.
I didn’t understand the embedding the iframe won’t allow for overriding styles. Thanks. I will edit the raw HTML form them.

6

It would make everyones lives a lot easier if the button could be more customizeable. Do you have a link to all of the preset style CSS fields somewhere so we don’t have to start from scratch on the RAW HTML.