Important note: this tutorial will work only if UTMs are still present in the URL when your visitors enter their email address.


We are going to use the WisePops' JS Callbacks feature to dynamically fill values in hidden fields.

Create the fields to collect the UTMs

Open your campaign in the editor.
Click the email field.

In the left menu, click "Add new Field."


Select "Hidden field" in the upper right menu.

Name it utm_source  (using a different name will break the code).

Repeat the operation for utm_campaign  and utm_medium .

Add a JS callback

Go to the JS section, and create a new JS callback listener for the event "Before form submit".

Set the following snippet as the script:

// Inject UTM parameters into hidden fields
var getParamNames = ['utm_source', 'utm_campaign', 'utm_medium'];

var urlParams = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
  hash = hashes[i].split('=');
  urlParams[hash[0]] = decodeURIComponent(hash[1]);
}

getParamNames.forEach(function(paramName) {
  if (event.target.elements[paramName] && urlParams[paramName]) {
    event.target.elements[paramName].value = urlParams[paramName];
  }
});



Then save your popup.

Did this answer your question?