How to get UTM parameters and send them inside Webflow Form having more than 1 form on the same page

Hey everyone!

I’m having a problem with muy UTM’s because i followed this topic:

How to get UTM parameters and send them inside Webflow Form

…and everything went awesome with the testing and integration!, the only thing is that when i have more than 1 form inside the same page then this script doesn’t work, the script only works for 1 form.

Is there a pending adjust i need to add to the script so i can make it work even if i got more than 1 form per page?.

Here’s my read-only link: https://preview.webflow.com/preview/duo-2-0?utm_medium=preview_link&utm_source=designer&utm_content=duo-2-0&preview=328e1af0eb8fcdff512143850c88efc3&pageId=62bcdd1dc16504d62aff443a&workflow=preview

Any type of help will be really appreciated! Thanks everyone.

For the simple case (Without cockle) - use this code:

<script>
  var queryString = window.location.search;
  console.log(queryString);
  // ?utm_source=facebook&utm_medium=post&utm_campaign=webflow
  var URLSearchParams_wb = new URLSearchParams(queryString);

  const utmParameters = [
    "utm_source", 
    "utm_medium", 
    "utm_campaign"
  ];

  for (const utm_element of utmParameters) {
    /* if utm_source exist */
    $( "form" ).each(function( index ) {
      if(URLSearchParams_wb.has(utm_element)){
        console.log(utm_element + "is exist");
        /* get UTM value of this utm param */
        var value = URLSearchParams_wb.get(utm_element)
        /* change form hidden feild to this utm url value */
        $( this ).find("."+utm_element).val(value);
      }

    })
  }/* end for loop */
</script>

**by Cockle the code already works with more than one form.

I already have the cookie into the project but it only applys to one form, any guess why is that and what i’m doing wrong? thanks a lot for your help!!