Hubspot form not loaded properly on a NextJs application

Developer Support APIs & Integrations
1

Hi everyone,

We are having some issues with how the Hubspot forms are loaded on a NextJs app ( especially on a first time visit from a mobile devices - or if you open the page in incognito, page example : Home - Business | OOHPod - Self Service Parcel Lockers Ireland).

We used this approach in order to load the forms: GitHub - snelsi/next-hubspot: ⭐Embed Hubspot forms in your Next.js application · GitHub
It looks like the height of the <iframe> is wrongly calculated by the Hubspot script, resulting into a UI issue ( we can’t see the bottom part of the form and we’re not able to scroll that into view - I have attached a screenshot IMG_2172).

hubspot issue.jpeg
hubspot issue.jpeg1179×2556 155 KB

I have also attached two screenshots to show how the height is wrongly calculated : in the first image the height is set to 934px, in the second it is set to 958px(the height gets readjusted after you interact with the form, all good after that). Both heights refer to the same Hubspot form.

1.png
1.png1974×150 112 KB

2.png
2.png1938×134 84.5 KB

Note: there is no other CSS that interfere with the iframe. All that inline style is generated by the Hubspot script.

Any idea on what could cause the issue is much appreciated.
Regards,
Silviu

2

Hi, @SN54 :waving_hand: Thanks for reaching out. One quick place to check, if your portal is Marketing Hub/CMS Hub Pro or above, is setting the form to raw HTML. This allows you to control the styling externally. — Style your embedded form with CSS in your external stylesheet

If you don’t have access to this option, or if you’ve ruled it out already, please let us know.

Best,

Jaycee