How can I hide a form in Webflow on submit and display a confirmation div without interfering with the standard Webflow form JavaScript and without knowing JavaScript?
TL;DR
- Use Webflow’s built-in Success Message element to automatically hide the form and display a confirmation after submission.
- Customize the Success Message within the form block as desired—no JavaScript or custom interactions needed.
You want to hide the form element and show a confirmation message after submission in Webflow, without writing custom JavaScript. Webflow's native form system supports this approach through built-in features.
1. Use Webflow’s Native Form Success Message
- Webflow forms come with a built-in success message element that appears once the form is submitted.
- By default, Webflow hides the form and shows this element once submission is successful.
2. Set Up the Success and Error Messages
- Select your form in the Webflow Designer.
- Inside the form block, you should see two hidden divs: Success and Error.
- Webflow automatically toggles visibility for these:
- Success is shown on successful submission.
- Error is shown if submission fails.
3. Customize the Success Message
- Select the Success Message element.
- Add your desired confirmation text or design here (e.g., “Thanks for contacting us!”).
- Style it as needed.
4. Ensure Correct Structure
- Double-check that you haven’t accidentally removed or renamed these auto-generated elements.
- The structure should look like:
- Form Block
- Form
- Success
- Error
5. No JavaScript Needed
- Do not add custom interactions or scripts to fade or hide/show the form on submit.
- Webflow already handles form state changes with its built-in JavaScript silently in the background.
Summary
To hide a Webflow form on submit and show a confirmation, use the built-in Success Message element inside the form block. Style and customize it directly—no JavaScript or custom interactions are required.