How can I fix the issue with the form in Webflow where the keyboard pushes the content up and out of the screen on mobile devices?
TL;DR
- Avoid using
height: 100vh; instead, usemin-height: 100vhwith bottom padding to prevent layout issues. - Set overflow on containers to
autoorvisible, avoidoverflow: hidden. - Change fixed or absolute bottom elements to
relative,sticky, or add extra bottom padding. - Add 100px–200px of
padding-bottomon mobile to ensure fields/buttons aren’t hidden by the keyboard. - Use viewport units with caution, as mobile keyboards affect the viewport size.
- Test on real devices, as behavior varies between iOS and Android.
When a Webflow form on mobile causes content to be pushed up or off-screen after the keyboard opens, it's typically due to fixed height elements, absolute positioning, or overflow settings not adapting to the mobile viewport.
1. Avoid Fixed Heights on Containers
- Do not use
height: 100vhon sections or containers that include forms. - Mobile browsers subtract space for the on-screen keyboard, so 100vh can exceed the usable screen area.
- Use
min-height: 100vhwith padding-bottom instead to allow content to grow as needed.
2. Use Overflow Auto or Visible
- On the parent container (body or section around the form), set
Overflow: AutoorVisible. - Avoid
Overflow: Hiddenas it can prevent users from scrolling to see content hidden behind the keyboard.
3. Avoid Absolute/Fix Positioned Elements Near the Bottom
- Elements like buttons or footers with
position: fixedto bottom: 0px can be pushed off-screen. - Change their position to
relativeorsticky, or give them generous bottom padding so they're not hidden when the keyboard appears.
4. Add Bottom Padding to Form Sections
- Add a
padding-bottomof 100px–200px on mobile breakpoints to give extra space below the form. - This allows users to scroll up and reveal fields or buttons obscured by the keyboard.
5. Use Viewport Units Carefully
- Avoid using viewport units (e.g.,
100vh) for layout or modal sizing on mobile. - The height of the viewport changes when the keyboard appears, which can cause layout jumps.
6. Test with Different Devices
- Different mobile OSs handle keyboard overlays differently:
- iOS tends to resize the viewport.
- Android may overlay the keyboard on top.
- Use Webflow’s mobile preview and real device testing to refine behavior based on actual user experience.
Summary
To fix mobile form layout issues caused by the keyboard, avoid 100vh heights, adjust overflow settings, and add bottom padding to allow scrollable space. These changes ensure your form remains usable even when the keyboard appears.
