Skip to content

Instantly share code, notes, and snippets.

@kontinuity kontinuity/AjaxForm.html Secret
Created Nov 24, 2013

Embed
What would you like to do?
MetroLeads form integration sample
<!DOCTYPE html>
<html lang="en">
<head>
<title>Metroleads Form Integration</title>
<meta charset="utf-8">
<script type="text/javascript">
function submitForm(){
var form = document.getElementById('demo');
var formData = form2js(document.getElementById('demo'));
mg.trackUncommonForm('demo', 'Demo form', formData);
form.submit();
}
</script>
<!-- Adding ML code -->
<script type="text/javascript">
(function() {
var mgElement = document.createElement('script'); mgElement.type = 'text/javascript'; mgElement.async = true;
mgElement.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 's3.amazonaws.com/metroleads/quasar.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mgElement, s);
// Handle Script loading
var done = false;
var head = document.getElementsByTagName("head")[0] || document.documentElement;
mgElement.onload = mgElement.onreadystatechange = function() {
if ( !done && (!this.readyState ||
this.readyState === "loaded" || this.readyState === "complete") ) {
done = true;
mg = new MG({}, 'e87afa78-2a79-11e3-b30e-12313b0ed8fc', 'eb9fd35c-8091-42dc-8231-e1dd41e00887');
mg.init();
// Handle memory leak in IE
mgElement.onload = mgElement.onreadystatechange = null;
if ( head && mgElement.parentNode ) {
head.removeChild( mgElement );
}
}
};
})();
</script>
</head>
<body>
<form id="demo" data-ml-form="Demo form" action='done.html'>
<table>
<tr>
<td>First Name:</td><td> <input type="text" id="first_name" data-ml-field="name.1" /></td>
</tr>
<tr>
<td>Last Name:</td><td> <input type="text" id="last_name" data-ml-field="name.2" /></td>
</tr>
<tr>
<td>Email address:</td><td> <input type="text" id="email" data-ml-field="email" /></td>
</tr>
<tr>
<td>Phone number: </td><td><input type="text" id="phone" data-ml-field="phone"/></td>
</tr>
<tr>
<td>Sex: </td><td><input type="radio" name="sex" value="male" data-ml-field="sex">Male </td>
</tr>
<tr>
<td></td><td><input type="radio" name="sex" value="female" data-ml-field="sex">Female</td>
</tr>
<tr>
<td>Budget</td><td><input type="text" data-ml-field="prop_budget"></td>
</tr>
<tr>
<td>
<input type="button" onclick="submitForm()" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Metroleads Form Integration</title>
<meta charset="utf-8">
<!-- Adding ML code -->
<script type="text/javascript">
(function() {
var mgElement = document.createElement('script'); mgElement.type = 'text/javascript'; mgElement.async = true;
mgElement.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 's3.amazonaws.com/metroleads/quasar.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mgElement, s);
// Handle Script loading
var done = false;
var head = document.getElementsByTagName("head")[0] || document.documentElement;
mgElement.onload = mgElement.onreadystatechange = function() {
if ( !done && (!this.readyState ||
this.readyState === "loaded" || this.readyState === "complete") ) {
done = true;
mg = new MG({}, 'e87afa78-2a79-11e3-b30e-12313b0ed8fc', 'eb9fd35c-8091-42dc-8231-e1dd41e00887');
mg.init();
// Handle memory leak in IE
mgElement.onload = mgElement.onreadystatechange = null;
if ( head && mgElement.parentNode ) {
head.removeChild( mgElement );
}
}
};
})();
</script>
</head>
<body>
<form id="demo" data-ml-form="Demo form" action='done.html'>
<table>
<tr>
<td>First Name:</td><td> <input type="text" id="first_name" data-ml-field="name.1" /></td>
</tr>
<tr>
<td>Last Name:</td><td> <input type="text" id="last_name" data-ml-field="name.2" /></td>
</tr>
<tr>
<td>Email address:</td><td> <input type="text" id="email" data-ml-field="email" /></td>
</tr>
<tr>
<td>Phone number: </td><td><input type="text" id="phone" data-ml-field="phone"/></td>
</tr>
<tr>
<td>Sex: </td><td><input type="radio" name="sex" value="male" data-ml-field="sex">Male </td>
</tr>
<tr>
<td></td><td><input type="radio" name="sex" value="female" data-ml-field="sex">Female</td>
</tr>
<tr>
<td>Budget</td><td><input type="text" data-ml-field="prop_budget"></td>
</tr>
<tr>
<td>
<input type="submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.