Capture UTM Parameters using Javascript

Community resources Webflow Tips
1

Hi everyone,

So I found a post on this forum explaining how to capture the URL page with hidden fields inside the form block when you have 2 forms or more on a page.

The issue I’m having (and I’m no developer at all) is that I’m trying to capture the UTM parameters. I can capture the URL and hidden fields using the CMS to pre-populate info but it’s just not working for UTMS. Below is what I have so far.

Inside my HTML Embed (in form)

00
001460×1240 141 KB

Inside my /body:

22
221060×824 92.1 KB

You can see in the attached screen shot the values which come out which look like this: “utm_campaign”: “[object HTMLInputElement]”,

Any help/guidance is really really appreciated as I’ve spent hours on this already and starting to go mad.!

55
551118×470 22.9 KB

2

Please Add live URL + The original post/guide.

In your code, you did not declare the var utm_source for example.

Anyway in your example:

  • utm_campaign => empty(no value)
  • utm_medium empty
  • utm_source empty

Watch this:

3

@Siton_Systems - thanks for your reply. Here is one of the live links: https://www.speak.ae/learn/kids-summer-camp

This is the original post: How to use Hidden Fields to Include your Current URL, Referring Page URL, and form names using one line of JavaScript

The issue I have is not with google analytics but with getting two forms on one page (one form is desktop visible on desktop and another on Table/mobile) to capture the UTM parameters of both forms. I have tried with creating unique IDs for each hidden field but not luck either.

4

First follow/Learn the tutorial “as is” (Create demo page)
https://dontpop.webflow.io/htmlstuff

Next change to your “case” (Looks like your code and the reference code are diff).

The tutorial is long - so its hard for me to answer.

Where this block of code in your example?

<script> 
	{
	  document.getElementById('hiddenKey02').value = location.pathname;
	  document.getElementById('hiddenKey03').value = document.referrer;
	  document.getElementById('hiddenKey12').value = location.pathname;
	  document.getElementById('hiddenKey13').value = document.referrer;
	 } 
	</script>

By the way its better to use semantic names (Instead of hiddenKey01 ==> utm_medium_key and so on).

Example

Not my tutorial but all the idea her is to “send” some value (“hello world” or document.referrer; as value to feild.

The most basic example:

<form>
  <input id="key" value=""> 
</form>

Script

<script>
document.getElementById('key').value = "hello world";
</script>

Output:
image

Example - use doc.referrer

<script>
document.getElementById('key').value = document.referrer;
</script>

Result:
image

Remove type=“hidden”

For testing change type="hidden" to type="" (Easier to debug).

5

@Siton_Systems - thank you so much for your detailed explanation. I will give that a go tomorrow and update on how it went. Thanks again!

6

Hi @Siton_Systems Thanks for the expanation. This looks super easy and friendly.
would you mind bringing it all together?
a snippet to collect the UTM parameters into separate fields of a form?

Thanks :slight_smile:

7

Added her (Try and update if it works like it should :slight_smile: ):

8

Hi Ezra,

I followed your instructions and my forms are producing the utm parameters, however they are blank and not tracking anything. Can you help?

Thank you

Screenshot 2025-02-12 at 1.22.23 pm
Screenshot 2025-02-12 at 1.22.23 pm552×208 3.25 KB

9

SA5’s Data lib supports that directly.
You’d just add the lib, and an embed with hidden inputs like this.

Databinding will simply populate the fields from the querystring.

<input type="hidden" name="utm_source" wfu-bind="?utm_source">
10

Thank you for your reply! I used Ezra’s instructions here to try to add the UTM tracking to my webflow forms.

Specifically, I added this code:

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

Does that look correct? For some reason, there is no output for the UTM code in the webflow submissions; they’re just blank

11

@memetican Hi Michael, just wanted to see if you could still assist me on my previous reply. Thanks so much