Streaming live at 10am (PST)

How to get UTM parameters and send them inside Webflow Form

Minimal JS knowledge requires (Two copy-paste and Less than one minute).

Step 1/4:
Google/youtube What are UTM (Very useful for Marketing).

Step 2/4:
Create a UTM link. Useful tool:

In this example the UTM is:
“Full” link:

Step 3/4
Copy-Paste Before body (Per page -or- entire website).

The code structure:

  1. Get URL parameters -
    code credit:
  2. Get webflow form elements by jquery class selector and set the value to this UTM param X.
  var queryString =;
  // ?utm_source=facebook&utm_medium=post&utm_campaign=webflow
  var URLSearchParams = new URLSearchParams(queryString);

  const utmParameters = [

  for (const utm_element of utmParameters) {
    /* if utm_source exist */
      console.log(utm_element + "is exist");
      /* get UTM value of this utm param */
      var value = URLSearchParams.get(utm_element)
      /* change form hidden feild to this utm url value */
  }/* end for loop */

return: “facebook” (For the url example)

Webflow side

Step 4/4
Add form and inside the form add embed html Copy - Paste (By code we are going to set the value of those feilds).

<input type="text" class="utm_source" placeholder="utm_source" name="utm_source">
<input type="text" class="utm_medium" placeholder="utm_medium" name="utm_medium">
<input type="text" class="utm_campaign" placeholder="utm_campaign" name="utm_campaign">

** Not mandatory: Its better to put the HTML embed before the submit button (Like this the form submission table will be more readable).


:slight_smile: The code fill-up the empty fields with UTM parameters

**works also for more than one form on a page

Set type=“hidden”

If everything works as it should - set the fields type to hidden

I like to add an empty script (LIke this it’s more visual there are hidden fields inside this form).


I use if statements (Check if the fields exist. So it’s also ok to put this code under site setting (Will work fine also on pages without form -and/or- URL without parameters -or- some parameters).

1 Like

Cockies & UTM

Sometimes its useful to save utm params inside a cockie (To keep the UTM also if the user go from page X to Y).

Same steps as above (Only step 3 code is difference).
Save UTM-params inside Lead cookie.

I use this library. More options her:

** Default expires: Cookie is removed when the user closes the browser.

<!-- Getting The URL Parameter - and set UTM inside webflow form - Siton -->

<!-- -->
<script src=""></script>

  function getAllUrlParams(url) {
    // get query string from url (optional) or window
    var queryString = url ? url.split('?')[1] :;
    // we'll store the parameters here
    var obj = {};
    // if query string exists
    if (queryString) {
      // stuff after # is not part of query string, so get rid of it
      queryString = queryString.split('#')[0];
      // split our query string into its component parts
      var arr = queryString.split('&');
      for (var i = 0; i < arr.length; i++) {
        // separate the keys and the values
        var a = arr[i].split('=');
        // set parameter name and value (use 'true' if empty)
        var paramName = a[0];
        var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
        // (optional) keep case consistent
        paramName = paramName.toLowerCase();
        if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();
        // if the paramName ends with square brackets, e.g. colors[] or colors[2]
        if (paramName.match(/\[(\d+)?\]$/)) {
          // create key if it doesn't exist
          var key = paramName.replace(/\[(\d+)?\]/, '');
          if (!obj[key]) obj[key] = [];
          // if it's an indexed array e.g. colors[2]
          if (paramName.match(/\[\d+\]$/)) {
            // get the index value and add the entry at the appropriate position
            var index = /\[(\d+)\]/.exec(paramName)[1];
            obj[key][index] = paramValue;
          } else {
            // otherwise add the value to the end of the array
        } else {
          // we're dealing with a string
          if (!obj[paramName]) {
            // if it doesn't exist, create property
            obj[paramName] = paramValue;
          } else if (obj[paramName] && typeof obj[paramName] === 'string'){
            // if property does exist and it's a string, convert it to an array
            obj[paramName] = [obj[paramName]];
          } else {
            // otherwise add the property
    return obj;

  /* Check if Lead Cookie already exist */
  var cookieExist = Cookies.get('Lead'); // => 'value'
  /* get URL params object */
  var getAllUrlParams = getAllUrlParams();
  /*Convert a JavaScript object into a string */
  var getAllUrlParamsJSON = JSON.stringify(getAllUrlParams);
  /* Check if the url with utm_parameters */
  let isEmpty = jQuery.isEmptyObject(getAllUrlParams); 

  /* OPTION 1 - if the page with parameters and no cockie exsist */
  if(!isEmpty && cookieExist === undefined){
    /* set lead object for the cockies */
    console.log("1 - Create Cockie");
		## Set Cookies ##
		expires: If omitted, the cookie becomes a session cookie (This example)
  }/*end if*/

  /* OPTION 2 -
  if page with utm params but the lead already exsist (overide current Lead) 
  else use the currnet cockie
  if(!isEmpty && cookieExist !== undefined){
    if(JSON.parse(cookieExist).parameters.utm_source != getAllUrlParams.utm_source
       JSON.parse(cookieExist).parameters.utm_medium != getAllUrlParams.utm_medium
       JSON.parse(cookieExist).parameters.utm_campaign != getAllUrlParams.utm_campaign
      console.log("lead Exist but with diff parames");
      console.log("Option 3");
      console.log("option 2");

  /* option 3 - cookie Exist  but page without any utm param */
  if(isEmpty && cookieExist !== undefined){
    console.log("option 4");

  function createLead(){
    var lead = {
      parameters: getAllUrlParams
    /* if you want to add 2 days expires for example: 
   Cookies.set('Lead', 'lead', { expires: 2}) 
    Cookies.set('Lead', lead, { });

  function setUTMformValues(){  
    /* utm data */
    let utm_source_value = JSON.parse(Cookies.get('Lead')).parameters.utm_source;
    let utm_medium_value = JSON.parse(Cookies.get('Lead')).parameters.utm_medium;
    let utm_campaign_value = JSON.parse(Cookies.get('Lead')).parameters.utm_campaign;
    /* webflow form object (You should add embed code under webflow designer */
    var utm_source_form_elem = document.getElementById("utm_source");
    var utm_medium_form_elem = document.getElementById("utm_medium")
    var utm_campaign_form_elem = document.getElementById("utm_campaign");
    /* Check if elem exsist to avoid console errors  */
    if(utm_source_form_elem != null && utm_source_value !== undefined){
      utm_source_form_elem.value = utm_source_value;
    if(utm_medium_form_elem != null && utm_medium_value !== undefined){
      utm_medium_form_elem.value = utm_medium_value;
    if(utm_campaign_form_elem != null && utm_campaign_value !== undefined){
      utm_campaign_form_elem.value = utm_campaign_value;



If you want to change Define when the cookie will be removed. Value must be a Number which will be interpreted as days from time of creation.

Default: Cookie is removed when the user closes the browser.

    Cookies.set('Lead', lead, { expires: 30 });
1 Like

Good evening thanks for this.

I am trying to save utm params inside a cookie (To keep the UTM also if the user go from page X to Y) . part of your suggestion but unfortunately it doesn’t work. Please see our sharable link below.

I would be grateful if you could help us with this one.

Many thanks,

Please add a live URL.

1 Like

please see below the live URL

I update the code. Please copy-paste again and update if the problem solved.

HI Siton,

Thanks a lot for updating the code. i have copy-paste the code, before the body in all the pages but unfortunately, it doesn’t work. please see a screenshot attached

any other recommendations?

I really appreciate your help.

Many thanks,

Clear cookies and than refresh the page.

Hi Siton,

Many thanks for your help with this. We cleared the cookies as you said, and it works. It shows the UTM values within the lead cookie.

Unfortunately now for some reason when we can’t seem to get the UTM data to come out of the cookies and into the contact form. Screenshot 2020-09-11 at 15.43.02

thanking you in advance,

Copy-Paste the code again (lead instead of Lead in the code make minor error).
If now the code not working please write me in private

Hi - thanks for this solution.

Is it possible to get the UTM parameters from the page and pass them directly into another custom code rather than input forms?

I have a custom code block which contains an iFrame to display on my landing page and I want to pass some of the utm parameters into the iFrame’s URL, as this will dynamically update the content in this iFrame.

So the custom code would look like:

Any help would be much appreciated

No way to know your issue without live URL + read-only.

Also, what do you mean her: "lead cookie in the 1st instant"

Yes. This is for example the value of utm_source (Inside setUTMformValues function).


put this value in another custom code if you want.

let hello = JSON.parse(Cookies.get('Lead')).parameters.utm_source;

Anyway your Q is too general (You should know some JS to solve this -or- hire freelancer).

So we added in this code.

  1. The script wasn’t functioning, and we realized that JQuery wasn’t being called before the script - so we added that.

Now in the console we are getting "utm_sourceis exist etc.) so that part is looking good.

However the form fields which are entered before the submit are not seeing their values updated. Not sure what we are missing here.

You can see the page at: dominKnow|ONE Feature Release

FYI the fields are there, but we have them as “hidden” instead of “text”