Form iframe has fixed width with Wordpress shortcode

[PierreSnglr]

I have embedded a HubSpot form on our website using following steps:

• Installing the official hubspot plugin
• Setting the above plugin up to connect to our account
• Go to Forms > The relevant form > Copy shortcode
• Add the shortcode using the relevant module in the Oxygen editor

No matter what I do, the iframe keeps a fixed width of 300px. Please note that the parent divs are both wide enough.

What I have tried:

• Setting the width to 100% in the form editor (still the case)
• Resizing the iframe with a JS script (works but weirdly enough only to fixed pixels again, thus breaking responsiveness)
• Checking what scripts are listening to the events bound to that particular iframe to see if anything is interferring, but nothing seems off

What am I missing here? 

[Ben_M]

Can you try setting the width of the form ID ( #hbspt-form-1606179519000-7983280184 ) in your CSS?  If you are not able to do that you may need to open a ticket with support and inquire about the Wordpress plugin because it's definitely in that as your form is setup properly and reviewing your site code is fine as well from all I can see.  So there's definitely something in that plugin causing this.

[PierreSnglr · Accepted solution]

Hi Ben,

Sorry for the late reply. We fixed it by using a different wrapping element and applying flex on it. Super weird but we are happy it works 🙂

Cheers,

Pierre

[OVincent3]

Hello Pierre, any chance you could share how you resolved this problem? we have the same issue and no way to find a support answer to make this iframe responsive. Hubspot is force-replacing 100% to 560 in the width of the iFrame.

[PamCotton]

Hello @OVincent3, thank you for commenting. I wanted to ask if you can create a new post with specific details since this post is old and this way we can help you.

The more information, screenshots, and details you can provide, the better I can advise on the next steps.

Thank you,

Pam

[Ben_M]

2 Things.

First, the use of // without a protocol in front is valid.  It is for the host to serve up the protocol.  So this is not a bug and should retrieve the file from the https protocol, otherwise you would end up with a mixed content error meaning you are trying to serve unsecure content on a secure site.

Second, can we see your page in question?  There is nothing in the code that I am aware of that would restrict the width of the form and it should always stretch to the full width.  It could be possible that there is something overriding the CSS on your page that is causing the restriction.  

[PierreSnglr]

Hi Ben,

Thanks for the quick reply! Didn't know about the validity of that syntax - seems solved then.

The form can be seen here.

Cheers,

Pierre

[PierreSnglr]

There is also one thing I'd like to point out (I guess it's a little bug from your side): when copying the Embed code I think there is a https missing in front of the //js