How to pass UTM info to form submit? - forms

Question

Bottom line, I want to know exactly which leads (form submissions) came through Adwords.
It's a manually built form (no JotForm or anything) and submits through manually built php that, at the moment) sends me an Email. The page and form itself is HTML.
So we can add UTM info to the Adwords URLs, and I'm looking for a way to grab that UTM information and pass it on to the Email (like through a hidden field in the form or something.)
I think this would be the easiest way to make sure we know which leads we paid for, but if not, please let me know of a better way.
TIA

Answer 1

The best way to track these utm is to store them into a js cookie and then retrieve them to store values into hidden fields in form.
using cookies will allow you to navigate through different pages without having to pass the data again and again in the url.
You can modify this solution to use for your form.
http://www.decorumsol.com/tracking-utm-parameters-in-contact-form-7/
Edit:
Here is the code for better understanding.
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
jQuery(document).ready(function() {
jQuery('form').find('input.utm_source').each(function() {
var a = getQueryVariable('utm_source');
if(a){
jQuery(this).val(a);
}
});
jQuery('form').find('input.utm_medium').each(function() {
var a = getQueryVariable('utm_medium');
if(a){
jQuery(this).val(a);
}
});
jQuery('form').find('input.utm_campaign').each(function() {
var a = getQueryVariable('utm_campaign');
if(a){
jQuery(this).val(a);
}
});
jQuery('form').find('input.utm_term').each(function() {
var a = getQueryVariable('utm_term');
if(a){
jQuery(this).val(a);
}
});
jQuery('form').find('input.utm_content').each(function() {
var a = getQueryVariable('utm_content');
if(a){
jQuery(this).val(a);
}
});
});
function createCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
var c_name = "_aaa_utmz";
if(getQueryVariable("utm_source") != "") {
createCookie("_aaa_utmz", getQueryVariable("utm_source") + "|" + getQueryVariable("utm_medium")+ "|" + getQueryVariable("utm_term")+ "|" + getQueryVariable("utm_campaign")+ "|" + getQueryVariable("utm_content"), 60);
}
else if (readCookie(c_name)){
c_start=readCookie(c_name);
var _pipe = c_start.split("|");
jQuery("input[name=utm_source], .utm_source").val(_pipe[0]);
jQuery("input[name=utm_medium], .utm_medium").val(_pipe[1]);
jQuery("input[name=utm_term], .utm_term").val(_pipe[2]);
jQuery("input[name=utm_campaign], .utm_campaign").val(_pipe[3]);
jQuery("input[name=utm_content], .utm_content").val(_pipe[4]);
}
in your html form, create
<div style="display:none;">
<input type="text" value="" class="utm_source" name="utm_source" />
<input type="text" value="" class="utm_medium" name="utm_medium" />
<input type="text" value="" class="utm_term" name="utm_term" />
<input type="text" value="" class="utm_campaign" name="utm_campaign" />
<input type="text" value="" class="utm_content" name="utm_content" />
</div>