How can I redirect to the default Webflow success message after submitting a form using a third-party form processor during site export?
TL;DR
- Use JavaScript to mimic Webflow's success message by capturing form submissions, processing them with a third-party service, and displaying the success message through a success callback.
- Insert the JavaScript script in your site's exported code to prevent default actions and handle form events accordingly.
When you want to redirect to the default Webflow success message after using a third-party form processor during a site export, follow these steps:
1. Understand the Default Success Behavior
- Default Behavior: Webflow provides a success message by default upon form submission when using their hosting. When exporting the site, this must be mimicked manually.
2. Use JavaScript for Redirection
- Custom Script: You'll need to implement custom JavaScript to display the Webflow success message after the form is processed by the third-party service.
- Add JS Script: Insert the script in the
<head>or just before the closing</body>tag in your exported code.
3. Capture Form Submission Event
- Prevent Default Action: Use JavaScript to prevent the default form submission and instead handle it with your custom script.
- Form Event Listener: Add an event listener to your form to capture the submission event and process it through the third-party service.
4. Redirect Upon Successful Submission
- Success Callback: In your JavaScript, after successfully submitting the form data to the third-party service, program a redirect to or an invocation of the success message.
- Show Success Message: Find the Webflow success message container and programmatically show it, mimicking Webflow's default behavior.
Summary
To display the Webflow success message after form submission when using a third-party form processor on an exported site, implement and customize a JavaScript solution. This involves capturing the form's submit event, processing data with the third-party, and then displaying the success message using a success callback.
