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

  • Profile Image
    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

  • Profile Image
    david
    Answered on September 15, 2014 at 01:55 PM

    Hi,

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

    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.

  • Profile Image
    ptn0301
    Answered on September 16, 2014 at 03: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

  • Profile Image
    jedcadorna
    Answered on September 16, 2014 at 06: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.

  • Profile Image
    ptn0301
    Answered on September 16, 2014 at 08: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

  • Profile Image
    jedcadorna
    Answered 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.

    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 thetag in iframe embed code. Just leave the iframe tag.

  • Profile Image
    ptn0301
    Answered on September 16, 2014 at 10:36 AM

    Hi

    I currenltly have embedded the below:

    <iframe id="JotFormIFrame" onload="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>'

     

     

  • Profile Image
    david
    Answered 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" onload="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.