Next button not show or appear in mobile devices?

  • Profile Image
    homesurveygb
    Asked on April 15, 2016 at 12:38 PM

    Hi all.

    I have viewed the form on the iphone and the next (continue) button, doesn't appear.

    I have selected the form to be both 'responsive' and 'non-responsive' but it doesnt work.

    Can you help?

    Cheers

    Rich

  • Profile Image
    Charlie
    Answered on April 15, 2016 at 02:50 PM

    I'm checking your website but it seems like the website itself is not mobile responsive. It looks like it is in desktop version always. 

    Here's a screenshot from my Android device:

     

    Here's on an iPhone device:

     

    It seems like the problem is the autoresizing of the height of the form in your website. Could you try using the iFrame embed code instead? But make sure to adjust the height attribute of the iframe tag to a min-height. Here's a guide on how to get your iFrame embed code: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

    Here's your iFrame embed code as a sample:

     <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/61042621997357" frameborder="0" style="width:100%; min-height:600px; 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; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } if(window.location.href && window.location.href.indexOf("?") > -1) { var ifr = document.getElementById("JotFormIFrame"); var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } </script>

     

    Noticed the code highlighted in yellow? It was changed from height to min-height. Add a min-height that should cover the initial page of the form so that the next and back button won't be hidden, in my case it is set to 600px. You can experiment on the value.

    Let us know if that works.