My embedded lead form partially loads before clicking through fields

[drewgainor]

For some reason, my embedded lead form only partially displays a few fields on first load. You have to click a field and the rest of the form then appears.

It loads correctly through the share link so this seems isolated to the embed:

https://share.hsforms.com/1URGeST_nT9yFPG4989l98Q29j8z

You can see the partial load by clicking "Contact Us" from our header:

https://seatscouts.com/

It is driving me nuts! Anyone know what might be cuasing this as I have not been able to track it down and it is happening across browsers.

Thank you

[GV]

Any one can give the example of sms extension reference and how to create new integrate sms extension for hubspot contact detail page ? 

[Tom · Accepted solution]

Hey @drewgainor this is actually due to the custom modal you're loading your form within. When the page loads, the HubSpot embed code executes a function to create your form. Within this we load the form within an iframe on your page, the iframe pulls the container information from your HTML and determines the height the iframe should be set to. 

Due to the nature of an iframe element we need to determine the height to set this on the page so all of the form can display. However, as your form isn't loading on page load but is loading when your "contact us" modal is triggered, we can't determine the height of the element so we can't set a height for the iframe and thus, you see the entire form not being displayed. 

You can stop this happening by ensuring the form loads on page load so we can determine a height for the iframe, alernatively you can set a height for your modal and iframe manually through your website's stylesheet. 

[Lilli_F]

Hi Tom,

I experience the same problem. Although I set the contact form size, it is still like before. How can I fix this? My website is www.loyos.de and I use the form in a button pop-up ("KONTAKT").

[Lilli_F]

FYI: I removed the form on all except for one page as it's not user friendly. Please have a look at www.loyos.de/impressum for seeing the bug.

[Tom]

Hey @Lilli_F  this is the same as the issues outlined above. If the iframe isn't visible on page load we cannot determine the height. Since you are using this in a custom modal that is not visible when the page loads this is the case. You can easily set an iframe height through your stylesheet to suit your form which will allow this to be completely visible. Something such as iframe{height:valuepx} 

The reason this isn't completely visible is that we determine the height of the iframe on the page load, when the form isn't visible we have no way to do this. 

[Lilli_F]

I only have this problem on my laptop, on smartphones it works.

[scottfasser]

Hi, I'm experiencing the same issue but only with Safari - on this staging site here - http://sigma-iq.webflow.io/schedule-demo - I've asked my dev to take a look given your guidance, but why would this happen only on Safari and not on Chrome or FireFox?

[drewgainor]

Thank you, @Tom! I added a fixed size to the form in our CSS and it works perfecty! Appreciate both of your help.

Drew

[MFrankJohnson]

Hey @drewgainor, we tested your form on a HubSpot LP and it's working just fine (as an embedded form).

- see dev Drew Gainer Testing Form (expires 18-Dec, 12a EST)

Maybe try embedding on a page without the popup to see how it renders. That's probably the fastest way to tell if there's some other underlying WP conflict -- i.e., plugin, whatever.

Also, maybe ask over in the design section. Lot's of strong devs over there. Hope that helps.

Best,
Frank

Author "Perfect HubSpot" Series

---

MFrankJohnson.com | Connect on LinkedIn

Help find posts quickly ... accept this solution now.