Form Styling on Wordpress Site

[moha]

I have created a form on Hubspot which I want to embed on my external Wordpress website. I also want to stylize some of the elements(such as the button). I followed the exact steps on the Hubspot Forms styling page, removing the hubspot styling, and adding the selectors with the CSS onto our stylesheet. However, the hubspot form didn't style according to the specific CSS(code below), and instead is taking on the general CSS of our website. Any idea on how to fix this so that the forms from hubspot get stylized to what I want? Below is the CSS code I inputed onto our stylesheet. 

.hs-form,
.hs-form input,
.hs-form input[type="email”],
.hs-form input[type="number"],
.hs-form textarea {
display: block;
margin: 0 0 6px 0 !important;
background: #f6f6f6;
text-transform: uppercase;
font-weight: bold;
color: #3d485b !important;
border: none !important;
border-radius: 0 !important;
height: 60px;
line-height: 60px;
padding: 0px 30px 0px 80px !important;
font-size: 13px;
width: 100%;
box-shadow: none !important;
}

.hs-form .hs-button.primary,
.hs-form input[type="submit"] {
margin: 0 !important;
background: #3D485B !important;
text-transform: uppercase !important;
font-weight: bold !important;
color: #ffffff !important;
border: none !important;
border-radius: 0 !important;
height: 60px !important;
line-height: 60px !important;
padding: 0px 30px !important;
font-size: 13px !important;
display: block !important;
width: 100% !important;
display: inline-block;
position: relative;
}

.hs-form input[type="email”] {
width: 100%;
margin-bottom:18px !important;
max-width: 800px;
background size:60px 60px;

}
.hs-form textarea {
width: 100%;
margin-bottom:18px !important;
max-width: 800px;
background size:60px 60px;

}
.hs-form input[type="number"] {
width: 100%;
margin-bottom:18px !important;
max-width: 800px;
background size:60px 60px;

}

[Josh · Accepted solution]

@moha,

I've seen different things for different scenarios. It comes down to the theme, where you're adding the CSS items, etc. Also, if you cache heavily, the changes might be there, but you won't see them until a full cache purge.

Additionally with some themes, I've had to add !important to almost every declaration.

As next steps, I'd make sure that these new CSS items are loading after all of your theme CSS. I'd try adding !important to a couple more items...see if that takes (I try color first). Also, please purge all caches.

If you'd want to hop on a screenshare tomorrow at some point, I'd be happy to troubleshoot a bit with you. https://app.hubspot.com/meetings/joshc15

[moha]

Hi Josh,

Thanks for your help. I ended up finding a fix for this issue--a combination of clearing my cache and removing(not adding, funnily enough) !important after some elements did the trick. 

Thanks again,

Moha

[Josh]

Hi @moha,

Excellent. Happy you got that straightened out. WordPress sure can be a funny thing sometimes. 😉

Any other questions you have, please feel free to reach out!