Add

Lorem ipsum

Lorem ipsum

A
A
A
CRO / Conversion

3 views

3 min

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

✓ Message sent! The height didn't move.
ProblemCauseSolution
Layout shifts after submissionSuccess message is shorter than the formSet the height before submitting
Content below jumps upBlock height changesSet a minimum height on the container
CTA floats in empty spaceSpace freed up by the formSame 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';
});

good to know

The 100ms setTimeout delay is necessary because Webflow hides the form and shows the success message asynchronously. Without that delay, offsetHeight is measured after the form is already hidden and returns 0. Increase the delay to 200ms if the shift still happens on slow connections.

Example

Submit the form: the height stays stable after sending

✓ Message sent! The height didn't move.

Conclusion

A small UX detail that avoids an annoying visual jump after submission. See also: customize the success message.

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

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.

Published on

You might be interested in these tutorials

Similar tutorials

SEO / GEO

5 min read

5 views

How to Set Up a Redirect in Webflow? (2026)

Updated on 19.12.2025 by Sandro DA SILVA

SEO / GEO

5 min read

5 views

Add structured data to your Webflow site?

Updated on 21.08.2025 by Sandro DA SILVA

No-code

5 min read

5 views

How to Obfuscate a Link in Webflow

Updated on 23.04.2025 by Sandro DA SILVA

Let’s f*****G GO !!

Ready to launch
Your business?

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

You'll :heart: our collaboration...