Signature Field is no longer mobile responsive

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

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!

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

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

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. 

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.

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?

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.

Thanks Elton! I'll wait for your response.

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!