Change Form Redirect URL depending on option selected in form

Design help Custom code
1

Hi,

I’m using a Webflow form to submit customer signup details to a Google Adwords agency. In this signup - the customer picks a monthly plan and a monthly spend. The form is submitted and the customer is redirected to an external subscription service where they submit their credit card details for payment.

The redirect to the external service needs to be dynamic - depending on their selection of plan and ad spend - it will redirect to a different subscription signup URL. I’ve been able to use javascript to change the form “redirect” url. However, even though the form redirect URL has been changed, it still redirects to the original form redirect URL i…e the redirect URL which was there when the page loaded. It seems that the redirect url which is specified on page load, is the URL which is used regardless of if it’s changed or not after page load.

Can anybody help with this or has anyone any other suggestions on how i can achieve this dynamic redirect?

I can change the form action dynamically using javascript so I was thinking about using an external form service and creating a separate form handler (i.e. a separate form action URL) for each option. However, this would mean making 20 separate form handlers so I’m slow to do this.

Any help or ideas would be greatly appreciated.

1 Like
2

You’ll have to clear the Webflow form redirect field and custom code the redirect part.

3

Ok. Any idea how to custom code the redirect path?

4

This is the function you’ll need to use to detect the form submission

.ajaxComplete() | jQuery API Documentation

From there just piece together the URL and set window.location to the URL.

5

Did anyone manage to create a working solution for this? :thinking:

6

Nope! Would be nice if someone could help with it…

1 Like
7

This should work, add it to your page custom code. Replace the relevant ID’s and select box value(s).

<script>
	$('#Signup-Form').submit(function() {

		if ($('#plan').val() == 'plan-gold-package') {
	  
		  setTimeout(function() {
		    location.href = 'https://www.somewebsite.com?plan=' + $('#plan').val();
		  }, 100);


		} 

	});
</script>
2 Likes
8

Nice! Thanks for that

9

This custom code does not stop the consumption of the monthly Webflow form submission quota btw…

10

In this instance, I still wanted the form submission :slight_smile:

However, I did find an issue were the redirect would fire before the form submission was processed (which caused a form error but still redirected). So I increased the delay, which seems to have fixed the issue.

11

You can also use ajaxComplete, so you won’t have to rely on a fixed duration.

1 Like
12

Hi Alex,

I try to get this to work on my own site, but I’m stuck…

I have the feeling the value of the form coming from the radiobuttons is somehow not being passed?

I want to have a different redirect URL based on the option selected as radiobutton

https://peacock-letter.webflow.io/mailchimp-test

13

@samliew Can this work with using the order id from a checkout page as a parameter when constructing the redirect URL?

1 Like
14

Modified code to redirect based on two dropdown choices:

<script>
Webflow.push(function(){
$("#form-id").submit(function(){
	doc = document.getElementById("field-id").value;
	if (doc == 'choice-1') {
        setTimeout(function() {
            location.href = 'link-1';
        }, 100);
		}
    else{
    	setTimeout(function() {
            location.href = 'link-2';
        }, 100);
    }

	})});
</script>
15

For me, It’s not Submitting the data, is there any way to submit the data in forms + redirect to another page based on dropdown selection?

16

Hi @samliew, this was the solution I tried to implement originally i.e. leaving redirect control with Webflow and just dynamically updating the form attributes with the redirect link

Any reason this shouldn’t work?

As you can see from my reply on that thread, it no longer seems to work…

17

@dhpwd Did you try my solution to use ajaxComplete instead? That should still work

18

I did, it worked :slight_smile:

Asking just in case you had any insight into why the other solution doesn’t work – feels like it should!

Thanks

19

Because the other solution wasn’t the right way to do it in the first place, and Webflow patched it.

1 Like
20

Hi, I couldn’t find the full solution. Could you please post full code sample on how to to it with dynamic filed (url coming from CMS)

Thank you very much!