Skip to content

Instantly share code, notes, and snippets.

@kylekeesling

kylekeesling/form.html

Created December 19, 2012 18:09
Show Gist options
  • Save kylekeesling/4338917 to your computer and use it in GitHub Desktop.
Save kylekeesling/4338917 to your computer and use it in GitHub Desktop.
Download ZIP
Example of an ExactTarget Landing Page that logs form submissions to a Data Extension and then kicks off a Triggered Send to the submitter. This example also leverages ExactTarget's server-side javascript library. More info and documentation can be found here - http://wiki.memberlandingpages.com/010_ExactTarget/020_Content/Server-Side_JavaScript
Raw
form.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>
SolCon Request Form
</title>
<!-- HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="http://www.exacttarget.com/css/fancybox/fancybox.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.exacttarget.com/scripts/fancybox.js" type="text/javascript"></script>
<style type="text/css">
.sectionTitle {
margin-top: 25px;
}
.needsFilled {
border-color: red;
}
.reqField {
color: red;
font-weight: bold;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
//Form checking
$('#requestForm input.required').blur(function() {
if( !$(this).val() ) {
$(this).addClass('needsFilled');
} else {
$(this).removeClass('needsFilled');
}
});
function fieldCheck() {
var inputs = $('.required', '#requestForm'), empty = false;
inputs.each(function() {
if ( $(this).val() == '') {
empty = true;
return;
}
});
if ( empty ) {
alert("Oops! It looks like you haven't filled out all of the required fields. Please double check and try again.");
} else {
$.fancybox({'modal': true, 'href': '#loadingBox', 'type': 'inline'});
$('#requestForm').submit();
}
}
$('#submitButton').click(function(){
fieldCheck();
})
});
</script>
</head>
<body>
<div class="container" style="margin-top:25px;">
<div class="row">
<div class="offset2 page-header span12">
<h1>My Sweet Form</h1>
</div>
</div>
<!-- Production Form -->
<form action="thank-you.html" method="post" id="requestForm" class="form-stacked" name="requestForm">
<div class="row">
<div class="span4 offset2">
<label for="Field1">Field1<span class="reqField"> *</span></label>
<input type="text" name="Field1" placeholder="Enter Field1" id="Field1" class="required">
</div>
<div class="span4">
<label for="Field2">Field2<span class="reqField"> *</span></label>
<input type="text" name="Field2" placeholder="Enter Field2" id="Field2" class="required">
</div>
<div class="span4">
<label for="Field3">Field3<span class="reqField"> *</span></label>
<input type="text" name="Field3" placeholder="Enter Field3" id="Field3" class="required">
</div>
</div>
<div class="row">
<div class="span12 offset2">
<div class="actions" style="text-align: right;">
<input type="button" value="Let's Do It! &rarr;" class="btn primary large" id="submitButton">
</div>
</div>
</div>
</form>
</div>
<div style="display:none;">
<div id="loadingBox">
<img width="60" height="70" src="http://app.s2.qa2.exacttarget.com/assetlibrary/controls/loading/images/loader.gif">
</div>
</div>
</body>
</html>
Raw
thank-you.html
<script runat="server" language="javascript">
Platform.Load("Core","1");
var submitterEmail = Request.GetFormField('repEmail');
//Check to see if the submitter gave us a valid email address
if (IsEmailAddress(submitterEmail)) {
//Is set to the customer key of the data extension
var requestsDE = DataExtension.Init("dataExtension");
//Is set to the customer key of the triggered send
var triggeredSend = TriggeredSend.Init("triggeredSend");
//The Request.GetFormField() command gets the value from the form POST of the form field with the specified name
requestsDE.Rows.Add({
Field1: Request.GetFormField('Field1'),
Field2: Request.GetFormField('Field2'),
Field2: Request.GetFormField('Field3')
});
//
var status = triggeredSend.Send(submitterEmail);
// Set a status flag for use in the HTML content
if (status == "OK") {
var status = "OK"
} else {
var status = "ERROR"
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Thanks for Submitting Your Request!</title>
<!-- HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="span12 offset2 page-header">
<h1>SolCon Request Form</h1>
</div>
</div>
<div class="row">
<div class="span12 offset2">
<script runat="server" language="javascript">
//Show the message based on the completed status of the sent
if (status == "OK") {
Write("<h3>Thank You!</h3>");
Write("<p>We'll be in touch with your very soon.</p>");
} else {
Write("<h3>Uh oh.... Something horrible has happeed</h3>");
}
</script>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment