Pass URL Parameters to Button

[John_Mooney]

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

---

[VinM (Vin)]

@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.

[John_Mooney]

Thanks so much @VinM!

[John_Mooney]

@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.

[VinM (Vin)]

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

[CrunchCreative]

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

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 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!