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
- Modify the Webflow Success Message to contain your confirmation content.
- Set the Form Block to
Display: Blockand the Success Message toDisplay: None. - Use Webflow Interactions: On form submission, set the form to
Display: Noneand the success message toDisplay: Block. - No custom JavaScript needed; Webflow's built-in interactions handle the transition.
To hide a Webflow form after submission and display a confirmation div, follow these steps without interfering with Webflow's built-in form handling.
1. Add a Confirmation Message
- In the Webflow Designer, locate your form.
- Inside the form block, you’ll see a Success Message (by default, this is hidden until the form is successfully submitted).
- Modify this success message to include your confirmation content.
2. Hide the Form After Submission
- Select your form wrapper (the
<form>element itself). - In the Style panel → Layout, set
Display: Block. - Click the Success Message inside the form and set
Display: None(this is the default behavior in Webflow).
3. Use Webflow’s Built-in Interactions to Hide the Form
- Select the Form Block.
- Go to the Interactions panel and click Element trigger → Form Submission.
- Under Affect, choose the form itself.
- Select Hide/Show and set it to Display: None.
- Select the Success Message and add another Hide/Show action, setting it to Display: Block.
Summary
You can achieve this behavior without custom JavaScript by using Webflow's built-in Success Message and Form Submission Interactions. When the form is submitted, it automatically hides and only the success message is displayed.