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?

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.

5. Test Across Devices and Browsers

• Open your live site and test various combinations of Plan and Ad Spend.
• Ensure the redirect fires correctly and leads to the appropriate checkout link.

Summary

To create a dynamic redirect in Webflow forms based on plan and ad spend:

• Use JavaScript to intercept form submission,
• Read the selection values,
• Generate a dynamic payment URL, and
• Redirect the user manually using window.location.href.

Make sure to disable Webflow's default redirect and test all combinations carefully.