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

    Unable to scroll down on the form on the website when using mobile phone browser

    Asked by SparkyA4 on April 27, 2014 at 07:27 AM

    Good morning, I have used one of your forms on my website which i developed via Moonfruit http://www.harryssandwich.com

     

    When conecting to the site via a mobile phone I am unable to scroll down the order form........

     

    Could you kindly give me some advice on how to access the full form via a mobile phone?

     

    Kind Regards

     

     

    Jeff Sparke

    Page URL:
    http://www.harryssandwich.com/

    Mobile scroll mobile device order form site
  • Profile Image
    JotForm Support

    Answered by NeilVicente on April 27, 2014 at 07:36 AM

    Hello Jeff,

    I tested your site on my Android phone using Chrome browser and I was able to see your order form and scroll through the page.

    May I ask which browser/device you are using to view this form?

  • Profile Image

    Answered by SparkyA4 on April 27, 2014 at 08:21 AM
    New response receivedHi Neil
    Via my IPhone i am using Google...........
    Kind Regards
    Jeff
    ...
  • Profile Image
    JotForm Support

    Answered by BrianPaulo on April 27, 2014 at 12:21 PM

    Hello SparkyA4,

    I've tested your form using my iPhone, you were right, it won't scroll if you view the form embeded on your website. I've tested to open your stand alone form and it scrolled without any problem. Se below:

    I went and checked your source code and I found out that you embeded your form using the embed option. Is there a way you can try the iFrame option? See below:

    Please let us know if this fixed the problem.

    Bryan

  • Profile Image

    Answered by SparkyA4 on April 27, 2014 at 02:31 PM
    New response receivedHi Bryan
    I have tried the IFrame although it is coming up with
    “Width and Height tags detected! Resize to 100x1968”
    When i do this by pressing yes, I end up with the Order Form compressed to the left hand showing partial text, although it does show more of the text via my IPhone although still no scroll bar....
    I have left the form this way for you to see what I mean......
    Any further advice / help is appreciated
    Kind Regards
    Jeff
    ...
  • Profile Image

    Answered by kimotomaina on April 27, 2014 at 02:37 PM

    Hi SparkyA4.

    Have you tried including

    scrolling="yes"
    To youriframe code?
  • Profile Image

    Answered by SparkyA4 on April 27, 2014 at 02:41 PM
    New response receivedWhereabouts in the code would I put that?
    ...
  • Profile Image
    JotForm Support

    Answered by BrianPaulo on April 27, 2014 at 03:02 PM

    SparkyA4,

    You can add the scrolling="yes" right after the <iframe tag e.g. <iframe scrolling="yes"

    Let us know once your code was updated so we can also test it from our end.

    Bryan

  • Profile Image
    JotForm Support

    Answered by BrianPaulo on April 27, 2014 at 03:10 PM

    SpakyA4,

    I've checked your iframe code and scrolling is set to "no". Kindly checked the iframe code before embeding it to your website. Locate the one that says "scrolling='no'". It is located almost at the end of the code. See image below:

    Let us now once changed.

    Bryan

  • Profile Image

    Answered by SparkyA4 on April 27, 2014 at 03:21 PM
    New response receivedHi Bryan
    Below is the script I have placed into the website, although it has not changed anything on my iphone........ also the image on the Laptop is missing the majority of the text.......
    I am sorry to be such a pain
    Kind Regards
    Jeff


    ...
  • Profile Image
    JotForm Support

    Answered by BrianPaulo on April 27, 2014 at 03:46 PM

    Hello Jeff,

    Looks like your form's iframe is located inside another iframe. Kindly set the other iframe's width to "800px". Is there a way you can embed your form outside of that iframe? If not, try to use the source code option instead of iframe.

    Bryan

  • Profile Image

    Answered by SparkyA4 on April 27, 2014 at 04:11 PM
    New response receivedHi again Bryan.......
    I have used the Source Code option, all is well now as for the Laptop version although the same is happening with the mobile device in that it is cut short at the last Bread Type listing with no scroll bar....
    Kind Regards
    Jeff
    ...
  • Profile Image
    JotForm Support

    Answered by BrianPaulo on April 27, 2014 at 04:32 PM

    Jeff,

    Looks like there was an issue with iOS re iframes. I would suggest you embed your form outside the iFrame instead.

    You can read more about iframe problems on iOS here.

    Bryan

     

  • Profile Image

    Answered by SparkyA4 on April 27, 2014 at 04:51 PM
    New response receivedSorry Bryan, i am not a computer wizard so a little confused as to what you are suggesting??
    Am I to use another source code to enable the form so that I may scroll down via an IPhone (5S) or is the I Frame the only source code that can be used with mobile devices?
    I am off to bed now so catch up with you tomorrow.....
    Kind Regards
    Jeff
    ...
  • Profile Image
    JotForm Support

    Answered by BrianPaulo on April 27, 2014 at 05:02 PM

    Jeff,

    Can you please try to insert this code? I am hoping that by injecting some styling on the iframe, it would fix the problem. I've seen some users that said it worked for them:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//secure.jotformeu.com/form/40682834619361" frameborder="0" style="width:100%; height:2107px; border:none; -webkit-overflow-scrolling: touch !important; overflow: scroll !important;" scrolling="yes"></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>

    Let us know if this one works.

    Bryan

  • Profile Image

    Answered by SparkyA4 on April 28, 2014 at 03:01 AM
    New response receivedHi Bryan.....................
    Thanks for the new script, unfortunately when i insert it, the width reduces to 100, having then moved the width to 800 and height to 833, i end up with two scroll bars to the right on the Laptop although the status quo is preserved on a mobile device in that i am unable to scroll the order form down.......
    Thanks again for your help, i await your reply, this is a really teaser
    Kind Regards
    Jeff
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on April 28, 2014 at 05:48 AM

    Hi Jeff,

    When I checked the form in your website http://www.harryssandwich.com/order/4583251171 even using my Chrome desktop browser, I was able to seen the not so good looking dual scrollbars...

     

    And when viewed using iphone browser, there is no scroll bar, and the form is cut-off half-way and cannot be scrolled down

     

    --

    To fix this problem, I suggest you first review this thread

    -How-to-make-the-form-mobile-responsive

    To make the form respond to mobile browsers, you need to inject custom CSS codes to the form.

    Guide: -How-to-Inject-Custom-CSS-Codes

    Please follow this steps to start fixing the form on mobile browser.

    1. Remove the current embedded form in your website

    2. Edit your form in the form builder

    3. Copy the CSS codes from here http://pastie.org/9119198

    4. And paste or inject the copied CSS code to your form. (follow this guide on how to)

    5. Save the form.

    6. Get the iframe embed code of the form (use this guide)

    7. Using the iframe code copied on step #6, 

    8. Re-embed the form to your website using the iframe code.

    9. Check your website and go the order form -- all using mobile browser.

    This should fix the problem.

    Please inform us if it does not, or if you encounter any difficulty following the instruction.

    I actually did this on a test form, and when I viewed it on an iphone mobile simulator, I was able to view the whole form and allow scrolling down

     

    Thanks!

     

     

     

     

  • Profile Image

    Answered by SparkyA4 on April 28, 2014 at 02:21 PM
    New response receivedHi Jonathan......
    I gave it a go although its not worked.......
    Am i correct in that you place the CSS Code : -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    .form-all {
    width: 320px !important;
    }
    .form-line {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    }


    To the preferences section, saved changes, copied I Frames Code pasting this to the HMLT Snippit 1on my web sight, applied changes, in doing this the width of the Form reduces to the left cutting the majority of the text out, also I am unable to scroll down on the mobile device
    Any more advice would be appreciated
    Kind Regards
    Jeff
    ...
  • Profile Image
    JotForm Support

    Answered by TitusN on April 28, 2014 at 04:44 PM

    Hello Jeff,

    First - how does your form from its original link look like on your Iphone?

    I expect it should work and behave as expectecd - kindly confirm.

    If the above is true, then we need to troubleshoot your webpage, and how best to embed your form on moonfruit

    I ran quite a number of tests - and this is what I finally came up with: http://titondoka.moonfruit.com/contact/4584254818

    The reason why you see multiple scrollbars is because:

    1. The HTML snippet on Moonfruit works with Iframes - and the Iframe on Moonfruit is always equipped with a scrollbar

    2. Your form which you created with Jotform also has scrollbars - or at least needs them to show the entire form on a mobile device -otherwise the scroll crops away parts of the form.

    I am currently running more tests on attempting to resolve the issue:

    1. Ensure that your whole form is resized in a mobile screen

    2. Remove the duplicate scrollbars

    3. Ensure the form can scroll all the way to the bottom

    I will respond.

  • Profile Image
    JotForm Support

    Answered by TitusN on April 28, 2014 at 05:13 PM

    I forgot to mention that the test website contains a copy of your form, and not the original -

  • Profile Image
    JotForm Support

    Answered by TitusN on May 09, 2014 at 09:06 AM

    All my tests were quite frustrating - sorry this took so long.

    Would you consider increasing your page height to match that of the form?