When embedding a Sales Meeting into my website, the height of the iframe does not match the height of the content. Specifically, whent he form appers, the content has to scroll inside the iframe. How do I break the Meeting widget out of this iFrame jail so that the entie contents is visible when the form is displayed? I tried setting a height for the iframe, but that didn’t seem to affect the contents. What can I do?
I tried scaling the height of the iframe with both CSS and JavaScript but neither changes the height of the content inside the frame. It just makes the iframe taller without affecting the content.
Hi @BenStark,
Thanks for reaching out to the Community and for including the steps you have taken so far!
Would you be able to share the link to the page where the meeting widget is embedded? Can you also share a screenshot of what you’re seeing on your end?
Thank you!
Best,
Kristen
Here is a link to the page. The screenshot is in my original post, but here it is again.
@BenStark Looks like this is due to the form being so long. I see the first, email enter page takes up the whole iframe.
The iframe doesn’t embed into the DOM it loads dynamically. I’m not aware of any workarounds to force the entire iframe to be a specific size and I would suspect it’s built this way specifically. The iframe gives the meeting a specific styling so external scripts and styling don’t affect it.
It looks like everything is a visible height, the first page and the time booking, it’s just that the form is larger it requires a scroll. I’d imagine this is an intentional design decision by HubSpot to ensure there’s not an inconsitent size while navigating between pages, if the entire iframe was longer the initial page would be too long and the time booking page may be too long if there were few times available. The other option would be to have each page jump in height.
To my knowledge there isn’t, and likely intentionally shouldn’t be a way to change the height on these embeds so everything is visible instead of a scroll.
I have the same problem. And it’s not ideal, the last question is “hidden” and the user needs to realise they must scroll down in order to see it. It’s not intuitive at all.
Instead of making changes to the iframe, couldn’t Hubspot make the form fields more flexible?
If I could add the Company Name field next to the Email field (in the same line), or the Mobile number to the same line next to the Company name, just as it is with First and Last names, that would make the form shorter and sort this problem!
Hey @MariZanchetta If you’re on enterprise you can now use HubSpot forms as the meeting link form, which would allow you to customise this as much as you like.
Hi @TomM2 , thanks for getting back.
I’m on the Professional plan, so I won’t have access to that.
I do appreciate that some features are only available in some plans, however, this seems like an issue that should be sorted out for all users (not the access to this new meeting link form, but the problem with the form itself).
The fact that a visitor needs to scroll down the form to view the last question(s) when there is enough space available for the form to be fully displayed doesn’t make any sense, and I believe it is hurting my conversion rate metrics.
I hope Hubpost considers a way of sorting this out, either by fixing the iframe or providing us an option to add questions in the same line.
many thanks!
Hey @MariZanchetta I can definitely agree, it might be a good idea to add a feature request on the ideas forum to bring this to the attention of the HubSpot product team.
I totally agree with you. This is really a fundamental feature within Hubspot. We use Calendly now, because it is in there.
Hey Tom, thanks for the reply on this. I’m having the same exact issue. I do know that you can add the scheduler directly into the form routing from within a HubSpot form itself. However, the issue we ran into is that if we don’t embed the HubSpot scheduler on a HubSpot landing page, then our cookie banner through cookie bot won’t show on the page. So we had to embed the scheduler on a landing page and then have that conditionally route from the form.
Hey @MRussell28 
, thanks for reaching out to the HubSpot Community!
I’ve gathered for you these similar threads that might help:
- The solution from @TomM2 on this post “Troubleshooting Meetings Link Embed”
- The solution from @ventit1 on this post “Remove frame from scheduling meeting embed”
If these don’t change the behavior, for new feature suggestions, I’d recommend first to search and check if this idea is already present on our Ideas Forum here. If you find a similar idea, give it an upvote and share your unique use case in the comments.
If the idea doesn’t exist already, please consider posting and creating a new Idea on our Ideas Forum here.
And sharing this article “Embed content using an embed code” for information.
Thank you for being part of the discussion and have a lovely weekend!
Bérangère
I just wanted to second that I definitely see this as an issue. We do have people reaching out to us from time to time mentioning that the form “is broken” and they could not submit it. Also, co-workers have mentioned this.
I am a developer and I embed the forms to websites and since they are iframes on domains I do not control I can’t control the height.
I would prefere to have layout shifts on the page instead of scrollbars in this case.
It would be great to have a solution or workaround if anyone could point me in the right direction.
I am having the same problem here. This is a problem that needs fixed. On mobile, this causes major user confusion as it looks like they have filled out all of the required fields but still can’t click the book button because there are other required fields below that requires a scroll from the user that isn’t inuitive.
We have the same problem, and it is a serious problem. Not having all the form fields visible is a leakage point and potential leads don’t sign up. Forms should display all required fields, including consent policies.
Having the same issue. The iframe height needs to be able to be adjusted. We will not use the new forms for our website due to this issue.
We moved to HubSpot from Calendly because we wanted tighter booking functionality. But may go back because of this. What a terrible ux
Hi @RRobinson63,
Thank you for sharing your feedback and letting us know about your experience.
We understand how frustrating it can be when the user experience doesn’t meet expectations, and we really appreciate you taking the time to let us know. Your input is valuable as we work to improve our embedded meeting functionality.
Cassie, Community Manager
I see this is a know issue and Hubspot didn’t take any step to fix it.
We have leads contacting us because they cannot submit the form. On mobile it created a double scrolling effect and the button to submit the form isn’t visible.
That mean we probably losing many opportunities dues to this issue!
On mobile, a simple fix would be to have the form submit button in line with the form itself so if they scroll down the form, they can submit the form no matter what.
Please this is a simple fix that would directly impact user experience and conversion.