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
- Use sticky positioning instead of fixed for footers or buttons to respect keyboard-triggered viewport changes.
- Avoid 100vh; use min-height: 100vh or 100dvh and enable scrolling on page/body elements.
- Wrap forms in scrollable divs with max-height and overflow: auto, and test on real devices to ensure correct behavior across browsers.
When using forms on mobile in Webflow, the on-screen keyboard can push layout elements out of view, especially on iOS or smaller Android screens. This is a common UX issue due to how mobile browsers handle viewport resizing.
1. Use a Sticky Footer Instead of Fixed
- If your form button or footer is position: fixed, consider changing it to position: sticky.
- Sticky elements respect the viewport resizing when the keyboard appears, while fixed elements do not adjust dynamically.
- Set the container where the sticky element lives to have space and padding so it behaves properly within scrollable bounds.
2. Avoid 100vh Height for Sections
- Using 100vh on mobile devices can cause layout issues because mobile browsers interpret 100vh differently when the keyboard appears.
- Instead, use
height: autoormin-height: 100vhin combination with padding bottom to accommodate space. - You can use custom CSS via Webflow Embed component to set
min-height: 100dvh(wheredvhis a dynamic viewport unit), but browser support may vary.
3. Enable Scroll on the Page
- If your page has scrolling disabled (
overflow: hiddenon the body or main div), the keyboard can’t push the content up properly. - Ensure that the body and main containers have
overflow: autoor default.
4. Wrap Form with a Scrollable Div
- Wrap your form and input fields in a div block with
overflow: autoandmax-heightset to something reasonable. - This allows the form content to scroll appropriately as the keyboard pushes into view.
5. Avoid Using Webflow Interactions that Restrict Scrolling
- Check for any Webflow interactions that disable scrolling, such as when a modal or form appears.
- Disable these interactions or conditionally toggle them off on mobile devices.
6. Test on Real Devices and Browsers
- Use actual mobile devices or browser dev tools in responsive mode and test for iOS Safari and Chrome Android.
- Behaviors can vary between device/browser combinations, and adjustments may be required for each.
Summary
To fix mobile keyboard layout issues in Webflow forms: avoid fixed positioning, don’t use 100vh, enable scrolling, and wrap the form in a scrollable container. Use sticky instead of fixed and test across devices to ensure proper keyboard behavior.