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
- Define a JavaScript object mapping plan and ad spend combinations to specific redirect URLs.
- Assign unique IDs or names to the form fields for plan and ad spend.
- Add custom JavaScript to listen for form submission, retrieve input values, and redirect users using window.location.href based on the mapping.
- Remove any default redirect set in Webflow to allow full control with your script.
- Test the form with all input combinations to ensure correct redirection.
To implement a dynamic redirect after Webflow form submission based on a user's selected plan and ad spend, especially when using an external subscription/payment service, you’ll need to handle the logic using custom JavaScript.
1. Define Your Redirect Rules
- Identify what combination of plan and ad spend maps to which redirect URL (e.g., checkout pages or pricing tiers).
- Store the redirect URLs in a JavaScript object for easy reference.
Example (inline concept only):
const redirectMap = { "basic_500": "https://pay.example.com/checkout/basic500", "pro_1000": "https://pay.example.com/checkout/pro1000"};2. Add Custom Attributes to Form Fields
- Ensure each form field for plan and ad spend has a unique ID or name (e.g.,
id="plan"andid="adSpend"). - These values will be used by JavaScript to determine the selected options.
3. Add Custom JavaScript in Page Settings
- In Webflow, go to the specific page’s settings or paste the code in Site Settings > Custom Code > Footer.
- Add JavaScript that prevents the default Webflow redirect and manually handles it based on input values.
Sample logic outline:
- Use the
submitevent listener for the form. - Retrieve selected plan and adSpend values from the form.
- Form a key like
plan_adSpendto match a URL in your map. - Use
window.location.href = ...to redirect the user.
4. Disable Webflow's Default Redirect (Optional)
- If a Redirect URL is set in the Webflow form settings, remove it.
- This allows your custom script to fully control redirection.
5. Test Across All Inputs
- Submit the form with various combinations of plan and ad spend.
- Ensure the correct external checkout or subscription page is used for each.
Summary
Build a JavaScript-based post-submit redirect by reading the user's input and mapping it to the correct external payment URL. Disable Webflow’s native redirect and manage it fully with JavaScript based on user selections.