Can successful form submissions in Webflow be redirected to another page for further instructions or can the content within the "form wrapper" be replaced after successful submission?
TL;DR
- Use the Form Settings panel to set a Redirect URL for navigating users to another page after submission.
- Customize the Success Message block within the form wrapper to replace form content on the same page after submission.
- For advanced effects, use custom JavaScript with the onsubmit event to modify content dynamically (paid plans required).
Yes, Webflow allows both redirecting to another page and replacing form content after a successful form submission.
1. Set a Redirect URL After Form Submission
- Go to your Webflow project, and open the page with the form.
- Select the Form Block, then open the Settings panel (D key).
- In the Form Settings, find the Redirect URL field.
- Enter the full URL or relative path to the page you want users to land on after submitting the form (e.g.,
/thank-you). - This will automatically redirect users to the new page upon successful form submission.
2. Replace Form Content Dynamically After Submission
Webflow also replaces the form with a success message inside the same form wrapper.
- Every Webflow form includes a Form Wrapper, a Success Message block, and an optional Error Message block.
- You can customize the Success Message to display further instructions without navigating away from the page.
- To edit the Success Message:
- Select the form, then look inside the form wrapper for the Success Block.
- Add any text, images, buttons or links you want users to see after they submit the form.
- Webflow will automatically hide the form and show the success block once submission is successful.
3. Use Custom Code for Advanced Replacement
If you want more control (e.g., replace only part of the form wrapper, or animate the transition):
- Add custom JavaScript via an Embed element inside your page.
- Use the Webflow form
onsubmitevent to detect submission and then dynamically modify content. - Note: This approach requires using Webflow’s Custom Code features, only available on paid hosting plans.
Summary
You can either redirect the user to another page using Webflow’s built-in Redirect URL, or replace form content with a success message within the same page. Both methods are supported natively and require no external plugins.
