What is the current JS solution in Webflow to catch successful form submissions and redirect to a custom link with query parameters?
- Add JavaScript under Before </body> tag in Custom Code settings of Webflow.
- Use JavaScript to prevent default form submission, collect form data, build query parameters, and redirect to a specified URL.
- Publish your site and test the redirect functionality.
To redirect users to a custom link with query parameters after a successful form submission in Webflow, you can use a JavaScript solution. Below is a guide on how to achieve this.
1. Add Custom Code in Page or Site Settings
- Go to Project Settings in your Webflow dashboard.
- Navigate to the Custom Code section.
- Insert the following JavaScript within the Before </body> tag section of your page settings or site settings if you want this to apply globally.
2. Implement JavaScript Code
- Use this JavaScript snippet to catch the form submission event and redirect:
- ```javascript
<script>
document.addEventListener('DOMContentLoaded', function () {
const form = document.querySelector('form');
form.addEventListener('submit', function (e) {
e.preventDefault(); // Prevent default Webflow form submission
// Perform any validations or actions here
const formData = new FormData(form);
const params = new URLSearchParams();
// Loop through formData and append it to URLSearchParams
for (const pair of formData.entries()) {
params.append(pair[0], pair[1]);
}
// Redirect to custom link with query parameters
window.location.href = https://your-custom-url.com?${params.toString()};
});
});
</script>
```
- Replace
https://your-custom-url.comwith the desired destination URL.
3. Publish Your Site
- After adding the code, publish your site to see the changes take effect.
4. Test the Functionality
- Test the form on the live site to ensure the redirect works as expected and query parameters are correctly appended.
Summary
To redirect users to a custom URL with query parameters on successful form submissions in Webflow, insert a JavaScript code snippet in the Before </body> tag section. This script listens for form submissions, extracts input data, constructs query parameters, and redirects the user accordingly. Ensure to replace the placeholder URL with your actual target link.