How can I remove the success message from a form in Webflow without deleting the entire form or making it permanently display none?

Published on
September 22, 2023

To remove the success message from a form in Webflow without deleting the entire form or making it permanently display none, you can use custom code and a little bit of JavaScript. Here's how you can achieve this:

  1. Open your Webflow project and navigate to the page containing the form you want to modify.
  2. Select the form element on the canvas or in the Navigator panel.
  3. In the Settings Panel, click on "Settings" and make sure the "Form Success State" checkbox is selected.
  4. Go to the Custom Code tab in the project settings.
  5. In the Header Code section, add the following CSS code:
<style>  .w-form-done {    display: none;  }</style>
  1. In the Footer Code section, add the following JavaScript code:
<script>  document.addEventListener('DOMContentLoaded', function() {    var form = document.getElementsByClassName('w-form')[0];    form.addEventListener('submit', function(event) {      var successMessage = form.getElementsByClassName('w-form-done')[0];      successMessage.style.display = 'none';    });  });</script>
  1. Publish or update your project.

This code will hide the success message element whenever a form is submitted. By default, Webflow will display the success message using the ".w-form-done" class, so we are using custom code to override its behavior and hiding it upon submission.

Keep in mind that if Webflow updates its form element structure or class names, this code may no longer work as intended. Double-check the class names and adjust the code accordingly to ensure it functions properly.

Additional Questions:

  1. How do I customize the success message in a Webflow form?
  2. Can I modify the error message style in a Webflow form?
  3. What other form-related customizations can I make in Webflow?