Form Styling on Wordpress Site

SOLVE
moha
Member

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;

}

 

 

 

0 Upvotes
1 Accepted solution

Accepted Solutions
Josh
Solution
Recognized Expert | Platinum Partner

@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




Did this post help solve your problem? If so, please mark it as a solution.

Josh Curcio

HubSpot support and inbound marketing for OEMs, contract manufacturers, and industrial suppliers.
HubSpot Platinum Partner & HubSpot Certified Trainer

View solution in original post

0 Upvotes
3 Replies 3
Josh
Solution
Recognized Expert | Platinum Partner

@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




Did this post help solve your problem? If so, please mark it as a solution.

Josh Curcio

HubSpot support and inbound marketing for OEMs, contract manufacturers, and industrial suppliers.
HubSpot Platinum Partner & HubSpot Certified Trainer

View solution in original post

0 Upvotes
moha
Member

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

 

 

 

 

0 Upvotes
Josh
Recognized Expert | Platinum Partner

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!




Did this post help solve your problem? If so, please mark it as a solution.

Josh Curcio

HubSpot support and inbound marketing for OEMs, contract manufacturers, and industrial suppliers.
HubSpot Platinum Partner & HubSpot Certified Trainer

0 Upvotes