JS embedded form can not be scrolled on iPad and iPhone

  • Profile Image
    Ben
    Asked on May 26, 2016 at 09:38 AM

    Opening a thread based on Twitter conversation.

  • Profile Image
    Stuartinoz
    Answered on May 26, 2016 at 09:45 AM

    2nd attempt at answering this as well...

     

    iPad and iPhone users cannot scroll through my form so never see the Submit button,  Is this a common problem or am I missing something?  Thanks, Stuart

    www.capturebox.co.uk/booking-form

     

  • Profile Image
    Stuartinoz
    Answered on May 26, 2016 at 09:46 AM

    This worked through Edge but not through Explorer11....

     

  • Profile Image
    Ben
    Answered on May 26, 2016 at 10:02 AM

    Strange. Should work on IE as well, but I would always recommend using the latest version of Internet Explorer (Edge) since the newer versions are starting to catch up with the standards.

    I personally suggest using FireFox if at all possible since it is more standards compliant and secure.

    In regards to your issue. I see that you have embedded the form using the JS embed code.

    Please do try to change it into the iframe embed code instead.

    You can see how to do the same here: How to get the jotform iFrame Code

  • Profile Image
    Stuartinoz
    Answered on May 27, 2016 at 05:46 AM

    Hi Ben,

    Converted to iFrame but still getting the same problem on an iPad?   Is there something within the iFrame code preventing this?

     

    cheers,

     

    Stuart

  • Profile Image
    jonathan
    Answered on May 27, 2016 at 06:23 AM

    Hi Stuart,

    When I test the embedded form on the website I was able to see the problem as well.

     

    But using the form URL https://www.jotformeu.com/form/51835674307359  only did not present similar behavior.

    --

    Can you please try also re-embedding the form using its iframe publish code, but this time exclude the script part of the code.

    Example:

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

    It is possible the script part is causing conflict as well. Let us test if its omitted how the embedded form behave.

    Please let us know how it goes.

  • Profile Image
    Stuartinoz
    Answered on May 27, 2016 at 06:50 AM

    Hi, I've changed the URL and removed the script.  Works fine in Windows, missing bottom of the form on iPad.

    Thanks,

     

    Stuart

  • Profile Image
    Chriistian
    Answered on May 27, 2016 at 07:14 AM

    Hi,

    Your form looks fine in my ipad simulator. The bottom is not cut off. Please see below.

    Please try clearing your browser cache and form cache. Let us know if the issue still persists.

  • Profile Image
    Stuartinoz
    Answered on May 30, 2016 at 04:26 PM

    Looks fine in Windows, Android devices it is missing off the bottom but you can use the 'next' button to move down the field and iPad now looks like the attached....?

  • Profile Image
    Mike
    Answered on May 30, 2016 at 05:16 PM

    The issues are most likely caused by the website layout.

    It looks like that the form placeholder element height is limited to 1895 pixels.

    Please try to increase it to 3000 for example to see how it goes.

  • Profile Image
    Stuartinoz
    Answered on June 01, 2016 at 04:53 PM

    Is it not possible to have a vertical scroll bar?  It fits perfectly on Windows Explorer and therefore the form looks strange if extending to 3000 as there is a large blank space in Windows but then ok for Apple users? 

  • Profile Image
    jonathan
    Answered on June 01, 2016 at 05:11 PM

    Please try enabling scrolling=Yes in the iframe embed.

    Example:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/51835674307359" frameborder="0" style="width:100%;height: 1895px;border:none;max-height: 1895px;" scrolling="Yes"> </iframe>

    Let us know how it goes.

     

  • Profile Image
    Stuartinoz
    Answered on June 06, 2016 at 07:16 AM

    Still fits perfectly on Windows Explorer Apple users do not get restricted by the 'max-height' command so instead of scrolling it shows the entire form.

  • Profile Image
    Chriistian
    Answered on June 06, 2016 at 08:48 AM

    Hi,

    I just tested with an iPad simulator and here is what it looks like.

    It fits the height and doesn't have a vertical scrollbar because the max-height of the form is 1895px while the actual height is 1865px.