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.

Leave a Reply