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.

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';
});

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.

How to Keep a Form’s Height After Submission in Webflow

Example

The script

Variant: set the height on the wrapper

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

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials