▼
Streaming live at 10am (PST)

Pass URL Parameters to Button

Design help Custom code
#1

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

Hide elements when url contains a certain parameter
#2

@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
How to change text in a page based on UTM
#3

Thanks so much @VinM!

#4

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

#5

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