Embedded form jumps to top whenever its clicked on iPhone 6

  • NickDann
    Asked on May 18, 2015 at 11:44 AM

    Hi I've created a custom form to use on a desktop Adobe Muse site which works fine but when I put same form into the phone version it appears correctly but you can't input any detail soon as you try it jumps back to top of page?

    Also the input field appears in white on a white background should be black text on a white background? do you know why this would be?

     

    thanks

  • Elton Support Team Lead
    Replied on May 18, 2015 at 12:42 PM

    Hello,

    I was able to reproduce the jumping issue on mobile when clicking the form. I'm not sure what exactly affects it but I would suggest to try using this iframe embed code only first and see if this helps.

    <iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotformeu.com/form/51104336751346" frameborder="0" style="width: 750px; height: 2715px; border: none;" scrolling="no"></iframe>

    Let us know if it doesn't so we can assist you further. Thanks!

  • NickDann
    Replied on May 20, 2015 at 4:59 AM

    Hi thanks for your prompt response unfortunately it didn't work as soon as you try and input the form jumps back to top of the page?

    thanks

  • Elton Support Team Lead
    Replied on May 20, 2015 at 8:48 AM

    @NickDann 

    I see no changes with your iframe embed code. Did you actually embed it on your page using the code I have provided above? I can still see the iframe code + script in your page. Try it with iframe only (remove the script that is included on the iframe) and inform us here again so we can check your page.

    Also, using the full source code might as well help. Kindly give it a try. http://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

    Please let us know how it goes. Thanks!

  • NickDann
    Replied on May 20, 2015 at 9:01 AM

    I have again put in just the code and still as soon as I go to input the form jumps to top of page?

    Will try source code now thanks

     

  • NickDann
    Replied on May 20, 2015 at 9:09 AM

    Source code worked for main input but the 'country' dropdown caused it to jump to the top of the page again? thanks

  • Elton Support Team Lead
    Replied on May 20, 2015 at 9:55 AM

    @NickDann

    I still see the old embed code on this page http://astonwells01.businesscatalyst.com/index.html. If possible, may we know the page where you have tried the source code and the iframe only code so we can check this in depth?

    Thanks for your cooperation.

  • NickDann
    Replied on May 20, 2015 at 10:08 AM

    I've only put new embed source on the phone version of the site, desktop version is fine as is. If you view the link on a phone it will load phone specific site

     

    thanks

  • raul
    Replied on May 20, 2015 at 10:57 AM

    Thank you for providing this additional information.

    I've inspected your site using an iPhone 6 emulator and I see that you're indeed using the iframe code as suggested, but the page didn't jump to the top on my side even when I changed the country.

    Embedded form jumps to top whenever its clicked on iPhone 6 Image 1 Screenshot 20

    Are you using the iPhone 6 or the iPhone 6 plus? I've tested using the regular iPhone 6.
    Also, can you please try clearing your browser's cache to see if this helps?

    Let us know if the issue persists.

  • Nick Dann
    Replied on May 20, 2015 at 6:26 PM

    im on a 6+ and it still jumps as soon as I select country don't even have to make a selection it just jumps to top of page?

  • Charlie
    Replied on May 20, 2015 at 11:38 PM

    Hi,

    I was able to replicate the problem in an iPhone 6+ emulator. I believe this is something related to one of your scripts, I see you have a couple of scripts loaded in your end. Could you try adding a noconflict jQuery snipped in the <head>? Here's the document you can refer: https://api.jquery.com/jquery.noconflict/.

    After that, you can also try reconfiguring your viewport so that your website can identify the device screen where it is being viewed at. Here's a viewport document you can refer: Configure Viewport

    Another thing that you can try is adding a "?nojump" code at the end of your src link in the embed code. Here's an example:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/51104336751346?nojump" frameborder="0" style="width: 100%; height: 2837px; border: none;" scrolling="no"></iframe>

     

    See if the solutions above helps you resolve the problem.

    Thank you.

  • NickDann
    Replied on May 25, 2015 at 6:14 AM

    Hi,

    I'm not sure where to paste the nojump as if I paste code into iframe the jump is there so I have to paste in source code to stop the jump but then can't see where I should paste the nojump command?

    I am using Muse for thie website so not sure where to change code?

    thanks

  • Charlie
    Replied on May 25, 2015 at 9:54 AM

    I'm not sure if I understand your correctly, are you using the iFrame code or the form's full source code? If you are looking on adding the "?nojump" in the iFrame embed code, you can then just copy and paste the iFrame embed code in a notepad or text editor, find the "src" attribute inside the <iframe> and add the "?nojump" at the end of the link, as shown in my previous post.

    After that, copy again the edited code and use that instead, paste it in your Muse editor. Here's a guide on how to add the form in your Muse: http://www.jotform.com/help/99-Adding-Form-to-Adobe-Muse. But, instead of using the default embed code, you can try using iFrame, see which one works for you.

    If you're using the default embed code, you can add the "?nojump" like this:

    <script type="text/javascript" src="//form.jotformpro.com/jsform/50885628517971?nojump"></script>

     

     

     

  • shawcommunity
    Replied on March 6, 2016 at 11:40 AM