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

    Drag and Drop Upload widget set to show submit button when filled using condition not working on mobile phones

    Asked by kidhowren on May 06, 2016 at 03:38 PM

    I've looked up past support topics on this and haven't been able to figure out to get my forms to work on my iPhone 6s. I don't have a website to embed this in, and I've tried the Mobile widget and adding some of the code that you guys suggested in those help topics. Every time I open it in a mobile browser, not only is the form cut off, but when you upload a file it never gives you a submit option and nothing happens. 

    Page URL:
    https://form.jotform.com/61266081729156

    Mobile mobile browser drag and drop upload widgets file upload multiple allow multiple conditions submit button show hide CSS media screen mobile res
  • Profile Image
    JotForm Support

    Answered by Mike_G on May 06, 2016 at 06:02 PM

    It seems that the "Drag and Drop Upload widget" is not working with the "condition" on your form when on mobile. I believe it is because, if you will notice, it changed from the original widget's interface to a regular File Upload field when on mobile. And since "Drag and Drop widget" has the "Begin Upload" button that is not showing on mobile, there is no way to complete the upload to consider the widget being filled and show the submit button.

    However, I think the workaround I created below might be useful to you.

    1. Add a File Upload field to the form and enable its "Allow Multiple" option.

    2. Set the File Upload field to hidden.

    3. Update the condition on your form. It should be: "If Upload(Drag and Drop Upload widget) or(ANY) Upload(File Upload) is filled, show Submit button."

    4. Then, add the CSS code below hide the Upload(Drag and Drop Upload widget) when on mobile and show the Upload(File Upload field).

    Here's a guide on How-to-Inject-Custom-CSS-Codes

    @media screen and (max-width: 480px), screen and (max-width: 768px) and (orientation: portrait), screen and (max-width: 415px) and (orientation: landscape){

    .form-all:before{

           background-size: 520px 216px !important;

    }

    #id_1{

    display:none !important;

    }

    .always-hidden {

        display: inline !important;

    }

    }

    The CSS code above would also fix your issue with the cut background image of your form header. Also, the CSS code above would hide the "Drag and Drop Upload" widget on mobile view and will show the "File Upload" field instead. The drawback of this workaround is that you will have 2 Upload fields shown on your submission page.

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 06, 2016 at 06:22 PM

    By the way, you may want to check/inspect the form I have used for testing.

    https://form.jotform.com/61266642718965

    Feel free to clone it so you may check it better. 

    Thank you.