Streaming live at 10am (PST)

Pre-Selected Dropdown Item Based on URL Parameter


#1

Hi Everyone!

I have a request from a client that I am not sure how to tackle yet, so I am reaching out to the community. I do not have a read-only/share link yet as I am trying to plan how to accomplish what the client wants first.

I will be running ads to the website, and the ads will be broken down into ad sets for certain categories (coffee, fitness, sports for example). Each ad set will have a specific UTM that brings them to the page. For example, a coffee ad might look like this: www.mysite.com?utm_source=facebook&utm_campaign=coffee

The client wants a dropdown menu in the hero section that is preselected based off the ad that brought them there. For example, a coffee ad might have brought them to the site, so coffee would be the selected item in the dropdown when they land on the page and see the hero.

I have been searching around stackoverflow and this community for an answer I can understand, but I have not been successful yet. I am not well-versed in javascript, but I can follow precise instructions.

Looking to the community for help and ideas. Thank you all!

Tagging @samliew because he always gives great answers!


#2

Googling your question’s title https://www.google.com/search?q=Pre-Selected+Dropdown+Item+Based+on+URL+Parameter&cad=h

Provides these answers, could you try something first? Thanks

https://stackoverflow.com/q/45517884/584192
https://stackoverflow.com/q/28537478/584192
https://stackoverflow.com/q/23591754/584192
https://stackoverflow.com/q/23015871/584192
https://stackoverflow.com/q/25315460/584192
https://stackoverflow.com/q/19941733/584192
https://stackoverflow.com/q/35181403/584192


#3

Or perhaps something from this forum Auto-fill form values based on URL querystring


#4

Thanks you, @samliew. I did see your Webflow post and some of these Stackoverflow articles. I was not able to get any of them to work, mainly because I don’t know javascript. I will spend today trying harder and perhaps I will get it working with more time! If not, I will come back here haha.


#5

I ended up switching my design from a dropdown menu to a tab system. However, I did figure out how to use a URL parameter to open a specific tab. For example, when someone clicks an advertisement for “coffee” then my coffee tab would be pre-opened on the page.

I placed this code in my body section of the site’s custom code (under project settings). For a tab system, you do not need to change this code whatsoever.

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
var tabName = getParam('tab');
if (!tabName) return;

$('.' + tabName).triggerHandler('click');

function getParam(name) {
  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
  return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
});
</script>

In order to specify the tab you want opened by a URL, you have to give your tab links a specific class. For example, my tab links might have classes of “coffee-tab” or “fitness-tab”.

Once you have given the tabs a class, all you have to do is type out the correct URL. For example:

myurl.com/?tab=coffee-tab (this links to my coffee tab)
myurl.com/?tab=fitness-tab (this links to my fitness tab)

All you have to do for the URL is replace “coffee-tab” with the class name you gave to that tab link on your site.

If you want to see this in action, check these links:

http://2beacon.webflow.io/?tab=taxi-tab (goes to my taxi tab)
http://2beacon.webflow.io/?tab=coffee-tab (goes to my coffee tab)
http://2beacon.webflow.io/?tab=fitness-tab (goes to my fitness tab)

@samliew feel free to close this topic, thanks!