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:

browser mockup
Share:
Heart icon

When your bath soap bar gets too small to use, don't throw it away! open the next bar, and when you finish showering, stick the small old bar to the back of the new bar. Onces they both dry, they will become one.

Might also interest you:

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
Blue arrow iconWhite Arrow icon

Auto get Current Year

Cloneable
Code
JavaScript

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

Read more
Blue arrow iconWhite Arrow icon

Scroll Menu to Current Link

Cloneable
CMS
Code

Using JS to scroll a div (menu) to the current link inside.

Read more
Blue arrow iconWhite Arrow icon