What is the current JS solution in Webflow to catch successful form submissions and redirect to a custom link with query parameters?

To catch successful form submissions in Webflow and redirect to a custom link with query parameters, you will need to utilize custom JavaScript. This allows you to dynamically redirect users based on the form input.

​

1. Add Custom Code to Your Form

• Go to your Webflow project and select the page with the form.
• Find the form element and enter its settings or embed a custom code block just before the closing </body> tag in your page settings.

​

2. Listen for Form Submission

• Use JQuery if it’s enabled in your project. If not, make sure to enable it through your project’s settings.
• Add the following script in the code section:

  ```javascript

  <script>

  $('#yourFormID').submit(function(e) {

    e.preventDefault(); // Prevent default form submission

    // Process form data and construct redirect URL

    let formData = $(this).serialize(); // Serialize form data as query parameters

    let baseUrl = 'https://yourcustomurl.com/redirect'; // Base URL for redirection

    let redirectUrl = ${baseUrl}?${formData}; // Construct full redirect URL

    window.location.href = redirectUrl; // Redirect to the custom URL

  });

  </script>

  ```

• Replace #yourFormID with the actual ID of your form.
• Replace https://yourcustomurl.com/redirect with your desired base URL.

​

3. Save Changes and Publish

• Publish your Webflow site to make sure your changes are live.
• Test the form by submitting it to ensure the redirection works with query parameters.

​

4. Handling Form Validation

• Ensure that form validation is properly set up to only allow the form to submit when all fields are correctly filled out.
• The JavaScript handles capturing the data and redirects, so the validation must ensure only valid submissions go through.

​

Summary

To redirect users upon a successful form submission in Webflow with query parameters, attach a custom JavaScript code block that intercepts the form submission, processes the input data, and redirects to a specified URL. This allows dynamic handling based on form inputs.