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


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
Jake Lett is a B2B marketing consultant with over 15 years of experience in the digital marketing industry. He specializes in SEO, HubSpot, and PPC campaign management. Jake has a proven track record of helping businesses increase their online visibility and drive more traffic, leads and sales. He is a Certified Google Ads Specialist and a Certified HubSpot Developer.

Topic:

Related posts

Tags: , , ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter