Jotform Cards- Mobile Spacing

  • Profile Image
    AdminRSCM
    Asked on February 16, 2018 at 08:59 AM

    Is there a way to reduce the space on a tablet or mobile device so that there isn't a whole lot of empty space below and above this logo.


    http://m2p.417.myftpupload.com/furniture-request/

  • Profile Image
    Richie_P
    Answered on February 16, 2018 at 10:59 AM

    May I suggest changing your height of your IFrame to less than 640px; However, by doing so, it will also affect your full view.

    Try adding this css codes to your IFrame code:

    padding-top: 100px;
        padding-bottom: 10px;
        margin-top: -100px;

    Let us know how it goes.

  • Profile Image
    AdminRSCM
    Answered on February 19, 2018 at 08:45 AM

    I'm using a script to place this on the landing page.

    Looking at the iframe code, this looks different than the iframe code you have above?


    <iframe id="JotFormIFrame-80383355258158" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" src="https://form.jotform.com/80383355258158" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-80383355258158"); 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; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); 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>

  • Profile Image
    Richie_P
    Answered on February 19, 2018 at 10:06 AM

    The code I have given above is with the custom css already.

    Kindly try to insert the custom css in your IFrame code, after scolling="no" padding-top: 100px; padding-bottom: 10px; margin-top: -100px;.

    padding-top: 100px;
        padding-bottom: 10px;
        margin-top: -100px;

    Let us know how it goes.

  • Profile Image
    AdminRSCM
    Answered on February 20, 2018 at 09:07 AM

    i didn't notice a difference?

    please take a look.

    http://m2p.417.myftpupload.com/furniture-request/


    Also, how can I remove the form title from displaying?

  • Profile Image
    Richie_P
    Answered on February 20, 2018 at 10:29 AM

    Kindly edit your Iframe code inside your website after you paste it. The inline css codes I have given is not saved in your website.


    Unfortunately, we cannot remove the title from displaying.

  • Profile Image
    AdminRSCM
    Answered on February 20, 2018 at 10:48 AM

    is there a way to force the fullwidth of the jotform card within my container? Instead of selecting the fullwidth double arrows, it is already full width?


    like so?1519141713Screen Shot 2018-02-20 at 10.41519141722Screen Shot 2018-02-20 at 10.4

  • Profile Image
    Richie_P
    Answered on February 20, 2018 at 11:37 AM

    When you embed your form, you can enable FULLSCREEN.

    Currently, your fullscreen feature is with your website and not with your form.

    Please let us know if we can be of further assistance.

  • Profile Image
    AdminRSCM
    Answered on February 20, 2018 at 01:32 PM

    what does this mean exactly? Currently, your fullscreen feature is with your website and not with your form.

  • Profile Image
    Kevin_G
    Answered on February 20, 2018 at 02:11 PM

    Full screen mode works for forms as well, if you enable it the form will enter on full screen as soon as the user starts filling our the form. 

    Example: 

    15191538611.gif

    I hope  this helps. 

  • Profile Image
    AdminRSCM
    Answered on February 20, 2018 at 02:20 PM

    ok so i dont want fullscreen. Just fullwidth within  my website container- after hitting on the double arrows. There is no way to make it fullwidth automatically?

  • Profile Image
    Richie_P
    Answered on February 20, 2018 at 02:40 PM

    Unfortunately, that functionality is with your website builder. The given space for your form is small and the only way to increase the width, is when you edit your website css. Also, the card form, will not really fit with the full screen as it is a card form.

    Hope this information helps.

    Please let us know if we can be of further assistance.