How to Keep a Form’s Height After Submission in Webflow
Learn how to prevent layout shift after a Webflow form submission by keeping its height fixed with JavaScript.
In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to avoid layout shift when a Webflow form success message replaces the form.
Example
The script
Add this script to the body. It stores the form height before submission and applies it to the success message container.
Variant: set the height on the wrapper
If your form sits inside a specific container, apply the height to that container instead of the success message:
Example
Conclusion
A small UX detail that avoids an annoying visual jump after submission. See also: customize the success message.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.






.avif)








