# Form iframe has fixed width with Wordpress shortcode

**URL:** <https://community.hubspot.com/t/form-iframe-has-fixed-width-with-wordpress-shortcode/28347>\
**Category:** Lead Capture Tools\
**Tags:** forms\
**Created:** [November 23, 2020, 2:35pm UTC](https://community.hubspot.com/t/form-iframe-has-fixed-width-with-wordpress-shortcode/28347 "2020-11-23T14:35:59Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![PierreSnglr](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pierresnglr/32/73373_2.png) [@PierreSnglr](https://community.hubspot.com/u/PierreSnglr)\
**Post date:** [November 23, 2020, 2:35pm UTC](https://community.hubspot.com/t/form-iframe-has-fixed-width-with-wordpress-shortcode/28347/1 "2020-11-23T14:35:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![PierreSnglr](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pierresnglr/32/73373_2.png) [@PierreSnglr](https://community.hubspot.com/u/PierreSnglr)\
**Post date:** [November 23, 2020, 2:53pm UTC](https://community.hubspot.com/t/form-iframe-has-fixed-width-with-wordpress-shortcode/28347/2 "2020-11-23T14:53:57Z")

</div>

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

 ![34585i20B9EFB8902E2D0D.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/d/7df796f31fb1181dc473166aee74a880e7832cf7.jpeg)

---

<div class="post-metadata">

**Author:** ![Ben\_M](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ben_m/32/2679_2.png) [@Ben\_M](https://community.hubspot.com/u/Ben_M)\
**Post date:** [November 23, 2020, 4:14pm UTC](https://community.hubspot.com/t/form-iframe-has-fixed-width-with-wordpress-shortcode/28347/3 "2020-11-23T16:14:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![PierreSnglr](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pierresnglr/32/73373_2.png) [@PierreSnglr](https://community.hubspot.com/u/PierreSnglr)\
**Post date:** [November 23, 2020, 4:16pm UTC](https://community.hubspot.com/t/form-iframe-has-fixed-width-with-wordpress-shortcode/28347/4 "2020-11-23T16:16:53Z")

</div>

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.](https://snglr.test-online.biz/kontakt/)

Cheers,

Pierre

---

<div class="post-metadata">

**Author:** ![Ben\_M](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ben_m/32/2679_2.png) [@Ben\_M](https://community.hubspot.com/u/Ben_M)\
**Post date:** [November 24, 2020, 1:04am UTC](https://community.hubspot.com/t/form-iframe-has-fixed-width-with-wordpress-shortcode/28347/5 "2020-11-24T01:04:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![PierreSnglr](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pierresnglr/32/73373_2.png) [@PierreSnglr](https://community.hubspot.com/u/PierreSnglr)\
**Post date:** [November 26, 2020, 12:13pm UTC](https://community.hubspot.com/t/form-iframe-has-fixed-width-with-wordpress-shortcode/28347/6 "2020-11-26T12:13:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![OVincent3](https://avatars.discourse-cdn.com/v4/letter/o/b782af/32.png) [@OVincent3](https://community.hubspot.com/u/OVincent3)\
**Post date:** [April 3, 2023, 6:16pm UTC](https://community.hubspot.com/t/form-iframe-has-fixed-width-with-wordpress-shortcode/28347/7 "2023-04-03T18:16:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![PamCotton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pamcotton/32/47916_2.png) [@PamCotton](https://community.hubspot.com/u/PamCotton)\
**Post date:** [April 3, 2023, 8:35pm UTC](https://community.hubspot.com/t/form-iframe-has-fixed-width-with-wordpress-shortcode/28347/8 "2023-04-03T20:35:16Z")

</div>

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
