Non Responsive Form

[ajj]

Hello:
I can not get my form to become responsive. It is stuck in one size.

You can view it here view webflow:

http://ball-212251.webflow.io/

Any help would be welcome.

Thank you, aj

[BArnesen]

Thanks for the solution above. It's ridiculous that extra code is needed for a basic function. At a minimum, HubSpot should have a responsive button to toggle to add this. It's 2021. 

[JBacinskaite]

Just wanted to say THANK YOU because this is the only thing I found that works for a non raw-HTML version of the HS form embed. 
One note though for any future folks trying to figure this out -- the above code needs to go after the HS embed script, like so: 

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>

<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>

<script>
  hbspt.forms.create({
	portalId: "1234567",
	formId: "blah-blah-blah"
});
</script>

<style>
.hbspt-form .hs-form-iframe {
  width: 100% !important;
}
  </style>

[dennisedson]

@ajj, how did  you add  this form to your site?  the iframe has a width of 300 applied to it.  the code looks different than i am used to.  did you paste the form script in?

[ajj]

Hi:
Thank you for the reply.

Yes, copy and pasted in the HTML code into the section.

I can not figure out how to change the 300 because it is set on 100%width.

Thank you.

[dennisedson]

@ajj, did the code you paste look like this:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	portalId: "5200325",
	formId: "71635d66-b1e0-4202-92d1-0d34a711472e"
});
</script>

or did you copy and paste the html from another page?

[ajj]

That is what I pasted in.

I have recopied and pasted in the following:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
portalId: "5200325",
formId: "71635d66-b1e0-4202-92d1-0d34a711472e"
});
</script>

[dennisedson]

@ajj, 

can you try replacing with the version i had above?

it is slightly different.  see if it works

[ajj]

Dennis :

Corretion. Your suggest solution works on full screen, but when it goes down to mobile, the content fields do not shrink.

http://ball-212251.webflow.io/#contact-top

Thank you.

[dennisedson]

@ajj,

you have an event firing on form load that is setting the width of the iframe, but it does not fire on window resize.  you will want to modify this script to call the function on window resize

[jewong]

Hi,

One of our free account users is having this issue as well as - the form does not resize when the window is resized. 

This is the embed code she is using:

<script charset="utf-8" type="text/javascript" src="js.hsforms.net/forms/shell.js"></script> <script> hbspt.forms.create({ portalId: "6516738", formId: "f1a258af-706d-415d-8add-76b99070456e" }); </script>

Mind if I ask how can she modify the script to call the function upon window resize?

[TomEjc]

Hi,
I had this issue on the pages for HS account, which has only the basic formating of forms. The forms are loading inside the iframe there, so you can't apply CSS directly, but you can overide the iframe inline css by "!important" like:

.hbspt-form .hs-form-iframe {

  width: 100% !important;

}

Now the form inherits the parent's width.

[ajj]

Hi Dennis:

Thank you.  I have recopied your version of the HTML and it seems to work.

Please provide any feedback on how to make it better.

Thanks

Site: http://ball-212251.webflow.io/