Pass URL Parameters to Button

Hi Everyone,

New to the forum here. Trying to figure out how I can bring down URL parameters and pass them through to a button that re-directs to another site. I’ll be running marketing campaigns and want to capture the source of traffic in a non-Webflow form submission.

Example: An ad I run on Facebook sends people to www.example.com/home?utm_source=facebook&utm_medium=social

I’d like my Webflow page to store a source variable of ‘facebook’ and a medium variable of ‘social’, then if a user clicks a button a button on the Webflow page, it would append those values as parameters on a redirect URL, such as www.typeform.com/12345?source=facebook&medium=social

If someone came to my site via twitter, they might land on www.example.com/home?utm_source=twitter&utm_medium=social, and clicking the button would take them to www.typeform.com/12345?source=twitter&medium=social

I’ve seen a lot out there about passing URL parameter data into hidden fields on a Webflow form, but I’m using a different form tool that I want to pass that data into.

Any help is greatly appreciated!
-John


@John_Mooney, you could try running a script when the page loads. This script would:

  1. Unpack the parameters from the URL
    Here’s a link that has a few lines on this. You could likely try this to get the values of the utm_source and utm_medium parameters.
    https://www.sitepoint.com/get-url-parameters-with-javascript/

  2. Edit the button link by appending parameters to the end
    I believe something like this would work:

     // get the link element        
     var myLink = document.getElementById("id-of-the-button-link");
    
     // edit its href property by appending the parameters
     myLink.href += "?source=" + sourceParameter + "&medium=" + mediumParameter;
    
     //check
     console.log(myLink.href);
    

This assumes that:

  • Your button is actually a link (and not an HTML form field button)
  • Your URL parameters and values are generally free of punctuation – if they might have spaces or other punctuation, you may need to add some code to ensure that’s handled correctly

Hope this is helpful.

1 Like

Thanks so much @VinM!

@VinM thanks again for your help. I was able to get it working using your recommendation. For anyone else out there looking to do something similar, here was my approach:

From page settings, I input the following custom code before the body tag

<script>

        // create urlParams variable (constant) from URLSearchParams class using current window
           const urlParams = new URLSearchParams(window.location.search);
          
        // set UTM medium, source and campaign variables (constants) based on results of URSearchParams
           const utm_medium = urlParams.get('utm_medium')
           const utm_source = urlParams.get('utm_source')
           const utm_campaign = urlParams.get('utm_campaign')

        // get the RSVP button element
           var rsvpLink = document.getElementById("rsvp");

        // edit RSVP button element property by appending the URL parameters
           rsvpLink.href += "&medium=" + utm_medium + "&source=" + utm_source+ "&campaign=" + utm_campaign;

        // log final RSVP button link to console
           console.log(rsvpLink.href);

</script>

From the button settings, I had to give it an ID of ‘rsvp’ which is called in the document.getElementById. I also had to properly set my parameter keys to fit with the structure of how my form tool allows pre-filled data.

1 Like

Hi @John_Mooney, I’m glad you were successful!

Thanks @VinM and @John_Mooney for this! You folks are great :slight_smile:

I’ve placed the script on the site I’m working on, tweaked it accordingly and set the button IDs… but it breaks the link on the live site :frowning: I’m sure I’ve left out some tiny detail, but I’m hoping one of you might be able to assist by taking a look. If so, I’d be very grateful! I’ll DM you both with a link.

Thanks so much!!! Love this Webflow forum community, it’s the source of much of my Webflow knowledge and provides the solutions to many of my Webflow challenges!

Were you able to solve the issue with the live site? if so, how?

@Soul_Bird I was able to get it working on my end using the code in my previous comment. Let me know if there’s anything I can do to help you get it working.

Hi! Thanks for your speedy reply.
I’ve tried the method suggested above.
But when calling the “console.log” I’m getting ‘undefined’ instead of the new my_button.href
Not sure what I’m doing wrong here :confused:

document.getElementById("my_button_id").href and page_my_button.herf have different values.

Before tag

<script type="text/javascript">

const page_urlParams = new URLSearchParams(window.location.search);

const page_session_token = page_urlParams.get('tkn');

var page_my_button = document.getElementById("my_button_id");
page_my_button.herf += "?tkn=" + page_session_token;

console.log(page_my_button.href);
</script>

Console:

console.log(page_my_button.href)
'undefined'

Error might be possible because of a typo…

1 Like

I used your code and it worked like a charm! Thank you very much!
I have the same CTA on several buttons on my landing page, but this works only on the first CTA (because it looks for the ID). Is there a solution to include this in every CTA? I tried switching to the function getElementByClassName but it didn’t work

1 Like

Hi Andrea.

I am looking for the same solution.
I have a lot of linkblocks on my site and I would them all to pass the UTM.

Can’t get it to work with the same ID and can’t get it to work with getElementByClassName