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

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

If someone came to my site via twitter, they might land on, and clicking the button would take them to

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_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.
    How to Get URL Parameters with JavaScript - SitePoint

  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;

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


        // create urlParams variable (constant) from URLSearchParams class using current window
           const urlParams = new URLSearchParams(;
        // 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


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.


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(;

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;




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

Hi Chris, did you ever find a solution? I have the exact same problem, I need multiple buttons to get URL parameters and would like to use getElementByClassName, not getElementById…

Checking to see if you ever found a solution to this :smile:

Struggling with the same issue now, getelementby id works but now w class

I have another reusable solution if anyone is interested. The mechanism is the same, just a bit cleaner. It appends ALL search params, not just some.

In the example I’m attaching all search params to two buttons: one with id sign-in-btn and another with id sign-up-bnt.

<script type="text/javascript">
  window.onload = function () {
    const signInBtn = document.getElementById("sign-in-btn");

    const signUpBtn = document.getElementById("sign-up-btn");

  function appendUtmsToButton(button) {
    // Read utm params from url:
    const pageSearch =;
    const urlParams = new URLSearchParams(pageSearch);

    // Build new params for the button combining the button' params with the utm:
    const buttonUrl = new URL(button.href);
    let newButtonParams = new URLSearchParams(;

    urlParams.forEach(function(value, key) {
      newButtonParams.append(key, value);

    // Build new url for the button attaching the params: = "";
    const newSearchString = newButtonParams.toString(); = newSearchString;
    const newHref = buttonUrl.toString();

    // Replace the button's url:
    button.href = newHref;

    // For debugging log final button link to console:
    // console.log(button.href);
1 Like

Did you ever find a solution for this? I am having the exact same issue. It’d be great if you could help.


Could you possibly elaborate on what the original pass-thru URL would be for this to work?

I believe I would need to change my button ID to sign-in-btn within Webflow UI, but what is the URL that this reads from? (Example:

Thanks for any help you can share