Hubspot Forum Not Displaying Correctly on our CMS

myangMC — Mon, 06 Jan 2025 16:39:23 GMT

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.

Thank you.

Re: Hubspot Forum Not Displaying Correctly on our CMS

Anton — Wed, 08 Jan 2025 13:21:58 GMT

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:

modified embed-code:

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

topic Re: Hubspot Forum Not Displaying Correctly on our CMS in CMS Development

Hubspot Forum Not Displaying Correctly on our CMS

Re: Hubspot Forum Not Displaying Correctly on our CMS