How to disable zooming in when entering text into my form? (Mobile)

Site URL: https://www.kanbeeapp.com/kanbee-earlyaccess-signup-banking-app

On the mobile version of our website, whenever we click on the form to write email it zooms in.  How do we prevent this? 

When this zooming happens what mobile device are you on? Brand? OS? OS version?

I suspect this could be a behaviour specific to the mobile device/OS and might be harder to eliminate.

I'm using an iPhone.  There is no zoom when I fill out forms on other websites, making me think it's not a mobile device issue. 

The issue is apparently a feature of iPhone, iOS, Safari. Please see...

Prevent iOS from zooming in on input fields

How To Prevent iPhone/iOS Devices From Zooming on Input Forms

Disable Auto Zoom in Input “Text” tag - Safari on iPhone

I'm not endorsing any of the fixes here. From what little I read no one had a real fix. Just workarounds all with various tradeoffs. I also don't know if they can be applied to a SS site.

Just tried these and not working, strange that this only happens on my website and doesn't zoom for other websites.  There's no custom css fix for this? 

Have you solved this yet?

Not yet, still zooming in on the form 

Bump, can anyone think of a solution?

I just had a lead tell me they had this "issue" with the form zoom in on their phone. I'd also be interested in a way to prevent this. I tried this on my iPhone on a Wordpress site I built with Gravity Forms, and there is no zoom in. I understand it may be a feature of iPhone or iOS, but there's either something with Squarespace forms that trigger this zoom in effect, or others like Gravity Forms that prevents it.

Actually just found a solution on this page: https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/

I went with the meta tag solution. I placed the meta tag on the page settings with the contact form I wanted to fix, in the Advanced area -> Header code injection.

Just enter in:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>

hi! can you show me where exactly you placed this code on your site? i tried putting it in the Custom CSS section under Design, and it doesnt work. 

ok i found the place where you insert the code, but it's still not working for the mobile view of my lightbox. when i click into the lightbox button, the form pops up, then as soon as i click the first text box, the keyboard still covers half of the lightbox so i cannot finish the form. any suggestions?

On 12/17/2020 at 9:19 AM, tuanphan said:

Have you solved this yet?

Any idea how I can avoid the input field zoom-in on iphones? This is the page - https://www.lighterbrighteryou.life/contact My client says she is unable to see the bottom two fields and the Submit button in any form, but it is working perfectly fine on my phone and I cannot figure out the problem @tuanphan Thank you!

On 4/17/2021 at 11:38 PM, switch1 said:

hi! can you show me where exactly you placed this code on your site? i tried putting it in the Custom CSS section under Design, and it doesnt work. 

Settings > Advanced > Code Injection > Header

On 4/18/2021 at 8:03 PM, amritanan said:

Any idea how I can avoid the input field zoom-in on iphones? This is the page - https://www.lighterbrighteryou.life/contact My client says she is unable to see the bottom two fields and the Submit button in any form, but it is working perfectly fine on my phone and I cannot figure out the problem @tuanphan Thank you!

It looks fine on my iPhone. Try adding the code I posted above. Maybe they have zoom/larger text for accessibility on their phone which is making everything look larger for them? Maybe that's causing an issue. Otherwise, looks find, I can see the submit button, but it still zooms in, so try the code above.

On 4/17/2021 at 12:44 PM, switch1 said:

ok i found the place where you insert the code, but it's still not working for the mobile view of my lightbox. when i click into the lightbox button, the form pops up, then as soon as i click the first text box, the keyboard still covers half of the lightbox so i cannot finish the form. any suggestions?

The solution I posted is for the standard forms, not the lightbox versions. Not sure how to solve it for the lightbox forms. You can try the standard form with the solution I posted and see if that's better than what you have now.

On 5/18/2021 at 12:09 PM, Millermore said:

The solution I posted is for the standard forms, not the lightbox versions. Not sure how to solve it for the lightbox forms. You can try the standard form with the solution I posted and see if that's better than what you have now.

Hey, thanks! So Squarespace confirmed that the bottom fields and the Submit button was not displaying on lightbox forms on that particluar iphone model due to a bug - and not iphone's auto zoom as I originally thought. I don't know if they have fixed it yet, but I switched to a standard form on the page. 

Hi guys, the best hack for this is to make your input text 16px, cheers.

On 2/15/2022 at 7:20 AM, Johndoe1 said:

Hi guys, the best hack for this is to make your input text 16px, cheers.

Thanks so much Johndoe1... works like a charm (even for forms within the Lightbox plugin I'm using)!  😄 

Shifting to 16px worked a treat