What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Disable auto zoom on iPhone without restricting user zooming

    Asked by tokyopubcrawl on March 23, 2016 at 02:45 AM

    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?

     

    Without ios stop a
  • Profile Image
    JotForm Support

    Answered by Charlie on March 23, 2016 at 04:02 AM

    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.

  • Profile Image

    Answered by tokyopubcrawl on March 23, 2016 at 04:13 AM

    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.

     

     

     

  • Profile Image
    JotForm Support

    Answered by Charlie on March 23, 2016 at 04:44 AM

    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.