How to make my form to scroll on mobile?

  • Profile Image
    CaravanAirportTransportation
    Asked on October 07, 2013 at 01:12 PM

    I have been working with iFrame, but cannot seem to figure out how to set the scrolling. Please assist. 

  • Profile Image
    guilledutra
    Answered on October 07, 2013 at 02:10 PM

    Hi,

    after checking the link providing I can see that the iframe scroll has been activated, changing the iframe attribute to "yes" (scrolling="yes") is it right?

    Thanks

  • Profile Image
    CaravanAirportTransportation
    Answered on October 07, 2013 at 06:59 PM
    I suppose I should have been more clear. The scrolling is fine on a computer, but does not appear when using a mobile device. My customers are unable to get to the bottom of my form on iPhones, iPads, or android devices. Please advise.
  • Profile Image
    khrisell
    Answered on October 07, 2013 at 08:04 PM

    Hello,

    You can adjust the iFrame by updating the width and height attributes accordingly to the IFrame tag.

    Kindly use this code to embed it to your form. This is your form's iFrame code. To make the height responsive within a div/container on your web page and I change the height to 100%.. Kindly try to use this if this could fix this issue you are having.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//support.jotform.com/form/31876365380865" frameborder="0" style="width:100%; height:100%; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

     

    If problem persists, kindly let us know so that we could further assist you. 

    Thank you for using JotForm.

  • Profile Image
    CaravanAirportTransportation
    Answered on October 08, 2013 at 02:20 AM
    Thank you for your help, but the code you sent did not work. In fact returned with an error of an invalid code. I have attached a screenshot of the error. I have had to revert to the original embed to not lose the integrity of the form. I was hoping to find a resolution so that my customers could make reservations through their mobile devices, iPad, iPhone, android phones, but so far, I have been unable to resolve this with Jotform. If you have any other ideas, I would love to hear them.
    Thank you again.

    FelixE. Roldan
    CoastalLuxury Limousine
    http://www.coastalluxuruylimos.com
    (541)921-8406 /(541)994-9585
  • Profile Image
    EltonCris
    Answered on October 08, 2013 at 03:51 AM

    Hi FelixE,

    How about making the form fields from mobile view to look just line on the desktop mode? This would make the form length to stay as it is when viewed on mobile.

    Simply inject the following CSS codes to your form.

    @media only screen and (max-device-width: 550px){

    .form-label-left{

    float: left !important;

    display:inline !important;

    }

    .form-line{

    padding-top:8px !important;

    padding-bottom:8px !important;

    }

    }

    Guide: How to Inject Custom CSS Codes to your Form

    Let us know how this goes.

    Regards!

  • Profile Image
    CaravanAirportTransportation
    Answered on October 08, 2013 at 11:04 AM
    Thank you!! With a little tweaking that worked like a charm!

    FelixE. Roldan
    CoastalLuxury Limousine
    http://www.coastalluxuruylimos.com
    (541)921-8406 /(541)994-9585
  • Profile Image
    EliezerN
    Answered on October 08, 2013 at 11:25 AM

    It's good to know that your form is working as you need now. So, in behalf of my colleague let me tell you it's a pleasure to assist you.

    Let us know if you need further assistance on this or open a new thread to make nonrelated questions.

    Thanks