How can I achieve a dynamic redirect for a Webflow form depending on the customer's selection of plan and ad spend, when using an external subscription service for payment?

TL;DR

Disable Webflow’s default redirect and use JavaScript to intercept form submissions.
Read selected Plan and Ad Spend values, then dynamically build and redirect to the appropriate payment URL using window.location.href.

To dynamically redirect users after a Webflow form submission based on their plan and ad spend choices—especially when integrating with an external subscription/payment service—you need to handle the logic with a combination of custom JavaScript and conditional redirects.

1. Set Up Your Webflow Form Correctly

Create a Webflow form with input fields (dropdowns or radio buttons) for Plan and Ad Spend.
Add a Submit button, but instead of relying only on Webflow’s default form submission behavior, you’ll intercept it with JavaScript.

2. Disable Native Webflow Form Redirect

In the form settings, leave the redirect URL blank.
This prevents Webflow from forcing a static redirect and allows your script to dynamically handle it.

3. Add Custom JavaScript to Handle the Redirect

Place your script in the Before </body> section of Page Settings or Site Settings.
Use JavaScript to catch the form submission, read the user’s selections, and redirect accordingly.

Example (simplified):

Identify the form by its id or class.
On submit, prevent the default action.
Based on the Plan and Ad Spend inputs, build a redirect URL such as a payment link for your external service.

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const form = document.querySelector("#your-form-id");
    if (!form) return;

    form.addEventListener("submit", function (e) {
      e.preventDefault();

      const plan = form.querySelector('select[name="plan"]').value;
      const adSpend = form.querySelector('select[name="ad-spend"]').value;

      // Construct dynamic URL (example)
      let redirectURL = "";

      if (plan === "Pro" && adSpend === "500") {
        redirectURL = "https://your-payment-service.com/checkout/pro-500";
      } else if (plan === "Basic" && adSpend === "1000") {
        redirectURL = "https://your-payment-service.com/checkout/basic-1000";
      } else {
        redirectURL = "https://your-payment-service.com/checkout/default";
      }

      // Optional: Send form data to Webflow or a backend before redirecting

      // Redirect the customer
      window.location.href = redirectURL;
    });
  });
</script>

Replace #your-form-id with the actual CSS ID of your form (you can assign one in Webflow Designer).
Customize the redirectURL logic to match your payment service’s URL schema (e.g., Stripe Checkout links, Paddle plan IDs, etc.).

4. Optionally Send Form Data First

If you still want to capture form submissions in Webflow or another backend before redirecting:
Use fetch() to submit the form data to Webflow’s form endpoint or your server.
After confirmation, trigger window.location.href.