Multiple destination URL's Drop Down


#1

How can you have a drop down with multiple options where each option goes to a specific URL.

I can do this with custom code, but then I cannot track conversions.

Looking for suggestions.

Thanks,


#2

Hi David,

It is possible to do this using an Unbounce form and a bit of custom Javascript. The jQuery Javascript library is already included on the page so I have taken advantage of this in the example I will provide.

The URL that the page goes to after a form submission is stored in a variable that is accessible as:

window.module.lp.form.data.confirmData

You can attach a Javascript event handler to the drop down menu (HTML element) that changes this variable depending on what value is selected by the user.

Here is an example using jQuery’s convenient DOM traversal and event binding support. In this example I am using the pre-set drop down menu for Gender. An id for the element gets generated in Unbounce by down-casing the label name and replacing any spaces with underscores “_”, so keep that in mind when you modify the css selector in the example, which in this case is “select#gender”.

I am using a Javascript object to map the form values to the urls I want the user to be sent to, and then selecting a value from this map using the elements current value as the key. Here is the code:

\<script\>  
jQuery(document).ready(function() {  
jQuery('select#gender').change(function() {  
window.module.lp.form.data.confirmData = ({  
"Male" : "http://unbounce.com/features",  
"Female" : "http://unbounce.com/pricing"  
})[jQuery(this).val()];  
});  
});  
\</script\>  

Your code will need to be placed in the Manage Scripts dialog that is accessible by clicking on the Scripts button in the toolbar. Set the placement to “head”

I hope this helps,

Justin


#3

Opps… Get Satisfaction is not letting me stick in the code example. Ignore that URL to our pricing page, trying again:


#4

Ok, the code example above is still a bit messed up by what ever Get Sat is doing with what I paste here. Replace those " with quote (") characters


#5

Ok… that was supposed to read:

Replace those " with quote (") characters


#6

OK, So I followed yours as best as I could. I can duplicate yours and get it to work, but I cannot get my own to work. How do you post code?


#7

I got it to Work. Thanks!!!

I guess I would suggest this be available as a new feature without all the code.


#8

Hi David, glad that worked for you. We do look at these kind of requests and consider them for potential future features so this one will get added to the list. As you can imagine, this list is rather long so we prioritize our development based on how many other customers have asked for similar functionality and whether it ties in well with other features we have planned.

Feel free to add your input anytime on out Get Satisfaction page, we value feedback like this from our customers since it helps us plan our product road map.

thanks

Justin


#9

Hi!

Can you please help me understand if this solution still needs to be implemented through the Scripts Manager?

Thanks!


#10

Hey Pedro!

When this post originally went up we didn’t have the Script Manager, so I would highly suggest adding the script directly on to the page via the Javascript section. If you’re not sure how, check out this support article: http://documentation.unbounce.com/hc/en-us/articles/203879070

If you have any questions, feel free to send us an email at support@unbounce.com


#11

thanks, 

Its works great for me too!