-
homesurveygbAsked 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
-
CharlieReplied 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:
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" 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.