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

[Genn_Alas]

I'm building off what someone posted before because it doesn't look like it's received any responses recently.  I'm having some difficulty figuring out how to change the styling of a pop-up form that appears on my HubSpot pages. 

When I created the form, the font looks to be Arial but then when it goes live it looks like Times New Roman. How can I change the font? I would prefer it to show up as neither and use our corporate branding of Muli.

[DanielSanchez]

Hi @Genn_Alas , Yes, we can change the CSS to change a font or other styling. You can send me a link to your page that I return with the CSS to be changed / inserted in your file?

🙂

[Genn_Alas]

Hi @DanielSanchez,

This is awesome news! Here is the link - please let me know if you need anything else from me. https://blog.qotient.com/blog 

[DanielSanchez · Accepted solution]

Hi @Genn_Alas ,

Add this code in yout css file:

.leadinModal-content {
    font-family: Muli,sans-serif;
}

Look this print:

 

Did this post help solve your problem? If so, please mark it as a solution.

Best regards! 🙂

[sriharsha]

Hi Daniel,

Currently we are having Non hubspot URL and trying to use non hubspot form of dropdown banner (Hubspot tracking is enabled on the site) . But not able to change the fontstyle in callout section.

Can you pleas help on it. Will the above code works for nonhubspot URL?

[Ben_M]

Unfortunately Hubspot popup forms are not highly customizable. But I have not seen where a font changes to something else online. Can you post a screenshot of the font family you are selecting and a link to a page to see a test where the font is different?

[Genn_Alas]

Hi @Ben_M, 

When talking with someone from HubSpot Support, she said I might be able to change the CSS and told me to contact the person who designed our website. Unfortunately, that was pre-my time with my company, and we've lost contact and the person who was in communication with the firm. 

With pop-ups, you can't select a font, so I would assume it's just the generic. However, you can see from the photo below that the ones you see when editing the pop-up and the one that shows up on your page when published are not the same.

Font showed in editing.                   Font which shows when published

What's the best way to accomplish this? Should I add a custom class to the style sheet that is applied to the pages where the pop-up form appears?

On an older blog @naddy23nair responded with, "Please provide the browser URL of the Landing page so I can send you the CSS code to update the button." but I'm not sure if this fixed the other users' issue.