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

    How to make my form to scroll on mobile?

    Asked by CaravanAirportTransportation 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. 

    Page URL:
    http://www.caravanairporttransportation.com/reservation.html

  • Profile Image
    JotForm Support

    Answered by guilledutra 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

    Answered by CaravanAirportTransportation 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

    Answered by khrisell 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

    Answered by CaravanAirportTransportation 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
    JotForm Support

    Answered by EltonCris 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

    Answered by CaravanAirportTransportation 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

    Answered by EliezerN 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