Form Height calculation of iFrames does not work properly.

[Sebastinho]

Hello community,

we have a problem with our forms, these are embedded via an iFrame on our Wordpress website. When initially loading the website, the buttons at the end of the forms are sometimes cut off or are not visible at all so that the height of the forms is not calculated correctly.

If the page is refreshed or a form is started to be filled in, the height is recalculated exactly and the button is visible.

As an example, I have created a test page with various forms with different fonts. https://www.eggheads.net/form-test/

The screenshots below show how the forms behave on my screen in Firefox. Mobile via Apple and Safari, for example, you can't see any buttons at all. Depending on the device and browser, the problem behaves differently (not showing, cut off).

What can I do to ensure that the height calculation works exactly everywhere?

Best regards
Sebastinho

My Screenshots:

      

[Sebastinho · Accepted solution]

@Jaycee_Lewis  i have probably found the problem.

When the forms are loaded, the height is calculated using a different font, presumably the HubSpot fallback font. Then, in our case, the Sora font is loaded and since the spacing is larger there than with other fonts, the buttons are cut off.

If the page is refreshed or the form is clicked, the height is recalculated with the defined form font, in this case Sora, and then calculated correctly.

If all forms are displayed in Titilium Web, Arial or Times New Roman, the form display also works correctly on initial loading. Since the height difference to these fonts is not so great.

Can anyone confirm this?

[afatwa · Accepted solution]

I’ve run into a similar issue when embedding content in iframes for my own site https://heightcomparisonchart.com/, and it usually comes down to how and when the iframe height is calculated. If the script that resizes the iframe only runs on page load, it can easily miscalculate because fonts, images, or other assets inside the form may load later and push the content down. That’s why refreshing or interacting with the form makes it resize correctly. One fix is to make sure the iframe’s height calculation script runs on additional events like window.onload, DOMContentLoaded, and also after assets inside the iframe finish loading. Some people also use a MutationObserver or a resize listener inside the iframe to send the correct height to the parent page dynamically. On the HubSpot side, enabling “Resize automatically” in the embed settings (if available) or adjusting the embed code to use their recommended postMessage-based resizing script can help ensure the button never gets cut off across browsers and devices.

[Sebastinho · Accepted solution]

@Jaycee_Lewis  i have probably found the problem.

When the forms are loaded, the height is calculated using a different font, presumably the HubSpot fallback font. Then, in our case, the Sora font is loaded and since the spacing is larger there than with other fonts, the buttons are cut off.

If the page is refreshed or the form is clicked, the height is recalculated with the defined form font, in this case Sora, and then calculated correctly.

If all forms are displayed in Titilium Web, Arial or Times New Roman, the form display also works correctly on initial loading. Since the height difference to these fonts is not so great.

Can anyone confirm this?

[Sebastinho]

Hi @joyce,

thanks for your comment.

Do I have any chance at all of setting something else? I can't change the iFrame and I can't tell the browser to load it differently, can I? Otherwise it would have to be set for each browser if they all calculate it differently.

If a form is initially loaded with a height of 990px and is loaded correctly with 1014px after clicking on the input field. Is it then due to the browser saying I am only loading the form with 990px? Shouldn't the iFrame give the browser the correct height?

Best regards
Sebastinho

[Jaycee_Lewis]

Hey, @Sebastinho 👋 Thanks for your question. 

I think I understand the root issue. The form resizing issue on initial load compared to reload likely occurs due to timing differences. The challenge is related to how different browsers and devices calculate and render iFrames.

I'd like to invite some of our community members to the conversation — hey @JonPayne @miljkovicmisa @alyssamwilie, do you have any thoughts on the challenge @Sebastinho is facing?

Best,

Jaycee