Next button not show or appear in mobile devices?

  • 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

  • Charlie
    Replied on April 15, 2016 at 2: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:

    Next button not show or appear in mobile devices? Image 1 Screenshot 30

     

    Here's on an iPhone device:

    Next button not show or appear in mobile devices? Image 2 Screenshot 41

     

    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" onDISABLEDload="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.