Skip to main content

Hey guys, when it comes to HubSpot, the styling of embedded forms can be quite frustrating.
Check out this sweet little hack that will make styling your HubSpot form a lot easier.  

Follow these 4 simple steps to transform your form 😉 

  • Log into HubSpot Design Manager. 
  • Navigate to the CSS file or CSS area of the form module. 
  • Paste the following code: 

.hs-input {
padding: .25rem 0 !important;
border: 0 !important;
border-bottom: 2px solid #F6A630 !important;
outline: 0 !important;
background: transparent !important;
color: #000 !important;
font-size: 1rem !important;
line-height: 3rem !important;
letter-spacing: .125rem !important;
margin-bottom: 35px;
width: 100%!important;
transition: all .5s cubic-bezier(.4,.25,.8,.3) !important;
}

  • Publish.

And there you have it! Form and function.
Keep an eye out as we will be sharing more of these useful hacks and tips in the near future.