Disable auto zoom on iPhone without restricting user zooming

Is there a way to stop iOS from auto-zooming into the form, once a user selects the field? This is making the form almost unusable. 

I want to be able to do this without restricting the user's ability to zoom at will on the website. Any suggestions?

Could you please share us the website where the form is? Usually, the zooming allows user to view a certain field or text to be more readable. If the website is mobile responsive, then I believe the form shouldn't zoom because it's on a viewport with an acceptable size.

Here's an example form with the mobile responsive enabled:

It won't zoom because the view is already mobile responsive. You can make your form mobile responsive by following this guide: https://www.jotform.com/help/322-How-To-Make-Mobile-Friendly-Forms-on-JotForm 

If you wish your website to somehow become mobile responsive, perhaps configuring a viewport would work? You can check it here: https://developers.google.com/speed/docs/insights/ConfigureViewport 

I also found a blog tutorial that shows us how to prevent zooming function on a website, here it is: https://davidwalsh.name/zoom-mobile-browsers. Although that is quite an old post and may not be appropriate now because most websites are now mobile responsive.

Let us know if that helps.

You can see an example here:

http://www.tokyopubcrawl.com/events/04-16-2016.html

After clicking the blue "Reserve" button, which opens up a JotForm lightbox.

It is mobile responsive.

I don't want to restrict user scaling on the viewport, because then the user would not be able to zoom on the rest of the page.

I checked your website and it is not mobile responsive, but the form adjust itself based from the parent element where it is placed, displaying itself as a responsive layout.

If the zooming option is disabled, your users won't be able to see the text properly? Would you like your form to display on mobile just like how it is shown in a desktop browser? If you want the text boxes to adjust expand, then you can try disabling the mobile responsive options in your form.

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://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone 

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

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

It seems like the current solution that will work is to increase the font-size to 16px. Or something like this custom CSS code:

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

Great job