You're trying to show the success message below the form inputs instead of replacing the form with the message, which is Webflow’s default behavior.
.w-form-done
) after submission.form
, success
, and error
.To achieve the desired behavior, you need to stop Webflow’s default state switch and manually control the visibility using JavaScript.
Insert the following custom code into Page Settings > Before
tag or an Embed element:
<script> document.addEventListener('DOMContentLoaded', function() { const form = document.querySelector('form'); const success = document.querySelector('.w-form-done'); if (!form || !success) return; form.addEventListener('submit', function(e) { const observer = new MutationObserver((mutations, obs) => { if (success && getComputedStyle(success).display !== 'none') { // Prevent form from being hidden form.style.display = 'block'; // Ensure success message stays visible success.style.display = 'block'; obs.disconnect(); // stop observer } }); observer.observe(form.parentElement, { childList: true, subtree: true }); }); });</script>
display: block
and any styling you want (e.g., margin-top)..w-form-done
becomes visible via script, it appears beneath the form.To avoid layout glitches:
.w-form-done
to display: none
by default and let the Webflow logic + custom code control when it shows.position: absolute
on success/error states unless intentional).To show the Success Message below the form inputs, add custom JavaScript that stops Webflow from hiding the form on submission and manually makes the .w-form-done
state visible. Use Designer to position the success message element below your form inputs.