Jotform not responsive, have tried everything please advise

  • Profile Image
    production10mm
    Asked on January 18, 2018 at 06: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.gif


    please advise

  • Profile Image
    John_Benson
    Answered on January 18, 2018 at 08:38 PM

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

    15163258953113czcz.png

    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.

  • Profile Image
    production10mm
    Answered on January 19, 2018 at 09: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.gif


    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

  • Profile Image
    TREVON
    Answered 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.



  • Profile Image
    production10mm
    Answered 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.png

    ~thanks!

  • Profile Image
    Nik_C
    Answered 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.15

    You could also try with this code:

    <iframe id="JotFormIFrame-61035926824154" onload="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!


  • Profile Image
    production10mm
    Answered on January 22, 2018 at 02:23 PM

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

  • Profile Image
    John_Benson
    Answered on January 22, 2018 at 02: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.