Webflow sync, pageviews & more.
NEW

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
  • Create a Webflow form with uniquely named fields for Plan and Ad Spend, and disable the default form action.
  • Use custom JavaScript to intercept the form submission, capture input values, construct the appropriate redirect URL, and redirect the user dynamically based on their selections.

To create a dynamic redirect after form submission in Webflow based on user selections like plan and ad spend, you’ll need to use custom JavaScript and possibly route the data to an external subscription service via a redirect URL.

1. Use a Webflow Form with Custom Fields

  • Create a Webflow form containing dropdowns, radios, or input fields for Plan and Ad Spend selections.
  • Make sure each field has a unique name attribute (e.g., plan, adSpend) so they can be easily referenced with JavaScript.

2. Disable Default Form Action

  • In Form Settings, leave the Action URL blank to prevent a full page reload or native Webflow success redirect.
  • You’ll be handling form logic via JavaScript.

3. Add Custom JavaScript to Handle Submission

  • Add your script inside Page Settings > Before tag, or use a Site-wide Embed if needed.
  • Use JavaScript to capture the submitted data, evaluate the customer’s selection, and redirect them to the appropriate URL of your external subscription service.

Example logic:

  • If plan = "Pro" and adSpend ≥ $500, go to https://subscription-service.com/pro-high-spend
  • If plan = "Basic", go to https://subscription-service.com/basic

Sample JS outline:

  • Use document.querySelector('form').addEventListener('submit', function(e) { ... })
  • Prevent default form action using e.preventDefault()
  • Use FormData or direct DOM access to get values
  • Build the redirect URL dynamically based on the inputs
  • Use window.location.href = 'your-constructed-url' to redirect

4. Construct and Attach External URLs

  • Map user inputs to pre-defined external subscription URLs.
  • If needed, append user data as query parameters to pass into the external system (e.g., ?plan=pro&spend=500).

5. Test with All Possible Inputs

  • Verify the logic for each possible combination of plan and ad spend leads to the correct target page.
  • Ensure the external system properly handles incoming query parameters or prefilled URL logic.

Summary

Set up a Webflow form that collects Plan and Ad Spend, intercept submission with JavaScript, and use input values to dynamically redirect users to different external subscription URLs based on their selections. This gives you flexible control over redirection behavior while integrating seamlessly with external payment systems.

Rate this answer

Other Webflow Questions