Form is not mobile friendly

  • mktaxi
    Asked on February 4, 2016 at 9:49 PM

    Hello,

    Thanks for supplying this amazing form builder. I have been using it for quite a while now and I want you to know that your hard work is really appreciated.

    I have some problem setting up the form to be mobile friendly. Some of the widgets don't shrink and the form appears to be very thin on the left side of the mobile screen. Could you assist?

     

    Thank you in advance!

    Lili

  • Chriistian Jotform Support
    Replied on February 5, 2016 at 3:04 AM

    Thank you for your kind words. You can add the Mobile Responsive Widget to make your form mobile responsive.

    http://widgets.jotform.com/widget/mobile_responsive

    Form is not mobile friendly Image 1 Screenshot 20

     

  • mktaxi
    Replied on February 7, 2016 at 8:17 PM

    Thank you for your answer. Unfortunately the problem is not solved yet, however the form looks better...

    Form is not mobile friendly Image 1 Screenshot 30Form is not mobile friendly Image 2 Screenshot 41

  • Chriistian Jotform Support
    Replied on February 7, 2016 at 10:03 PM

    I am currently checking your form. Please allow me to further check the issue. I will get back to you as soon as I get a result.

  • Chriistian Jotform Support
    Replied on February 7, 2016 at 10:32 PM

    Please try to inject this custom CSS code in your form and see if it will fix the issue:

    @media screen and (max-width: 480px) {

    .form-radio-item, .form-checkbox-item {

        white-space: normal !important;

    }

    .form-radio-item:not(#foo) label {

    text-indent: 40px !important;

    }

    .nicEdit-panelContain {

        width: 78% !important;

    }

    .nicEdit-main {

        width: 77% !important;

    }

    }

     

    To inject custom CSS code in your form, just follow the instructions provided in this article: How to Inject Custom CSS Codes.

     

  • mktaxi
    Replied on February 7, 2016 at 11:30 PM

    Thank you Chriistian. The table and the dividers fit to the screen now but all the other parts of the form appear to be too small..Form is not mobile friendly Image 1 Screenshot 20

  • Chriistian Jotform Support
    Replied on February 8, 2016 at 1:05 AM

    Can you try to add a Mobile Responsive widget in your form and see if it will help?

    Form is not mobile friendly Image 1 Screenshot 20

     

  • mktaxi
    Replied on February 8, 2016 at 1:27 AM

    It's still not responding too well..Form is not mobile friendly Image 1 Screenshot 30Form is not mobile friendly Image 2 Screenshot 41

  • Chriistian Jotform Support
    Replied on February 8, 2016 at 2:55 AM

    Can you try to inject this custom CSS code instead of the CSS code that I have previously provided (replace the previous CSS code)?

    @media screen and (max-width: 480px) {
    .form-radio-item, .form-checkbox-item {
       white-space: normal !important;
    }
    .form-radio-item:not(#foo) label {
    text-indent: 40px !important;
    }
    .form-textarea{
       min-width: 200px !important;
    }
    }

     

    I have tried this on my clone form (https://form.jotform.com/60380982071960) and tested on my mobile device and it seems to be displayed properly. 

    Form is not mobile friendly Image 1 Screenshot 20

  • mktaxi
    Replied on February 8, 2016 at 7:34 PM

    Thanks for the assistance. The form does work properly with Iphone6 but for some misterious reason, not with Iphone 5. We tried 3 Iphone 5 devices and opened the form with google chrome and safari. The result is the same; the form doesn't fit to the screen. When I open the link, the form pops into the right position but by the time the page is fully loaded, the form shrinks back to this version.

     

    Form is not mobile friendly Image 1 Screenshot 30Form is not mobile friendly Image 2 Screenshot 41

  • Chriistian Jotform Support
    Replied on February 8, 2016 at 9:38 PM

    Unfortunately I do not have an iPhone 5 device to test the form. However I tested the form on an iPhone 5 emulator and it seems to appear correctly.

    iPhone 5

    Form is not mobile friendly Image 1 Screenshot 30

     

    iPhone 5s

    Form is not mobile friendly Image 2 Screenshot 41

     

    Please try clearing the browser cache from your iPhone  to see if that helps.

  • mktaxi
    Replied on February 8, 2016 at 9:43 PM

    Oh, this helped! Thank you so much for your patience!!

  • Chriistian Jotform Support
    Replied on February 8, 2016 at 11:06 PM

    I am glad to know that your issue has been resolved. Feel free to contact us again if you have any other concerns.

  • mktaxi
    Replied on February 29, 2016 at 3:42 AM

    Dear Chriistian,

    I have a problem with the mobile view again. I tried injecting the code you provided, updated the browser, cleared the catche, added the mobile friendly widget - nothing works. When I check the mobile view through the "designer" it also shows a problem. Could you please look into it?

    Thank you in advance!

    Lili

     

    https://form.jotform.me/41391289177463

  • Nik_C
    Replied on February 29, 2016 at 5:57 AM

    Hello,

    I reviewed your discussion with my colleague, but I can not see anything wrong either in designer or in the phone. Is the problem the same like before?

    If it's not a big problem, could you provide a screenshot for us to see please?

    We'll wait for your response?

    Thank you,

  • mktaxi
    Replied on March 1, 2016 at 9:32 PM

    Thank you for your response. I noticed that the problem occurred when I opened the form with the link provided by jotform but if I change the word "form" into "www" in the link, the form updates and displays properly. Maybe it was a temporary glitch?

    Thank you! 

  • Nik_C
    Replied on March 2, 2016 at 4:28 AM

    Hello,

    I checked your form again just in case, I couldn't see any problem. So I guess that everything is ok now like you said. Depends how the form is embedded in the website, if you are viewing in that way, or if you view it just like a form, you should see it without any issues by using either www.jotform.me/41391289177463 or just https://form.jotform.me/41391289177463.

    Either way, if you encounter any issues again, do not hesitate to contact us.

    Best regards.