Lead Capture Tools

PierreSnglr
Member

Form iframe has fixed width with Wordpress shortcode

SOLVE

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? 

0 Upvotes
1 Accepted solution
PierreSnglr
Solution
Member

Form iframe has fixed width with Wordpress shortcode

SOLVE

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

View solution in original post

Ben_M
Key Advisor

Form iframe has fixed width with Wordpress shortcode

SOLVE

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.

0 Upvotes
PierreSnglr
Solution
Member

Form iframe has fixed width with Wordpress shortcode

SOLVE

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

Ben_M
Key Advisor

Form iframe has fixed width with Wordpress shortcode

SOLVE

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
Member

Form iframe has fixed width with Wordpress shortcode

SOLVE

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

0 Upvotes
PierreSnglr
Member

Form iframe has fixed width with Wordpress shortcode

SOLVE

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 

Screenshot 2020-11-23 at 15.53.18.png

0 Upvotes