To use JavaScript in Webflow to make a section disappear and display a success message only if a form submission is successful, you can follow these steps:
1. Add a form element to your Webflow page. You can do this by dragging and dropping a "Form" element from the Elements panel.
2. Style the form elements according to your design preferences using Webflow's built-in styling options.
3. Give your form an ID by selecting the form element and adding a unique ID in the Settings panel. For example, you can set the ID to "myForm".
4. Create a new HTML Embed element on your page by dragging and dropping an "HTML Embed" element from the Elements panel.
5. Inside the HTML Embed element, you can write the JavaScript code to handle the form submission.
Here's an example of JavaScript code that you can use within the HTML Embed element:
```javascript
```
In the above code:
- Replace `'YOUR_FORM_SUBMISSION_ENDPOINT'` with the actual endpoint where your form submission data should be sent. This endpoint will receive the form data and process it on the server.
- `'formSection'` and `'successSection'` are placeholder values for the actual IDs or classes of the sections you want to hide/show. Change them accordingly to match your own section IDs or classes.
By using JavaScript in this way, the form submission will be intercepted, and an AJAX request will be sent to your server to handle the form submission. If the form submission is successful, the form section will be hidden, and the success message section will be displayed.
Remember to publish your Webflow site for the JavaScript code to work correctly on the live site.