Skip to content

Instantly share code, notes, and snippets.

@johnmurch

johnmurch/sample-form.html

Last active August 2, 2018 01:44
Show Gist options
  • Save johnmurch/e667969570ce99f9f9b342c0f0c535a6 to your computer and use it in GitHub Desktop.
Save johnmurch/e667969570ce99f9f9b342c0f0c535a6 to your computer and use it in GitHub Desktop.
Download ZIP
Passing GA UTM Data to Form
Raw
sample-form.html
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<meta name="description" content="A multi column contact form for Bootstrap 4" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<style type="text/css">
</style>
<!-- REPLACE YOUR UA-XXXX-Y value -->
<!-- REQUIRES GA for passing tracking data -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXX-Y"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXX-Y');
</script>
</head>
<body >
<div class="container-fluid bg-light py-3">
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *" required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="send a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="hidden" name="tracking" id="input_hidden_tracking">
<input type="submit" class="btn btn-warning btn-send" value="Send message">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
// Embed injectTracking.js inline
function getCookie(cname) {
var name = cname + "=";
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);
if(c.indexOf(name) == 0)
return c.substring(name.length,c.length);
}
return "";
}
var parseAnalyticsCookie = getCookie("__utmz");
var element = document.getElementById('input_hidden_tracking');
if (typeof(element) != 'undefined' && element != null)
{
document.getElementById('input_hidden_tracking').value = parseAnalyticsCookie
// console.log('parseAnalyticsCookie',JSON.stringify(parseAnalyticsCookie));
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment