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

    Form height issue of iFrame embedded form

    Asked by glandoreghyc on April 30, 2015 at 04:02 PM

    OK,

     

    Firstly, thank you for all the support that the forum has given and in particular the contribution of Ben, but i think i have come to a point that i need to reset the scene so we are all on the same page so to speak.

    There is one Primary form at

    http://form.jotformpro.com/form/51022125385950?

    There are two embedded iFrames within this form and these "Child" forms are at the following locations.

    http://form.jotformpro.com/form/51032395272955?

    and

    http://form.jotformpro.com/form/51032581912953?

    if you want to see the form(s) in operation on a test site use the following 

    http://www.reenoserve.com/GHYC/forms/index.html

    You will notice there is space between the end of the Submit button and the embedded form(S) i do not understand this.

    However the major concern is that there is a far greater space between the end of the embedded form and the Footer, you can view this effect on a desk top but it is much worse on a smart phone or tablet. And at this time this is my outstanding issue in relation to displaying embedded forms in a responsive mode.

    The CSS in the Primary form is

     

    .form-all {

    margin-top : -75px !important;

    }@media only screen and (max-device-width : 480px){

    #id_19 .form-description {

    right : -10px !important;

    top : 30px !important;

    }}@media only screen and (max-device-width : 1024px){

    #id_19 .form-description {

    right : -20px !important;

    top : 10px !important;

    }}input[type="text"]:focus, input[type="number"]:focus, textarea:focus {

    font-size : 16px;

    }@media screen and (-webkit-min-device-pixel-ratio:0){

    select:focus, textarea:focus, input:focus {

    font-size : 16px;

    }}@media screen and (max-width:768px){

    form.jotform-form {

    padding : 40px;

    }}@media screen and (max-width:640px){

    form.jotform-form {

    padding-bottom : 10px;

    }}#stage.form-all, #stage > ul.form-all {

    margin-top : 25px !important;

    }

    #id_20 {

        margin-bottom: -40px;

    }

    The CSS in the Embedded (Child) Forms is 

     

    form.jotform-form {

        padding : 0;

    }

    ul > li.form-line {

        padding-left : 0;

        padding-right : 0;

    }

    .form-all {

        margin-top : -75px !important;

    }

    @media only screen and (max-device-width : 480px){

        #id_19 .form-description {

            right : -10px !important;

            top : 30px !important;

        }

    }

    @media only screen and (max-device-width : 1024px){

        #id_19 .form-description {

            right : -20px !important;

            top : 10px !important;

        }

    }

    input[type="text"]:focus, input[type="number"]:focus, textarea:focus {

        font-size : 16px;

    }

    @media screen and (-webkit-min-device-pixel-ratio:0){

        select:focus, textarea:focus, input:focus {

            font-size : 16px;

        }

    }

    @media screen and (max-width:768px){

        form.jotform-form {

            padding : 40px;

        }

    }

    @media screen and (max-width:640px){

        form.jotform-form {

            padding-bottom : 10px;

        }

    }

    #stage.form-all, #stage > ul.form-all {

        margin-top : 25px !important;

    }

    form.jotform-form {

        padding-left : 0 !important;

        padding-right : 0 !important;

    }

    div.form-all {

        min-width : 100%;

        width : 100%;

    }

    html.supernova {

        margin-right : 3%;

        padding-left : 1%;

        padding-right : 0;

    }

    div.form-all {

    div.form-all {

        box-shadow : none !important;

    }

     

    #id_20 {

        margin-bottom : -50px;

    }

     

    Thank You

     

    John

  • Profile Image
    JotForm Support

    Answered by Mike on April 30, 2015 at 04:18 PM

    The main iFrame form is not able to automatically adjust its height. You can might consider trying the next options to fix the iFrame height issue:

    1) Try a standard Embed code to see if it work right on your website. It should automatically adjust the main form height based on the form content.

    2) Alternatively, update your iFrame code a bit.

    Change from:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/51022125385950" frameborder="0" style="width:100%; height:2723px; border:none;" scrolling="no"></iframe>

    to

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/51022125385950" frameborder="0" style="width:100%; height:1650px !important; border:none;" scrolling="auto"></iframe>

    Please give it a try and let us know if you need any further assistance.

  • Profile Image

    Answered by glandoreghyc on April 30, 2015 at 05:44 PM

    Hello,

    Well i tried your suggestion of using the standard embed code and it seems to be working fine.

    One very important question, i am not a professional web developer, my understanding of HTML is minimum, my understanding of CSS is even less. When i first started to use JotForms embedded into the website i was advised by people on this Forum to use the iFrame method as it was far more reliable.

    So why should i now downgrade the method to the standard embed ? what are the risks, drawbacks and limitations please?

     

    John

  • Profile Image
    JotForm Support

    Answered by Mike on April 30, 2015 at 06:19 PM

    The Embed code method is similar to the iFrame, it generates the form iFrame on the fly and dynamically changing the iFrame height. Although, in some cases the Embed script might conflict with other javascript libraries and code (e.g. resolving jQuery namespace conflicts). In this case we suggest switching to the iFrame version.

    I have checked your web page http://www.reenoserve.com/GHYC/forms/index.html in different browsers, and unfortunately, the Embed code seems to be unstable in Google Chrome. I would like to recommend you to switch back to the iFrame code, and modify height and scrolling properties in order to resolve the height issues.

  • Profile Image

    Answered by glandoreghyc on May 01, 2015 at 09:03 AM

    Hello,

    Just realised that i posted a reply to this much earlier and it appears to have gone missing???

    Anyway, here is the current status, i am now using the embedded iFrame with the code changes to height and Scrolling Auto.

     

    And the form appears to be working fine at this point.

    To be hones Raul made a recommendation earlier to use scrolling set to Auto and i rejected it as i totally misunderstood the Scrolling function, apologies for that.

     

    All i have to remember now is these two small code changes if i change the Primary Form in any way .

    which will cause me to update the embedded code.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Charlie on May 01, 2015 at 12:03 PM

    I'm glad it somehow works in your end. And we appreciate your patience and understanding on this matter.

    If you needed any assistance again, please do not hesitate to open a new thread here in the forum.

    Thank you.