CRO / Conversion3 min read
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
Submit the form: the height stays stable after sending
| Problem | Cause | Solution |
|---|---|---|
| Layout shifts after submission | Success message is shorter than the form | Set the height before submitting |
| Content below jumps up | Block height changes | Set a minimum height on the container |
| CTA floats in empty space | Space freed up by the form | Same fix |
The script
Add this script to the body. It stores the form height before submission and applies it to the success message container.
document.querySelectorAll('.w-form').forEach(function(wForm) {
var form = wForm.querySelector('form');
var success = wForm.querySelector('.w-form-done');
if (!form || !success) return;
form.addEventListener('submit', function() {
var h = form.offsetHeight;
setTimeout(function() {
success.style.minHeight = h + 'px';
}, 100);
});
});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:
document.querySelectorAll('.form-wrapper').forEach(function(wrapper) {
var form = wrapper.querySelector('form');
if (!form) return;
wrapper.style.minHeight = form.offsetHeight + 'px';
});Example
Submit the form: the height stays stable after sending
Conclusion
A small UX detail that avoids an annoying visual jump after submission. See also: customize the success message.


