Feb 27, 20249:30 AM - edited Feb 27, 20249:49 AM
Participant
Form Height calculation of iFrames does not work properly.
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.
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?
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.
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?
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.