How to Capture UTM Parameters Into Keap (Web Form)

Wondering how you can capture traffic source onto your Keap app? Looking to track affiliate activity (leads referral) in your dashboard? Look no further 🙂

There are 2 ways to capture the information on the URL into Keap. Here are the tutorials on both:

1. Using URL Params (WordPress)

For the sake of this example we’re going to be using the “UTM Source” field, but you can use any UTM or virtually any element of your URL.

In your Keap dashboard, navigate to Admin > Settings > General and click “Go” on the dropdown under “Custom Fields” to create a new custom field for your contacts. Then you can just create a text custom field and call it “UTMsource”.

Then navigate onto the Campaign Builder, create a web form, using the goal Web Form Submitted. On your web form, add a hidden field by navigating to the tab “Field Snippets” and dragging the element “hidden” onto the canvas.

Then mark your web form as ready, publish the campaign (with all other steps you need to achieve the type of flow automation you’re looking for). Afterwards, we’re ready to copy the Keap web form code, using the HTML Code (Unstyled) option.

You should have something like this:

<div class=”infusion-field”>
<label for=”inf_field_FirstName”>First Name *</label>
<input class=”infusion-field-input” id=”inf_field_FirstName” name=”inf_field_FirstName” placeholder=”First Name *” type=”text” />
</div>
<div class=”infusion-field”> <label for=”inf_field_Email”>Email *</label>
<input class=”infusion-field-input” id=”inf_field_Email” name=”inf_field_Email” placeholder=”Email *” type=”text” />
</div>
<input name=”inf_custom_UTMsource” type=”hidden” value=”null” />
<div class=”infusion-submit”>type=”submit”>Submit</button> </div>

Now let’s go to the WordPress part:

You can grab the plugin here. After having it installed and activated, paste the web form code where you want to use it, and then add the plugin shortcode to the web form: [urlparam attr=”value” param=”utm_source” /]

The form code row that pertains to the hidden field should now look similar to:

<input name=”inf_custom_UTMsource” type=”hidden” [urlparam attr=”value” param=”utm_source” /] />

2. Using Javascript

If your website is not built on WordPress or you don’t want to rely on a 3rd party plugin to get the job done, then a snippet of javascript is the way to go!

The Javascript in this gist can be used to grab a parameter (in this example, called “utm_source”) from the URL’s query string and place that value into a hidden form field (again, in this example, with an id of #inf_custom_UTMsource) on your Keap web form.

<script type=”text/javascript”>
function getUrlParameter(name) {
name = name.replace(/[\[]/, ‘\\[‘).replace(/[\]]/, ‘\\]’);
var regex = new RegExp(‘[\\?&]’ + name + ‘=([^&#]*)’);
var results = regex.exec(location.search);
return results === null ? ” : decodeURIComponent(results[1].replace(/\+/g, ‘ ‘));
};
document.getElementById(‘inf_custom_UTMsource’).value = getUrlParameter(‘utm_source’);
</script>

That’s all folks! Don’t forget to adjust the fields accordingly to match your needs. This technique can be used to grab not only UTM parameters but also affiliate information or any type of info that gets passed on between web pages using the URL query string.