What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by ahmedaallam on November 12, 2014 at 09: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,

     

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

    height JotForm format www iframe embed
  • Profile Image
    JotForm Support

    Answered by ashwin_d 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:

    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!

  • Profile Image

    Answered by ahmedaallam 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.

  • Profile Image

    Answered by raul 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" onload="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.

  • Profile Image

    Answered by raul on November 13, 2014 at 11:54 AM

    Sorry, please use this code instead:

    <iframe id="JotFormIFrame" onload="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.

  • Profile Image

    Answered by ahmedaallam on November 13, 2014 at 01: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.

     

     

    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, 

  • Profile Image

    Answered by raul on November 13, 2014 at 03: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" onload="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.

  • Profile Image

    Answered by ahmedaallam on November 13, 2014 at 09:31 PM

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

     

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

     

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d 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!