What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Next button not show or appear in mobile devices?

    Asked by homesurveygb 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

    Page URL:
    http://www.homesurvey.co.uk/instant-quote.html

    next button not working selected all and
  • Profile Image
    JotForm Support

    Answered by Charlie 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.