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?

You can hide a Webflow form on submission and display a confirmation div using the built-in Webflow interactions. Here's how.

​

1. Set Up Your Webflow Form and Confirmation Div

• Ensure your form and confirmation div are already designed and added to your project.
• Ensure your confirmation div is set to "Display: None" initially in the styles panel to keep it hidden until triggered.

​

2. Add an Interaction to the Form Element

• Select your form element in the Designer.
• Go to the Interactions panel on the right.
• Create a new interaction named "Form Submit."

​

3. Define the Form Submission Interaction

• Choose the interaction type "Mouse Click (Tap)" for the form.
• Under the (First Click) section, add a new animation.
• Set the form's display property to "None" to hide the form.
• Target the confirmation div, set its display to "Block" (or whatever display setting you'd like).

​

4. Fine-Tune Display Settings

• Set a timer if needed within the interaction to have a smooth transition between hiding the form and showing the confirmation div.
• Utilize easing options to make transitions look more natural.

​

5. Test the Interaction

• Publish your project.
• Submit the form to ensure that it hides and the confirmation div displays as intended.

​

Summary

By using Webflow's interactive tools, you can toggle visibility between your form and a confirmation div upon submission without needing to involve custom JavaScript, ensuring a smooth user experience.