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

Get a Free HubSpot CMS Guide
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;
}

 


Related resources

  • HubSpot CMS vs WordPress: Feature Comparison and Review
  • 25+ Questions to Ask Before Redesigning Your Business Website
  • 5 Things A Business Should Consider Before a Website Redesign
  • How to Get a Responsive Website for Your Manufacturing Company
  • What Is a Good WordPress Alternative for Businesses?
  • Tags: , , ,

    Want to Get Email Updates of New Posts? Join My Email Newsletter