Jotform not responsive, have tried everything please advise

  • production10mm
    Asked on January 18, 2018 at 6:05 PM

    I've tried just about everything I can think of to get this jotform to be responsive, but no matter what when I size down the page below 460px wide it cuts off half of the form with no option for a scroll bar.

    Whats odd is that if I enter the form and hit "tab" then it will scroll through the form just fine, but I cant touch and drag it or scroll through it


    1516316709helphelphelp Screenshot 10


    please advise

  • John_Benson
    Replied on January 18, 2018 at 8:38 PM

    I checked the page URL using my iPhone 6s plus and I was able to replicate the issue.

    15163258953113czcz Screenshot 10

    Please try re-embedding the form using this guide: https://www.jotform.com/help/34-Adding-a-Form-to-a-Web-Page

    Let us know how it goes. 

    Thank you.

  • production10mm
    Replied on January 19, 2018 at 9:26 AM

    I re-added the form first using the standard Js embed code, then the iframe embed code (both solutions ive tried already) and the problem persists. Then I went to "platforms" and tried wordpress.org, no luck. Wordpress.com's made-up [embed][/embed] tag code, however, provided a working fix as you can see below:


    1516371940update Screenshot 10


    But I cant say im totally satisfied with the way this looks. Can you advise on how this could look better, not adjust its width and height so heavily, while retaining this scroll bar?

    ~thanks

  • TREVON
    Replied on January 19, 2018 at 10:58 AM

    Thanks for letting us know you found a solution to the embed issue. Just to understand you better do you need to retain the scroll bar or you want to remove it?

    This is because the reason scroll bars appear is because if a web page is bigger than the allocated display error then scroll bar will need to appear to simplify navigation.

    Also I have seen that the illustration you have use is the control panel display where you can easily adjust the size of the embedded form and it will replicate the same dimensions in the front end.



  • production10mm
    Replied on January 19, 2018 at 11:05 AM

    I want the scroll bars when they're necessary. What im mostly focused on is the weird spacing at these different responsive sizes. From left to right, why isnt the vertical used, why is there this gray box, why is there this gray box?

    1516377934trust technology Screenshot 10

    ~thanks!

  • Nik_C
    Replied on January 19, 2018 at 12:20 PM

    If it is possible, please try editing the embed code you used and set the height to be 655px:

    1516382187Screen Shot 2018 01 19 at 6 Screenshot 10

    You could also try with this code:

    <iframe id="JotFormIFrame-61035926824154" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/61035926824154" frameborder="0" style="width: 1px; min-width: 100%; height:655px; border:none;" scrolling="yes"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-61035926824154"); if(window.location.href && window.location.href.indexOf("?") > -1) { 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; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { 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; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); 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); } </script>

    I adjusted the height and scrolling there.

    Let us know if that worked.

    Thank you!


  • production10mm
    Replied on January 22, 2018 at 2:23 PM

    That bundle of code worked wonderfully, thank you very much!

  • John_Benson
    Replied on January 22, 2018 at 2:25 PM

    Thank you for updating us. We're glad that the issue has now been resolved. 

    On behalf of my colleague, you're welcome. Feel free to create a new thread if you need further assistance.