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

After

How to update

• Add the styles to your global CSS stylesheet
• Or add them in a style tag in your global site settings

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;
}