How do you change the styling of a HubSpot pop up form?

Get FREE HubSpot Tutorial for Beginners PDF
How do you change the styling of a HubSpot pop up form?

I recently tried adding a HubSpot popup form but I noticed I didn’t like the styles. It wasn’t exactly what I was looking for. The form admin does not provide extensive customization options, but if you are comfortable adding CSS styles you can adjust the popup to fit your needs.

Below are the changes I wanted to make.

  • Larger featured image that could bleed off the bottom edge
  • Larger and colored title text to
  • Larger body text to increase readability
  • A button that looks less like a horizontal bar
  • White background instead of light gray to increase contrast

Before

hubspot pop up form before

After

hubspot pop up form after

How to update

Need help with the implementation? Or need something more customized?

Contact me.

/* popup background color */
body .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadinModal-content {
    background-color: #fff;
}
/* pop up padding less space on left edge */
body .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadin-content-body #leadin-content-form-wrapper, body .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadin-content-body .leadin-preview-wrapper {
    padding: 3em 3.5em 3em 1em;
}
/* headline text */
body .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview h4 {
    color: #3288e6;
    line-height: 1.1;
    font-size: 23px;
}
/* body text */
body .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview p {
    line-height: 1.2;
    font-size: 18px;
}
/* featured image */
body .leadinModal.leadinModal-theme-default.leadinModal-v3 .dyno-image {
    width: 200px;
    margin-right: 3rem;
}
body .leadinModal .dyno-image img {
    max-width: 200px;
}
/* button */
body .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-button {
    font-weight: bold;
    padding: 2rem 3rem;
    width:auto;
}

 


Written by: Jake Lett
I share digital marketing tips and HubSpot tutorials to help marketers and business owners grow their business.

Related posts

Tags: , , ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter