How to eliminate dual scrollbars when embedding HubSpot forms in Google Sites

Other Questions HubSpot
1

I’m having trouble with a HubSpot contact form that I embedded into my Google Sites page. The problem is that it creates a separate scroll area within the form itself, which means users see two different scrollbars on the same page.

This becomes really problematic when people visit the site on their smartphones or tablets. Users get confused about which area they should touch to scroll through the content. Some try to scroll the form area while others try to scroll the main page.

Can I make the embedded form integrate seamlessly with the page so everything scrolls together as one unit?

Here’s the implementation code I’m currently using:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "8234567",
    formId: "a7b45ef2-1def-5d82-c84e-28ge5f734g68"
  });
</script>

The dual scrolling behavior makes the user experience pretty frustrating, especially for mobile visitors who expect smooth single-direction scrolling.

2

Had this exact problem about six months ago with HubSpot forms on client sites. The dual scrollbar happens because HubSpot’s iframe creates its own isolated container that scrolls separately. Here’s what fixed it for me: Add custom CSS targeting the HubSpot form container. Override the iframe height by setting the form wrapper to height: auto and overflow: visible. Also modify the parent container’s CSS so the iframe doesn’t create its own scroll context. The trick is intercepting the form after it loads and applying these style changes with JavaScript. Use the onFormReady callback in your hbspt.forms.create config to run custom styling once the form renders. This killed the secondary scrollbar but kept everything working on all devices. After the fix, mobile engagement improved big time - especially on longer forms where the scrolling mess was worst.

3

set the target property to ‘_parent’ in your hbspt.forms.create config. this makes the form render in the parent window instead of creating its own scrollable iframe. fixed my mobile double scrolling issues completely.

4

Google Sites and HubSpot forms don’t play well together because of iframe height restrictions. I fixed this by ditching the JavaScript API and using HubSpot’s direct embed code instead. Go to your form settings, hit “Share” then “Embed code”. Before you paste it into Google Sites, wrap the iframe in a div and add CSS to set a fixed height that matches your form - usually 600-800px depending on how many fields you have. You’ll need to eyeball the right height. This kills the auto-sizing that causes the annoying dual scroll problem. You lose some responsive flexibility, but users get a much cleaner experience since everything scrolls as one page.