Form too long on website

  • Profile Image
    ProjectMajor
    Asked on February 13, 2014 at 12:40 AM
  • Profile Image
    EltonCris
    Answered on February 13, 2014 at 02:24 AM

    Hi,

    It appears long because that's the actual total height of your form. You can manually changed your iframe height like the following until you get the desired result. 

    <iframe id="JotFormIFrame" frameborder="0" style="width:100%; height: 869px; border:none;" scrolling="no" onload="window.parent.scrollTo(0,0)" data-embed="true" allowtransparency="true" src="https://secure.jotformpro.com/form/40428431501948?wmode=opaque"></iframe>

    FYI, iframe height does not adjust dynamically so therefore the form is set to display on the defined fixed height. You can use the default embed code if dynamic height is what you need.

    Let us know should you have further questions.

    Regards!

  • Profile Image
    datasphere
    Answered on February 13, 2014 at 03:22 AM

    Hi ProjectMajor

     

     

    looking at your code I found that your form height is calculated automatically by browser

    it`s default behaviour.

    you can inject bolded line bellow into your code or all this together (the new code will rewrite the old one) but to be sure make a backup copy of your form.

    .form-all {

        background: none repeat scroll 0 0 #EBEBEB;

        color: #555555 !important;

        font-family: 'Arial';

        font-size: 13px;

        margin: 0 auto;

        padding-top: 0;

        width: 640px;

        height: 1024px; }

     

    Looking at Cris Eltons answer I noticed that you have increased the height in your form, you probably played with it around or did not know where to change it  

    <iframe id="JotFormIFrame" scrolling="no" frameborder="0" 

    src="https://secure.jotformpro.com/form/40428431501948?w

    mode=opaque" allowtransparency="true" data-embed="true" 

    onload="window.parent.scrollTo(0,0)" style="width:100%; height:1546px; border:none;"> 

     

    Try first injecting the .form-all code into your jotform then try changing iframe if this doesn`t help you .

     

    If you want to shrink your form more, then just change this parameters in the CSS as in my example:

    .form-all {

        background: none repeat scroll 0 0 #EBEBEB;

        color: #555555 !important;

        font-family: 'Arial';

        font-size: 13px;

        margin: 0 auto;

        padding-top: 0;

        width: 320px;

        height: 505px; }

     

    But take into the consideration the font size and button size when shrinking the form  !

    Have a pleasant day !

    D.

  • Profile Image
    ProjectMajor
    Answered on February 13, 2014 at 10:01 AM

    Thank you! Solved