How can I use JavaScript in Webflow to make a section disappear and display a success message only if a form submission is successful?

To achieve the functionality of making a section disappear and displaying a success message using JavaScript upon successful form submission in Webflow, follow these steps:

​

1. Add an Embed Code Component

​

• Go to the Designer in your Webflow project.
• Select the page where your form resides.
• Drag an Embed element from the Add Elements panel to the page, preferably below the form.

​

2. Write the JavaScript Code

​

• Inside the Embed element, write JavaScript code to capture the form submission event and manipulate the DOM:
• Use document.querySelector to target the form and the section you want to disappear.
• Add an event listener for the submit event on the form.
• Within the listener, use Webflow's specific form submission event success to check the submission status.
• If successful, set the section's display style to none to hide it and create a new element or modify an existing one to display your success message.

​

3. Example JavaScript Code

​

• Ensure you replace #section-id with your actual section's ID and .w-form-done with the class for the success message.
• Example:

  ```javascript

  // Assuming you have jQuery loaded in your project

  $('.your-webflow-form-class').on('submit', function() {

    var form = $(this);

    form.on('submit:success', function() {

      $('#section-id').css('display', 'none'); // Hide section

      $('.w-form-done').text('Success! Your form has been submitted properly.'); // Show success message

    });

  });

  ```

​

4. Publish and Test

​

• Publish your site to ensure the JavaScript runs in the live environment, as custom code does not execute in the Designer preview.
• Test the form submission to verify that the section disappears and the success message appears only upon successful submission.

​

Summary

​

By adding a custom Embed Code component with JavaScript, you can manipulate Webflow's form submission behavior to hide a section and display a success message when the form is successfully submitted. Make sure to test on the live site as custom code runs only there.