Signature Field is no longer mobile responsive

  • Profile Image
    buildingpicks
    Asked on May 29, 2020 at 05:38 PM

    Hi. I created a few forms to use on mobile and everything looked and performed great on the simulator but when I tried them out on my mobile they perform really bad. They zoom in every time I answer a question and then I have to zoom out to keep moving on the form, etc. Is there a way to make forms more mobile friendly? I'm currently using Formstack with all my forms and looking for a better alternative to them.

    Thanks,

    Lucia Gracia

  • Profile Image
    EltonCris
    Answered on May 29, 2020 at 09:19 PM

    Sorry about that. I checked your form and found out that the signature field in your form doesn't seem to automatically fit on mobile. To fix it, please inject this CSS code to your form.

    .signature-line.signature-wrapper {

        width: 100% !important;

    }

    Guide: How to Inject Custom CSS Codes

    I'll also escalate this to our developers so they could fix this on the backend for a permanent solution. Thanks!

  • Profile Image
    buildingpicks
    Answered on June 02, 2020 at 02:15 PM

    Hi Elton,

    Thanks for your response. I inserted the CSS code you sent but I'm still having the same problem. I also tried reducing the signature in half and even the form width but nothing worked. Is there anything else I could do to fix it? I'm loving your platform but this is definitely a deal breaker. 

    Thanks,

    Lucy

  • Profile Image
    Kevin_G
    Answered on June 02, 2020 at 04:37 PM

    I have been checking your form on a real mobile device and it seems like the signature displays correctly with the injected code: 

    1591130170Screenshot_2020-06-02-14-32-56

    We have also escalated this to our back-end team so in the meantime, I'm afraid we are subject to their response, we will however keep you updated via this ticket. 

    Thanks. 

  • Profile Image
    buildingpicks
    Answered on June 02, 2020 at 05:06 PM

    Hi Kevin. The issue was not that the signature field was not displaying correctly but that when you fill the form, the screen zooms in, move sideways, etc. and then you have to zoom out to move and re center the form to be able to see the whole form and move to other questions. Your team mate was the one that suggested that the signature field was not formatted for mobile and that this was the cause of my issue. The form as it is now makes it very hard to fill it on mobile, which is a feature I need. When I try my form on the simulator, the form performs great without this issue. As I mentioned, I'm looking for a better alternative to Formstack but if this has no solution then Jotform is not going to work out for me. Let me know if you can see what I'm talking about and if this can be fixed. Thanks.

  • Profile Image
    buildingpicks
    Answered on June 02, 2020 at 05:23 PM

    And actually, I don't think the signature field has nothing to do with it. I just removed it and I'm still having the same problem. Looks more like the form is not designed to work on mobile. Can you confirm?

  • Profile Image
    EltonCris
    Answered on June 02, 2020 at 06:40 PM

    I think I got what you mean, we will check this further and get back to you with a solution. We'll let you know here.

  • Profile Image
    buildingpicks
    Answered on June 02, 2020 at 06:41 PM

    Thanks Elton! I'll wait for your response.

  • Profile Image
    EltonCris
    Answered on June 02, 2020 at 06:55 PM

    Please try injecting this CSS code to your form. This should fix it.

    @media screen and (-webkit-min-device-pixel-ratio: 0) {

    select, input, textarea,

    select:focus, textarea:focus, input:focus,

    select:active, textarea:active, input:active{

            font-size: 16px !important;

        }

    }

    This should prevent auto-zoom when you enter a value on a field specially dropdown.

    Here's my test on an actual iPhone device.

    Please let us know how this goes. Thanks!