Jul 6, 2022
White Arrow icon
Back to all Elements

Maintain Form Height on Success

Using a little bit of jQuery to adjust the success message height

When we submit a Webflow form, and we want to keep the Success message height same as the form's, we usually give an absolute height to both or the parent. With this short snippet, we can leave the height property on 'Auto' so everything is responsive and fluid.

We 'bind' the 3 events that are relevant into one function:

  • Load - when the page load
  • Resize - If the user resizes the screen
  • Submit - When the form is submitted

On each of these events we find the height of the form element, and save it as a variable. Then we take this number and apply it to the sibling 'success' element.

Using the 'form' HTML tag, and the '.w-form-done' class inside the 'each' jQuery function, assures that this will work for each form on our page.

<script>
 $(window).bind("load resize submit",function(e){
   $('form').each(function() {
     var formHeight = $(this).height();
     $(this).siblings('.w-form-done').css({'min-height': formHeight});
   });
 });
</script>

Copy

Preview:

Share:

Try avoiding using "Transition: All". It is heavy on the browser's engine.

Might also interest you:

Webflow Dashboard Workspaces Hack

Webflow UI Hack
Code
CSS

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
White Arrow icon

Dynamic Height

Code
Tricks
JavaScript

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
White Arrow icon

Auto get Current Year

Cloneable
Code
JavaScript

Automatically insert the current year to any element with the class of 'year'

Read more
White Arrow icon