CMS Development

myangMC
Member

Hubspot Forum Not Displaying Correctly on our CMS

SOLVE
We are having some display issues with a HubSpot form with checkboxes. Essentially, the Hubspot form renders strangely most of the time, except on some occasions/refreshes it will render correctly (as pictured). When it is not rendered correctly, the elements appear out of order and out of alignment (with the checkboxes pushed further up and the single line inputs neighboring each other). We have been trying to investigate if any conflicts within our own global styles may be causing this issue, and that's in the process, or if this might be an issue with load times. However, we want to open up the possibility of seeing if the inconsistency with how these forms appear might have something to do with styles applied on the Hubspot side.Let me know if further details from our end are needed. Aalso, I'm noticing some styles in the head of the iframe are different when the form is rendered incorrectly, such as this rule:

.hbspt-form .hs-form-private{
display: flex;
align-items: center;
}

Which seems to be one of the problematic rules which, when manually disabled in the console, remedies a lot of the layout issues.
 
Screenshot 2024-12-17 142253.png
Thank you.
0 Upvotes
1 Accepted solution
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

Hubspot Forum Not Displaying Correctly on our CMS

SOLVE

Hi @myangMC
how are you implementing the form(s) onto your pages? If you embed it with the embed-code, you can try to exclude default HS CSS by modifying the code slightly.

 

original embed-code:

<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "123456789",
    formId: "1a64148a-2d22-4b90-b9f1-b4784fa62a80"
  });
</script>

 

modified embed-code:

<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "123456789",
    formId: "1a64148a-2d22-4b90-b9f1-b4784fa62a80",
    css: ''
  });
</script>

 

adding an empty 

css:''

will not load the default HS CSS which might be conflicting with your own CSS. 

I recommend to create a seperate page in your environment, test it, potentially apply new CSS rules, and once you're happy - update the embed code on all your pages.

 

 

best, 

Anton 

Anton Bujanowski Signature

View solution in original post

1 Reply 1
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

Hubspot Forum Not Displaying Correctly on our CMS

SOLVE

Hi @myangMC
how are you implementing the form(s) onto your pages? If you embed it with the embed-code, you can try to exclude default HS CSS by modifying the code slightly.

 

original embed-code:

<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "123456789",
    formId: "1a64148a-2d22-4b90-b9f1-b4784fa62a80"
  });
</script>

 

modified embed-code:

<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "123456789",
    formId: "1a64148a-2d22-4b90-b9f1-b4784fa62a80",
    css: ''
  });
</script>

 

adding an empty 

css:''

will not load the default HS CSS which might be conflicting with your own CSS. 

I recommend to create a seperate page in your environment, test it, potentially apply new CSS rules, and once you're happy - update the embed code on all your pages.

 

 

best, 

Anton 

Anton Bujanowski Signature