How do I make mobile responsive forms scroll down?

  • GeoArm
    Asked on August 23, 2016 at 9:33 AM

    Hello,

    My form is getting cutoff (vertically) before the ending. The form seems to be mobile responsive, with regards to horizontal layout but not in terms of vertical layout.

    There is no way to scroll-down to the bottom of the form to fill out all the required information.

    Please help me.

    -Blake

  • beril JotForm UI Developer
    Replied on August 23, 2016 at 10:25 AM

    Could you re-embed your form as you see below:

     <iframe id="JotFormIFrame-42720322140943" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/42720322140943" frameborder="0" style="width:100%; height:1757px !important; border:none;" scrolling="yes"> </iframe>

    If this does not resolve the issue, please let us know and we will be glad to take another look.

  • GeoArm
    Replied on August 23, 2016 at 10:42 AM

    Hello Beril,

    I will gladly test the recommendation.

    I have a lot of forms on my website, all with the same mobile responsive error of not vertically scrolling.

    I noticed that you defined a certain height (1757px) for this form. Is the 1757px the recommended setting for height, no matter how long the form is?

  • Kiran Support Team Lead
    Replied on August 23, 2016 at 11:12 AM

    No, the height of the form may vary from form to form and it is required to change the height for each form separately. However, if you are using the complete iframe embed script of the form, the height should be automatically adjusted on the web page without making any changes to the code.

    How do I make mobile responsive forms scroll down? Image 1 Screenshot 20

    Please refer to the guide below to get the iframe embed code for your JotForm:

    http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Please try embedding the full embed script and see if that works. If you see any issues due to script conflict on your web page, you may then remove the <script></script> section from the embed code and adjust the height manually.

    Hope this information helps!