Pop-Up Form Custom Styling

[ATA-Daniel]

Hello everyone,

I have a pop-up form using the HubSpot pop-up form tool throughout our website: https://cos-bond.com/

The pop-up appears on exit intent.

The blog is in HubSpot, but the main website is not (it's in SANA and i don't have access to the CSS of the main website).

As mentioned in the topic, I want to change the style of this form. I understand that i need to target the appropriate ID (which appears to be leadinModal-777284 in this case), but since the style appears to load inline (on each page) i had no idea how to do this. That is, i can't change it on the pages of the main website as I don't have access to the page CSS and i'd rather not have to go through every blog post and at it to the head for each of those. Any help on this would be appreciated.

Thank you

[Jake_Lett]

I know you mentioned you don't have access to the CSS styles. But for anyone finding this post, I wrote a post on how to customize the pop up form styles if you do have access to the CSS.

https://bootstrapcreative.com/how-do-you-change-the-styling-of-a-hubspot-pop-up-form/

[KWynn]

Hubspot's pop-ups are VERY weak. Beyond being able to bold, italic, underline or align text - you can't edit the formatting at all. You're stuck with the same grey background. You can't access the HTML or add stying with CSS. I was hoping Hubspot will allow us to stop using Optin Monster, but there is no way I can put these Hubspot popups on our website. I have to renew my Optin Monster subsription 😐

[JLadwig]

Yes. I agree. Popup forms should be very customizable. They look very bad in their naitive format.  

[PamCotton]

Hello @JLadwig 

To Customize your pop-out form, click on the Form tab in your pop-up.

• Form body: (optional) add body text to elaborate on the value you're providing with your pop-up form.
• Added fields: the default Email field is automatically included.
  To add additional fields to the form, click + Add another form field.
• Pop-up forms support the following field types: single-line text, multi-line text, dropdown select, single checkbox, number, date picker, and file.
• A maximum of four fields can be added to the form.To customize the way a form field appears to visitors, click the pencil icon edit to edit the field label, add placeholder text, or enter a default value. For the Email field, you can specify email addresses and domains to block.
• Form button text: the form button text from the Callout tab will automatically carry over into this field. To make any changes to the button text on the form step, update it here.
• Notice and consent / legitimate interest (GDPR): if you have GDPR enabled in your HubSpot account, you can set the notice and consent option for this pop-up form. To customize the default text, click the pencil icon edit.
• Language: set the form language. This will change the form field labels, Notice and consent/legitimate interest message, and error messages displayed on the form. All other editable fields will need to be translated manually.
• Set lifecycle stage: choose the lifecycle stage contacts who submit the pop-up form will have. This is set to Lead by default.
• CAPTCHA: enable CAPTCHA to provide additional protection against spam submissions

You can find all these steps in this article here.

I hope this information helps.

Pam

[asbahs]

It sounds like your answer is not about this issue. Form tab is inactive when you are creating a pop-up form. There is a callout tab active only with super poor editing possibilities. You can't edit Callout text (or header) color, you can't edit button text color, can't edit button shape, size or location. No option to upload your own background image etc. 

[PamCotton]

Hello, @asbahs thank you for the extra information provided. You should be able to change the font on the pop-up, but it would require help from an external website designer as they would need to add the code to your CSS.  @DanielSanchez our Community Champion explained more about it here.

Kindly,

Pam  

[asbahs]

Hi Pam,
Fonts are the smallest problem but thank you for the answer.

[PamCotton]

Hello @asbahs, 

I would highly recommend you to please post this idea at our ideas forum (here).

Our product team, who monitors the forum regularly, can read your specific use case and understand why this would be a useful functionality or change. It also helps other customers facing the same issue to advocate for its implementation on your behalf by upvoting on the thread as well.

Thank you,

Pam

[gil1002]

Totally agree, the pop-ups look very poor and need some more ability to control its look, the size of the picture vs the text etc.

[PamCotton]

Hey @ATA-Daniel 

I apologize for the delay in answering this post, were you able to find the answer for it?

If not, at the moment as you can see in our Knowledge base article: Pop-up forms and non-HubSpot forms FAQ  it is not recommended to add your own style to these forms. However if you were to add your own style you would need to create a custom-coded solution for this.

I hope this helps,

Kindly,

Pam