Jul 6, 2022
Back to all Elements
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:
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>
.png)
Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...
Convert the Workspaces dropdown to an open sidebar with custom order.
A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.
.png)
Automatically insert the current year to any element with the class of 'year'
).png)
