- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Form Styling on Wordpress Site
SOLVEAug 1, 2017 5:45 PM
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;
}
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
Accepted Solutions
Aug 3, 2017 4:39 PM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content