My forms wont display and function properly when displayed in the mobile version of our site?

  • ptn0301
    Asked on September 15, 2014 at 12:38 PM

    My forms wont display and function properly when displayed in the mobile version of our site?

    form embedded here http://www.skyemotion.co.uk/apply-now.html however its turned off as we wont get any submissions....

    Been here before but its necessary to have a mobile site now so this must be resolved otherwise we will have seek alternative...

     

    Regards

  • David JotForm Support
    Replied on September 15, 2014 at 1:55 PM

    Hi,

    I checked your site on a Galaxy S4 and everything appears to be working properly on mobile:

    My forms wont display and function properly when displayed in the mobile version of our site? Image 1 Screenshot 20

    If you are still having trouble viewing your form in mobile, you can try adding the mobile responsive widget:

    http://widgets.jotform.com/app/mobile_responsive

    If that still does not work, let us know and we will be happy to see what else we can find.

  • ptn0301
    Replied on September 16, 2014 at 3:44 AM

    Hi David

    As I said in original post I have had to turn off the mobile version of our site 'because' the form doesn't function properly. Its currently in the desktop version due to the form not working properly.

    Its currently using a iframe code generated by jotform.

    Regards

     

    Paul

  • jedcadorna
    Replied on September 16, 2014 at 6:49 AM

    Hi Paul,

    Just create a test page where you can enable mobile and embed the form in an iframe method so we can test it on our end and identify what is causing the issue. Just leave your live page as is we'll be troubleshooting the problem when you have the test page created.

    We'll be waiting for your response.

  • ptn0301
    Replied on September 16, 2014 at 8:27 AM

    Hi

    We have now added the widget that make the form function better with a mobile device and its improved but still a bit clunky.

    The site is in mobile mode so can be viewed with a mobile device. 

    Also . . . 

    When someone presses the submit button on a mobile device, we need the the screen to scroll up to missing/empty fields to make it clear to a user the element that missing. ???????

    Thanks

  • jedcadorna
    Replied on September 16, 2014 at 10:12 AM

    Not sure which part of submitting process is having issue. I tried submitting your form but I didn't encounter the part where you have to scroll for missing fields.

    My forms wont display and function properly when displayed in the mobile version of our site? Image 1 Screenshot 30

    Or do you mean that you have to scroll up if user gets an error? If what you want is to automatically scroll up when page is submitted please try to remove the tag in iframe embed code. Just leave the iframe tag.

    My forms wont display and function properly when displayed in the mobile version of our site? Image 2 Screenshot 41

  • ptn0301
    Replied on September 16, 2014 at 10:36 AM

    Hi

    I currenltly have embedded the below:

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

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

     

    Do I remove everything betweeen the script tags? eg all between '<script type="text/javascript . . . . . . . . . handleIFrameMessage);}</script>'

     

     

  • David JotForm Support
    Replied on September 16, 2014 at 10:57 AM

    Correct, exactly how you have separated it, the second part should be removed.  From script tag to script tag.  Only:

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

    Should be left for the workaround suggested.