How can I automatically adjust the height of the iframe when my form is embedded?

  • ahmedaallam
    Asked on November 12, 2014 at 9:26 PM

    Hi,

     

    I see it as a very common question but i tried almost all of the solutions posted on your forum and did not work.

    weather by adding CSS or change the format of embed or html codes!

    http://www.nyroyal.com/reservation/

    The page is so height. I do not why?

    I can not limit the height as when clients use extra fields, it may extend that is why the height should be flexible.

    The form

    http://form.jotform.us/form/42854152064149?

     

    please advise,

     

  • Ashwin JotForm Support
    Replied on November 13, 2014 at 12:01 AM

    Hello ahmedaallam,

    Please be noted that iFrame has a fixed height attribute. We do recommend to embed your form in iFrame to avoid any conflict issue.

    For now I would suggest you to embed your form using its JavaScript embed code and see if that solves your problem. Please check the screenshot below:

    How can I automatically adjust the height of the iframe when my form is embedded? Image 1 Screenshot 20

    This should adjust the height of the form based on the fields which is visible. 

    Do try it out and get back to us if the issue persists.

    Thank you!

  • ahmedaallam
    Replied on November 13, 2014 at 11:20 AM

    Hello Ashwin_d,

     

    Thank you so much but it does not work, unfortunately. It made some tiny pictures very huge as well.

    let me know what else i should try please.

  • raul
    Replied on November 13, 2014 at 11:50 AM

    Upon checking your site, I see that you're using the iframe code of your form.
    Please try to re-embed your form in your website using this code instead:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/42854152064149" frameborder="1" style="width: 100%; height: 1400px; border: none;" scrolling="no"></iframe>

    Let us know if this works.
    Thanks.

  • raul
    Replied on November 13, 2014 at 11:54 AM

    Sorry, please use this code instead:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/42854152064149" frameborder="1" style="width: 100%; height: 1500px; border: none;" scrolling="no"></iframe>

    I increased the height so the Next button won't get lost if someone doesn't fill a required field.

    Thanks.

  • ahmedaallam
    Replied on November 13, 2014 at 1:58 PM

    Hello Raul,

    Thank you so much.

    The code makes the page fits very well but if any one selected one of the options that make the form extend and take more space, that part of the form would be hidden.

    How can I automatically adjust the height of the iframe when my form is embedded? Image 1 Screenshot 20 

     

    I guess the real large height of the form as it is considering the extra fields if selected. I therefore wonder if there is any flexible way to be extended if needed.

     

    best, 

  • raul
    Replied on November 13, 2014 at 3:20 PM

    Well, I can think of 2 options to fix the height issue:

    1. Change the scrolling setting of the iframe to "yes", so it will be like this:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/42854152064149" frameborder="1" style="width: 100%; height: 1500px; border: none;" scrolling="yes"></iframe>

    This will show the scrolling bar when the height of the iframe gets larger than 1500px.

    2. Use JavaScript to adjust the height of the iframe automatically, if you choose to go this way I suggest that you take a look a this JQuery plugin: http://davidjbradshaw.github.io/iframe-resizer/ You can see a live demo here: http://davidjbradshaw.com/iframe-resizer/example/. I think that it could work with your form.

    Best Regards.

  • ahmedaallam
    Replied on November 13, 2014 at 9:31 PM

    I tried the first option, was working very well then became form disable!!

     

    http://www.nyroyal.com/reservation/

     

     

  • Ashwin JotForm Support
    Replied on November 13, 2014 at 11:28 PM

    Hello ahmedaallam,

    Upon checking your account I found that it's suspended by our anti-phishing system. I did check your forms and found it to be clean. I have taken care of your account issues. Your account is not active and your forms are enabled.

    Thank you!