Form won't scroll on iPad or iPhone

  • Profile Image
    kubinyi
    Asked on December 16, 2012 at 11:57 PM

    Hi,

    I just created a new form and embedded it into a WP site. The form works great however it won't scroll on an iPad or iPhone. Is this a known issue or am I doing something wrong?

    Thanks,

    George

  • Profile Image
    Welvin
    Answered on December 17, 2012 at 02:04 AM

    Hi George,

    The possible way to solve this issue is to removed your custom scroll box and just place the form embed codes directly. The issue is not with our form, it is on your custom scroll box for WP site.

     

    Thanks

  • Profile Image
    Welvin
    Answered on December 17, 2012 at 02:08 AM

    Use the iframe method and decrease the height value and set the form scrolling to "yes".

    Example: See bolded text

    <iframe allowtransparency="true" src="//yang.jotform.com/form/23467496352159" frameborder="0" style="width:100%; height:5117px; border:none;" scrolling="yes"></iframe>

     

    Thanks

  • Profile Image
    guest_23490460176049
    Answered on December 18, 2012 at 01:25 AM
    Thanks, I think you are right, however I decided to use a light box effect instead and using types 1 and 2 seems to be working fine now. Although the fix most likely has to do with my other issue too, see here:http://www.jotform.com/answers/157580-Using-lightbox-effect-for-form-disables-WP-sub-menu-?entrymessage=10732640770Thanks, George
  • Profile Image
    guest_23490460176049
    Answered on December 18, 2012 at 01:33 AM
    I'm sorry I spoke too soon, my issue remains with the light box effect, actually it just got stranger, now even though it scrolls it would not stay put, it auto adjusts and the form can't be submitted or even closed.You can see this on an iPad using this page http://dev.sbaquaticsclub.com/registration/Click the register button at the end of the page.George
  • Profile Image
    idarktech
    Answered on December 18, 2012 at 02:18 AM

    Hi George,

    Your lightbox form height might be too long for that mobile device, I can't even view it properly on my 14 inch device. Try changing height from 800 to 500 found on your lightbox embed code. If the height changes doesn't take effect, use this CSS codes.

    <style>

    body.page.page-id-1308.page-template-default div div div.window-content-wrapper div.window-content{

    height: 600px !important;

    }

    body.page.page-id-1308.page-template-default div div div.window-content-wrapper div.window-content iframe{

    height: 600px !important;

    }

    </style>

    Result would be like this: http://idarktech.com/test/lightbox_website_test.html

    Just add this code between the head tags of that page e.g. <head> </head>. You can adjust 600px to something you prefer so it fits exaclty on your needs.

    Get back to us if this doesn't help. Thanks!

  • Profile Image
    kubinyi
    Answered on December 18, 2012 at 06:57 PM

    The height change takes effect fine but it still won't scroll on an ipad, even your test page has the same issue. I'm thinking perhaps going back to the iframe solution, I will have to think about it a little, it would be nice if your light box implementation worked like other implementations where they auto adjust relative to the screen/window size and don't use a static width and height.

    I'll test this some more.

    Thanks,

    George

  • Profile Image
    idarktech
    Answered on December 18, 2012 at 07:58 PM

    Hi,

    Thanks for the updates, George. Me too, I'd still prefer iframe embed code instead since it will probably work best on mobile devices.

    Feel free to update us here so we can help you further on this matter. Thanks!

  • Profile Image
    kubinyi
    Answered on December 18, 2012 at 08:23 PM

    No luck, even with the suggested iframe option:

    <iframe allowtransparency="true" src="//form.jotform.us/form/23496240289157" frameborder="0" style="width:100%; height:5886px; border:none;" scrolling="yes"></iframe>

    This won't scroll on the iPad either. However I agree with the comment that the real issue is with my WP theme, I tested another iframe content and that would not scroll either. I might need to optimize this site for mobile platforms, although for the time being a quick hack would be useful.

    Thanks,

    George

  • Profile Image
    idarktech
    Answered on December 18, 2012 at 08:50 PM

    Hi George,

    You are right. Your theme scrollbar isn't viewable on iPad emulators either, that would be the problem. How about using pop-up embed code? It's on the Embed Form wizard. Try and let us know how it goes. Thanks!

  • Profile Image
    kubinyi
    Answered on December 23, 2012 at 02:37 PM

    The pop-up works fine. Now I just want to add some logic where it used the pop-up on the mobile platform only.

    Thanks,

    George

  • Profile Image
    jonathan
    Answered on December 23, 2012 at 03:23 PM

    Hi George,

    Please try using this guide -- Conditional-Logic-on-Forms to add logic choices with the pop-up option.

    What I see you can do is put a a link to the pop-up and non pop-up option in the registration page to allow the form user to have an option depending on which platform is being utilized at the time.

    Hope this help. Please inform us if you require further assistance on this.

    Thanks.

  • Profile Image
    kubinyi
    Answered on December 24, 2012 at 12:45 AM

    Yes that would work too, but I implemented a more elegant solution. I use a wp plugin that let's you add php code to your posts and pages, so in my page I added the logic to check if the platform is mobile and if it is I display only the link with the pop-up option otherwise I diplay the lightbox option, this seems to be working great, tested it on iPad and iPhone so far no issues. I could have also added the same logic to my theme's code however this seemed easier and I actually like the php code embedded in the page.

    Thanks,

    George