What code can I use to deactivate the zoom in on my phone when I focus on the form (text input) elements in Webflow?

To prevent mobile zoom (especially on iPhones) when focusing on text input fields in your Webflow forms, you need to adjust the viewport meta tag to eliminate zooming.

​

1. Use Viewport Meta Tag with user-scalable=no

• Webflow includes a default viewport tag, but you can override it using custom code in the Page settings.
• Go to Page Settings > Custom Code > Head and insert the following line:

​

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

​

• This disables pinch-to-zoom and input field zoom on mobile devices.

​

2. Set Font Size to At Least 16px

• iPhones automatically zoom in on inputs with font sizes smaller than 16px. To avoid this:
• Select each input field in Webflow.
• In the Style panel, set Font Size ≥ 16px.

​

• You can use Webflow’s class system to apply a font size of 16px or higher to all text inputs and textareas.

​

3. Optionally Use Webflow’s Global Custom CSS

• If you want a global rule for all form inputs, go to Project Settings > Custom Code > Head and add this inside a <style> tag:

​

  <style> input, textarea { font-size: 16px; } </style>

​

• This ensures no input has a font size lower than 16px.

​

Summary

To prevent zooming when focusing on form fields on mobile:

• Use a viewport meta tag with user-scalable=no.
• Ensure all input and textarea font sizes are 16px or larger.
• Optionally, apply a global CSS rule as a safeguard.