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

    Next Back Buttons on Multipage Forms does not work on mobile device

    Asked by iabove on September 18, 2015 at 06:11 PM

    Hi there

     

    I have a developed a form thats 4 pages long and has 'next' and 'back' buttons at the bottom. In the preview these work fine. From a desktop the buttons are inconsistent and often non-responsive. You have to refresh the screen for them to work.

     

    On a mobile device they don't work at all and you can't go past the first page. Touching the button does nothing. Yet it works in the preview when designing the form.

     

    I am using Macbook Pro and a iPhone 6 plus.

     

    Any help or work around would be much appreciated.

    Page URL:
    www.iabove.co.nz

    Mobile mobile device preview next refresh
  • Profile Image
    JotForm Support

    Answered by Boris on September 19, 2015 at 03:50 AM

    I couldn't find any forms on the exact link you've posted, but I've found one on the following page:

    http://www.iabove.co.nz/consent-form.html

    It is a single page form, but I do see a likely cause of the issue for that multipage form if it is embedded elsewhere. I see that you have used our script embed method, and your website also relies on jQuery scripting library which may cause conflicts with scripts of our forms.

    Please try re-embedding your affected form with our iFrame embed method instead, as this will sandbox that form from your website and will prevent scripting conflicts between the page and the form.

    Please let us know how it goes.

  • Profile Image

    Answered by iabove on September 20, 2015 at 09:47 PM
    Hi there
    Thank you for your quick response. I have added the iFrame code and on the desktop it looks great but on a mobile device such as an iPad or iPhone the size isn’t right.
    I see this is a common problem but I don’t know what size it should be to work on everything.
    Applies to both forms.
    http://www.iabove.co.nz/forms.html
    Kind regards

    027 426 6121

    paul@iAbove.co.nz

    www.iAbove.co.nz
    FARM MAPPING / ADVENTURE SPORTS / EMERGENCY RESPONSE
    ...
  • Profile Image

    Answered by iabove on September 20, 2015 at 09:47 PM
    Sorry, just noticed, when I go to ‘preview answers’ I can’t see the bottom of the form there too.

    027 426 6121

    paul@iAbove.co.nz

    www.iAbove.co.nz
    FARM MAPPING / ADVENTURE SPORTS / EMERGENCY RESPONSE
    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 21, 2015 at 07:48 AM

    Hello Paul,

    Can you please inject the following custom css code in your form and see if that solves your problem:

    @media (max-width: 480px) {

    .form-all{

    height: 1275px !important;}

    }

    The following guide should help you how to inject custom css code in form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

     

    Do get back to us if the issue persists.

    Thank you!

  • Profile Image

    Answered by iabove on September 21, 2015 at 07:47 PM
    Hi I have added the code into the custom css code in the form but it still displays differently on the mobile devices than on the desktop.
    The fields are stretched across the width of the page and on the iPad it looks ridiculous. The submit buttons are also stretched across the page.
    Is there anyway to make these in proportion?
    Kind regards

    027 426 6121

    paul@iAbove.co.nz

    www.iAbove.co.nz
    FARM MAPPING / ADVENTURE SPORTS / EMERGENCY RESPONSE
    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 22, 2015 at 01:00 AM

    Hello Paul,

    You see all your form fields stretched because of mobile responsive. The fields will automatically adjust the width based on the device screen size.

    If you do not enable the mobile responsive setting, the fields will not be displayed correctly in mobile devices.

    Do get back to us if you would like to reduce the width of your form fields for mobile view, we will help you with custom css code.

    Thank you!

  • Profile Image

    Answered by iabove on September 22, 2015 at 03:47 AM
    Right ok.
    Yes please, I'd like the form fields to display correctly on the mobile devices. Can you please supply the css codes?
    Kind regards

    027 426 6121

    paul@iAbove.co.nz

    www.iAbove.co.nz

    FARM MAPPING / ADVENTURE SPORTS / EMERGENCY RESPONSE
    ...
  • Profile Image

    Answered by iabove on September 22, 2015 at 03:47 AM
    There is still the issue of unable to see the submit button or back button after viewing the summary on the pre-flight safety form.
    Why is the form doing this?
    Kind regards

    027 426 6121

    paul@iAbove.co.nz

    www.iAbove.co.nz

    FARM MAPPING / ADVENTURE SPORTS / EMERGENCY RESPONSE
    ...
  • Profile Image
    JotForm Support

    Answered by Boris on September 22, 2015 at 06:30 AM

    I believe that you are talking about the height of your form when it is embedded on your website.

    When your website is viewed on a mobile device (phone or tablet), form is not able to fully display - the bottom of the form gets cut off.

    If that is the issue you are asking about, we can make your form display fully even on mobile devices by adding some CSS code to your website itself, and not inside the form.

    @media only screen and (max-width:680px) and (min-width:521px) {
      #JotFormIFrame {
        min-height: 1660px;
      }
    }
    @media only screen and (max-width:520px) {
      #JotFormIFrame {
        min-height: 1560px;
      }
    }

    Once you add that code to your website, it will force the form to have a minimal height that is tall enough to contain the full length of your pre-flight safety form even on mobile devices. Once added to your website, you can also try adjusting the values marked in red to better fit the form on your devices.

    Please let us know how it goes.

  • Profile Image

    Answered by iabove on September 22, 2015 at 08:47 PM
    Ok this is really getting frustrating. It is also frustrating talking to a different person each time. I just want to add these forms to my web page and for it to be viewable on both desktops and mobile devices.
    http://www.iabove.co.nz/forms.html
    There are two major issues.
    1. Both forms display correctly on the desktop. However when displayed on either a mobile phone (iphone) or tablet (ipad) the form is cut off. I understand the mobile responsive option and I have tried turning it on and off but nothing changes. Also having the form fields go right across the display looks stupid.
    I have tried to add the css code sent to me in the webpage itself and this did nothing. Please understand I am not a programmer and have little knowledge about any sort of code.
    2. The second major issue is on the form with multiple pages http://www.iabove.co.nz/pre-flight-safety-assessment-form.html
    I have added the ‘preview answers’ widget on the last page.
    When I click on this I see a summary of the form but can not see the bottom of the form which includes the submit button and back button. The only way to get out of the form is to go right back to the menu. This only seems to apply to the desktop, but at the moment I can’t even get that far on a mobile device because I cant see the next page button.
    Both forms have been embedded using the iFrame code.
    Can someone please fix this so it is useable.
    Kind regards

    027 426 6121

    paul@iAbove.co.nz

    www.iAbove.co.nz
    FARM MAPPING / ADVENTURE SPORTS / EMERGENCY RESPONSE
    ...
  • Profile Image
    JotForm Founder

    Answered by aytekin on September 23, 2015 at 09:15 AM

    Paul,

    We have opened a bug ticket about this problem. We will work on the problem and get back to you. Unfortunately, our developers are very busy with lots of tasks so it is not possible to say how long this might take. I'd recommend trying Boris's suggestion in the meanwhile.

    Thanks for your patience. 

  • Profile Image

    Answered by iabove on October 11, 2015 at 11:45 PM
    Hi there
    Is there any update with this issue please?
    Kind regards,

    027 426 6121

    paul@iAbove.co.nz

    www.iAbove.co.nz
    FARM MAPPING / ADVENTURE SPORTS / EMERGENCY RESPONSE
    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 12, 2015 at 06:52 AM

    Hello Paul,

    Unfortunately we have not received any update from our back end team yet.

    I did check the bug ticket status and found that one of our developer is already looking into this issue with highest priority. We will get back to you as soon as we have any update form them.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by NicholasWestley on October 13, 2015 at 01:54 AM

    Hi Paul,

    This error has now been fixed.  Apologies for the delay. Please let us know if you continue to have problems.

    Regards,

    Nicholas

  • Profile Image

    Answered by iabove on October 13, 2015 at 07:45 AM
    Hi Nicholas
    There were two issues that I explained. Both are not fixed.
    ...
  • Profile Image
    JotForm Support

    Answered by NicholasWestley on October 13, 2015 at 09:51 AM

    Hi Paul, sorry, I missed your message laying out another two issues. 

    Here are your issues:

    1. Issues with the next/back buttons on mobile when embedded: This is the original error and was the issue I was referring to being fixed earlier

    2. Iframe does not resize when going to "Preview answers" page. I have just fixed this.  You should now see it properly (assuming you remove any extra css styling that you have added)

    3. when displayed on either a mobile phone (iphone) or tablet (ipad) the form is cut off.  Unfortunately I cannot recreate this.  Can you give me a link to where this is happening?  It is happening on an iframe embedded form, is that correct? I cannot recreate it on ipad or iphone

    Thanks a lot,

    Nicholas

  • Profile Image

    Answered by iabove on October 13, 2015 at 07:45 PM
    Hi Nicholas,
    Thank you with your help with this, I really appreciate it.
    Issue 2 is definitely fixed. Issue 1 also appears to work ok.
    Issue 3 is the remaining problem. If you go to my web page to forms, the 'consent form' seems to work fine on a mobile device. The 'pre-flight assessment form' doesn't.
    Here are some screen shots from both an iPhone and iPad.
    I have checked all the css code and both forms seem to be the same, so I don't understand why it is just this form that is the problem.
    Any ideas?
    Kind regards

    027 426 6121

    paul@iAbove.co.nz

    www.iAbove.co.nz

    FARM MAPPING / ADVENTURE SPORTS / EMERGENCY RESPONSE

    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 14, 2015 at 01:15 AM

    Hello Paul,

    As your recent issue is actually a different question, I have moved it to a new thread and you will be answered here: http://www.jotform.com/answers/680930 

    Thank you!