Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Recommended Posts

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Have you solved this yet?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 2 months later...

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.

Link to comment

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"/>
Link to comment
  • 1 month later...

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?

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 5 weeks later...
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.

Link to comment
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.

Link to comment
Posted (edited)
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. 

Edited by amritanan
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...