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

    My forms work on most platforms, but do not scroll properly on mobile devices

    Asked by Simon Wood on May 12, 2015 at 06:46 AM

    I have been trying to id a problem some customers have experienced. They tell me they can't scroll down my form so they send can't fill in lower boxes and/or see the submit button. I amended the design and ensured the section containing the code was at "the front" of the page design. So far as I can tell this only affects mobile devices. I have today tried removing items from the footer. Can you help? For years these forms have worked with little problem.

    I use iWeb to generate the website

    Page URL:
    http://www.millhousecaravan.co.uk/Enquiry.html

    My Forms Mobile devices
  • Profile Image
    JotForm Support

    Answered by Boris on May 12, 2015 at 08:06 AM

    Hello Simon.

    I think I've found the issue. On the above page, you are using an iFrame widget, and a JotForm form is embedded inside the widget's iframe. So the structure that you have looks like this:

    Your page > widget iFrame > JotForm iFrame (dynamically created by JavaScript) > form.

    Our dynamically created (JotForm) iFrame is designed in such a way that it would dynamically resize itself as you change screen sizes. That is why it has scrolling="no" attribute, as it would normally resize itself with a script.

    However, as it is inside another (widget) iFrame that also has scrolling="no" attribute. Our iFrame sees that outer iFrame as a browser window - and that outer iFrame also has a fixed width and height set to it.

    What I would recommend is that you edit this page of yours that is used as the widget iFrame:

    http://www.millhousecaravan.co.uk/Enquiry_files/widget3_markup.html

    And change from using our JS embed code to an iFrame embed.

    You can read here on how to get your form's iFrame code: http://www.jotform.com/help/148-How-to-get-your-Form-s-Iframe-Code

    It is also very important that you now manually edit the scrolling="no" attribute into scrolling="auto" of your iFrame embed code. Example of what you would change:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/2562926785" frameborder="0" style="width:100%; height:962px; 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;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Please try this solution out and let us know how it goes. We'd love to get this issue resolved for you.

    Kind regards.

  • Profile Image

    Answered by woodyskw on May 12, 2015 at 09:32 AM

    Thanks for your speedy response.

     

    I have changed the embed code to iFrame on the Jotform website.

     

    I then copy & pasted the provided Jotform code into my HTML Snippet Widget on iWeb.

     

    I then adjusted the code within the widget replacing NO with AUTO for scrolling.

     

    That didn’t seem to work so I followed the link you provided http://www.jotform.com/help/148-How-to-get-your-Form-s-Iframe-Code

     

    This seems to suggest setting an absolute height for the form?

     

    On iWeb the height of the box the form is in is 850px so I’ve altered the Jotform generated code to reflect this.

     

    That doesn’t appear to have changed the problem.

     

     

    Has it anything to do with the Design function of the form itself on the Jotform website?

     

  • Profile Image
    JotForm Support

    Answered by Boris on May 12, 2015 at 10:22 AM

    I'm sorry that it didn't fix the problem for you.

    I don't believe that it is related to the JotForm Designer, since your form is responsive and scrollable when accessed directly: http://www.jotform.co/form/2562926785/

    I have another idea - can you please try removing your form's top and bottom padding? You can do this by injecting the following custom CSS into your form:

    .jotform-form {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    You can add the code by either following this guide, or by going to the Designer and pasting it into the textbox under the CSS tab.

    Please let us know if this helps with the issue.

  • Profile Image

    Answered by woodyskw on May 12, 2015 at 11:38 AM

    Thanks again - still seems to be an issue - have cleared the cache on my phone and rechecked?

     

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 12, 2015 at 01:32 PM

    So I've taken a look at this on my end where I found I'm able to confirm there is still an issue with it as you mentioned still..

    On my computer I noticed your form appears fine but on my iPhone 6 is where I could see the very obvious mobile issue.

    Mobile Problem:

     

    Because of the fact that this works on your website and not mobile this leads me to believe this is likely more of a site issue and not a problem with the form itself. Additionally, if you look at the standalone version of your form on mobile you'll notice that you can see and use everything with no problems all the way to bhe bottom of it with the submit showing.

     

    Anyhow though, You may want to check and see if the mobile hosting and site service you are using has any mobile site page tools to enable which might help. According to my findings you appear to be using 1&1 it looks like.

    When you intially embedded it I recall you said you are using iWeb. Did you try using our iWeb Method with the provided code?

    If you and that did work you could alternatively try the iframe again but this time only attempt it with just what's between the "<iframe></iframe>" and leave out the script part since there might be a possible conflict as a possible alternative suggestion.

  • Profile Image

    Answered by woodyskw on May 12, 2015 at 03:10 PM

    Thanks for all the advice, used the iWeb method which I hadn't seen before but this didn't work. I called 1&1 but they were not very interested in helping only in selling me something! I went back to iWeb and duplicated my enquiry page and then worked on making adjustments to the widget frame size and the page height and this does seem to have at least worked although it may spoil the look in some browsers - I will check to see. At least I am no longer causing my potential customers too much frustration! Thanks again - great response from Jotform crew!

  • Profile Image

    Answered by Ben on May 12, 2015 at 04:17 PM

    Thank you for the update and in my colleagues' name you are welcome. Do let us know if it has any further issues and we will check it out for you.