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

  • kidhowren
    Asked on May 6, 2016 at 3: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. 

  • Mike_G JotForm Support
    Replied on May 6, 2016 at 6: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.

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

    2. Set the File Upload field to hidden.

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

    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."

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

    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.

  • Mike_G JotForm Support
    Replied on May 6, 2016 at 6: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.