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

SOLVE
Highlighted
Occasional Contributor

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.

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Regular Advisor

Hi @Genn_Alas ,

 

Add this code in yout css file:

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

 

Look this print:

code.PNG 

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

Best regards! 🙂

5 Replies 5
Highlighted
Regular Advisor

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?

Reply
0 Upvotes
Highlighted
Occasional Contributor

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 editingFont showed in editing.                   Font which shows when publishedFont 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.  

 

 

Reply
0 Upvotes
Highlighted
Regular Advisor

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?

 

🙂

 

 

 

 

Reply
0 Upvotes
Highlighted
Occasional Contributor

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 

Reply
0 Upvotes
Highlighted
Regular Advisor

Hi @Genn_Alas ,

 

Add this code in yout css file:

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

 

Look this print:

code.PNG 

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

Best regards! 🙂