How can I create a mobile compatable form

I am trying to format a form to use on my mobile website.  However when I use it on the mobile and click on a field it zooms into the field and distorts.  Can you help me?

Hello,

Please check this user guide to learn how to create mobile responsive form.

If you need further clarification please do not hesitate to contact us.

Thanks in advance.

Hi thanks for the advice however when I look at my form on an iphone and select a cell it still distorts the form.  Is there a way to stop this?

To view the form go to www.ellisdrivingschool.co.uk on an iphone and select the Contact Us option.

Hi again,

I've checked your form in both Android and iPhone as you can see the screenshots below and I couldn't see any problem:

1. for Android:

2. For iPhone:

Is there a way to stop the cell zooming in when you click on it as has happened on the Iphone screenshot above?

For the zooming functionality, I've searched the web and it looks like it is a common problem on iOS.

Perhaps the links below would help you:

http://uxcellence.com/2014/01/15/quick-fix-increase-font-size-to-16px-to-fix-input-zoom/

http://hallofhavoc.com/2014/07/how-to-prevent-iphoneios-devices-from-zooming-on-input-forms/

http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone

https://davidwalsh.name/zoom-mobile-browsers

It seems like the current solution that will work is to increase the font-size to 16px. 

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

  select,

  textarea,

  input {

    font-size: 16px !important;

  }

}

You can try adding it in your form's CSS tab under the Form Designer Tool. 

See if the above solution works, if not, we'll try to test it further.

Thats nearly got it but it does jump about the page a lot when I select the cells still.

Could you have a further look

Thanks

Martin

Hello Martin,

I did check your webpage where you have embedded your form and found that you have used your form's script embed code. Please note that your form to work correctly on mobile devices, we recommend to embed form using its iFrame embed code. 

I would suggest you to please embed your form using its iFrame embed code and see if it solves your problem. The following guide should help how to grab your form's iFrame embed code:  https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

Do try it out and get back to us if the issue persists.

Thank you!

Hi  I have changed it now to iframe but still get the same problem.  It occurs when I click on the email, where did you hear about us and message fields.

I checked your page and the form still looks to be embedded using the script embed code:

If you wouldn't mind changing it to the iFrame code, we will be happy to have another look.

I think I have done it with the iframe code.  Can you tell me how I can check this on the iPhone? Thanks Martin! 

As far as I can tell, your form is still embedded using the script embed code.  The frame in your post is a different frame than the JotForm iFrame.  You would replace this line of code:

With your forms iFrame code:

https://www.jotform.com/help/148-Getting-the-form-iFrame-code

The line number in your code may be different that in one shown viewing your page source.

Hi David

That is what I am doing to embed the code.  Selecting it, copying and then embedding it. Can you tell me where I am going wrong? Thanks Martin! 

Hello again,

I've checked your form again and it seems like the issue you mentioned above is fixed,no ? The page does not zoom automatically to the text field as you mentioned above. I do not see any problem here. Please see the screenshot to check :

Thank you.