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 too long on website

    Asked by ProjectMajor on February 13, 2014 at 12:40 AM

    How can I shrink my form down. Thanks.

    Page URL:
    https://projectmajor.squarespace.com/iphone-galaxy-custom-cases

    shrink thanks
  • Profile Image
    JotForm Support

    Answered by EltonCris 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

    Answered by datasphere 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

    Answered by ProjectMajor on February 13, 2014 at 10:01 AM

    Thank you! Solved