Iframe height issues when embedding Hubspot form in SharePoint Webpart

Other Questions HubSpot
1

Hey everyone, I’m having trouble with a Hubspot form in my SharePoint Webpart. The iframe is acting weird. When I set the height to 100%, it cuts off part of the form. But if I bump it up to 200%, the whole form shows up. Weird, right?

The problem is, when I use 200% height and resize the window, the frame doesn’t adjust. There’s no scroll, so some buttons go missing. Plus, it looks like we can’t add scripts to these embedded Webparts.

Has anyone run into this before? I’m stumped on how to make the form fit properly without using that crazy 200% height. Any tips or tricks would be super helpful!

Here’s a quick code snippet of what I’m working with:

<iframe src="hubspot-form-url" width="100%" height="200%"></iframe>

I’ve tried playing around with different height values, but nothing seems to work quite right. Help!

2

ugh, those iframe issues can be a real pain! have u tried using a container div with fixed height and overflow:auto? something like:

Might help with the resizing probs. good luck!

3

Have you considered using a responsive iframe approach? I’ve found success with the padding-bottom technique. It maintains aspect ratio across devices. Here’s a basic example:

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Adjust the padding-bottom percentage to match your form’s aspect ratio. This method usually works well without scripts. It might require some tweaking, but it’s worth a shot for your SharePoint setup. Let me know if you need more details on implementation.

4

I’ve dealt with similar iframe headaches before, and it’s never straightforward. One workaround that’s worked for me is using JavaScript to dynamically adjust the iframe height based on its content. You’d need to host a small script file separately and reference it in your SharePoint page.

The script would look something like this:

window.addEventListener('message', function(e) {
  var iframe = document.querySelector('iframe');
  var height = e.data.height;
  iframe.style.height = height + 'px';
});

Then in your Hubspot form, you’d add some code to send the form’s height to the parent window. It’s not perfect, but it might solve your resizing issues without resorting to that 200% hack. Just remember to test thoroughly across different browsers and devices.