How can I make my Webflow form block's success state display itself with the form elements still visible and the success message below it? I have done this in the past through custom code but can't find it now.

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.

1. Understand How Webflow Success States Work

• By default, Webflow hides the form block and displays only the success message (.w-form-done) after submission.
• Webflow uses JavaScript to toggle visibility of different states: form, success, and error.

2. Use Custom JavaScript to Prevent Form From Hiding

To achieve the desired behavior, you need to stop Webflow’s default state switch and manually control the visibility using JavaScript.

3. Add Custom Code to Override Default Behavior

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>

4. Adjust Layout for Visual Placement

• In Webflow Designer, drag the "Success Message" block below the form block (still within the form wrapper).
• Set the Success Message block to display: block and any styling you want (e.g., margin-top).
• This ensures when .w-form-done becomes visible via script, it appears beneath the form.

5. Optional: Tweak Visibility Styling

To avoid layout glitches:

• Set .w-form-done to display: none by default and let the Webflow logic + custom code control when it shows.
• Ensure form states don't have conflicting styles (e.g., avoid using position: absolute on success/error states unless intentional).

Summary

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.