Hubspot Forum Not Displaying Correctly on our CMS

Developer Support CMS Development
1

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
Screenshot 2024-12-17 142253.png1884×1032 156 KB

Thank you.

2

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