Removing 'success' window after completing a submission

Design help General
1

I’m currently using a form on my Webflow site, and I want to prevent the success message from appearing after submission. Instead of showing the default “Thank you for your submission” message, I need the form to stay visible so users can continue entering new queries without interruption.

I’ve already tried setting .w-form-done { display: none !important; } in custom code, but the success message still briefly appears before hiding. Is there a built-in setting or workaround within Webflow to fully disable or bypass the success message?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hello @vitaminwater, welcome to the community!

Have you tried giving your success message an opacity of 0?

3

You can use custom CSS to force it open, but it will still contain the content the user previously entered, and it will be a little confusing as to whether it has submitted.

The way I build solutions like this is custom code to control the form UX, plus a custom webhook handler so that I can determine a successful, complete submission. You’re basically fully taking over the form in this situation.

4

Hey @vitaminwater ,

Hope you got your use-case solved. For future readers, you can implement a customized version of this memberscript in order to not show the success message upon form submission and also reset the form so that the user can fill the form again without any issues.

The customized version is as follows:

<!-- 💙 MEMBERSCRIPT #148 v0.1 💙 - DISABLE WEBFLOW FORM SUCCESS WINDOW -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('[ms-code-form="form"]');
    const successEl = document.querySelector('[ms-code-success="true"]');

    if (!form || !successEl) return;

    const observer = new MutationObserver(() => {
      const isVisible = window.getComputedStyle(successEl).display !== 'none';
      if (isVisible) {
        successEl.style.display = 'none';
        form.reset();
        form.style.display = 'block';
      }
    });

    observer.observe(successEl, { attributes: true, attributeFilter: ['style'] });

    form.addEventListener('w-form-success', () => {
      setTimeout(() => {
        observer.disconnect();
      }, 100);
    });
  });
</script>

Hope this helps.

1 Like