Email Capture Form

01-setup.md

Configuration

• Ensure the 'action' attribute of the Email Capture Form HTML points to the correct location (email-capture-form.html, line 3)
• Change the 'thankYouPageLink' in the Email Capture Form JS to point to your site's Thank You page (email-capture-form.js, line 4)
• Customize the Email Capture Form CSS match you page styling (after line 8)
• Add Google Analytics tracking code (email-capture-form.html, line 26)

cookie.js

(function(window) {

	var document = window.document,
		initFormCookies = function(form) {
			addQueryParamsToCookies();
			addCookieInputsToForm(form);
		},
		addQueryParamsToCookies = function() {
			var params = parseQueryString(document.location.search.substring(1)),
				keys = ['utm_source', 'utm_medium', 'utm_campaign', 'ref'],
				cookies = ['domain=.'+window.location.hostname.split('.').slice(-2).join('.')],
				cookieString = '';

			for (var i = 0; i < keys.length; i++) {
				if (params[keys[i]]) {
					cookies.push([keys[i], params[keys[i]]].join('='));
				}
			}
			cookieString = cookies.join('; ')
			document.cookie = cookieString
		},
		addCookieInputsToForm = function(form) {
			var cookies = parseQueryString(document.cookie, '; '),
				keys = ['utm_source', 'utm_medium', 'utm_campaign', 'ref'];

			for (var i = 0; i < keys.length; i++) {
				if (!cookies[keys[i]]) continue;
				var input = document.createElement('input');
				input.type = 'hidden';
				input.name = keys[i];
				input.value = cookies[keys[i]];
				form.appendChild(input);
			}
		},
		parseQueryString = function(queryString, delimiter = '&', separator = '=') {
			var pairs = queryString.split(delimiter),
				pair = [],
				params = {};

			pairs.map(function(item) {
				pair = item.split(separator);
				if (pair.length < 2) { return false; }
				params[pair[0]] = pair[1];
			});

			return params;
		};

	window.addEventListener('DOMContentLoaded', function() {
		var forms = document.querySelectorAll('.email-capture-form');
		for (i = 0; i < forms.length; i++) {
			initFormCookies(forms[i]);
		}
	});

}(window));

email-capture-form.css

/* -- do not modify these lines -- */
.email-capture-form.step-1 .step-2 {
  display: none;
}
.email-capture-form.step-2 .step-1 {
  display: none;
}
/* -- make modifications after this line -- */
.email-capture-form .error-display {
  font-size: smaller;
  color: #f50;
  padding: 0 0 8px;
}
.email-capture-form {
  height: 200px;
  width: 360px;
  margin: 0 auto;
}
.email-capture-form input, .email-capture-form select {
  box-sizing: border-box;
  width: 100%;				
  border-radius: 6px;
  border: 1px solid #000;
  padding: 9px 6px;
  margin: 5px 0;
}
.email-capture-form select {
  height: 33px;
}
.email-capture-form.step-1 input {
  float: left;
  width: 75%;
  margin: 0 0 0 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.email-capture-form button, .email-capture-form input[type=submit] {
  display: block;
  background: #000;
  color: #fff;
  padding: 9px 0;
  border: 0;
  border-radius: 6px;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
.email-capture-form.step-1 button {
  float: left;
  width: 25%;
  margin: 0 2px 0 -4px;
}

email-capture-form.html

<link rel="stylesheet" type="text/css" href="email-capture-form.css" />

<form class="email-capture-form step-1" method="post" action="REPLACE_WITH_FORM_URL" data-validation-url="REPLACE_WITH_VALIDATION_URL">
  <div class="error-display"></div>
  <div class="step-1">
    <input type="text" name="email-address" placeholder="Enter your email address to receive updates" />
    <button>Sign Up</button>
  </div>
  <div class="step-2">
    <input type="text" name="first-name" placeholder="First Name" />
    <input type="text" name="last-name" placeholder="Last Name" />
    <select name="amount">
      <option value="0">Amount</option>
      <option value="1">$100 - $1,000</option>
      <option value="2">$1,001 - $10,000</option>
      <option value="3">$10,001 - $50,000</option>
      <option value="4">$50,001 - $100,000</option>
      <option value="5">$100,001 and more</option>
    </select>
    <input type="submit" value="submit" />
  </div>
</form>

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<script type="text/javascript" src="email-capture-form.js"></script>
<script type="text/javascript" src="cookies.js"></script>

email-capture-form.js

(function(window) {

	var document = window.document,
		thankYouPage = '/email-capture-thank-you',
		initEmailCaptureForm = function(form) {
			var step1Button = form.querySelector('.step-1 button'),
				step2Button = form.querySelector('.step-2 input[type=submit]'),
				emailAddressInput = form.querySelector('input[name=email-address]')
				errorDisplay = form.querySelector('.error-display'),
				verifyEmailAddress = function(event) {
					event.preventDefault();
					var validationUrl = form.dataset.validationUrl,
						xhr = get_XHR(cb_verifyEmailAddress),
						query = {
							email_address: emailAddressInput.value
						};

					xhr.open('get', validationUrl+'?'+makeQueryString(query), true);
					xhr.send();
				},
				cb_verifyEmailAddress = function(response) {
					response = JSON.parse(response);
					if (response.is_valid) {
						errorDisplay.innerText = '';
						form.classList.remove('validation-error');
						form.classList.remove('step-1');
						form.classList.add('step-2');
					} else {
						form.classList.add('validation-error');
						errorDisplay.innerText = response.reason;
					}
				};

			step1Button.addEventListener('click', this.verifyEmailAddress);
			step2Button.addEventListener('click', function(event) {
				event.preventDefault();
				var emailAddress = form.querySelector('input[name=email-address]').value,
					firstName = form.querySelector('input[name=first-name]').value,
					lastName = form.querySelector('input[name=last-name]').value,
					amount = form.querySelector('select').value,
					amountString = form.querySelector('select option[value="'+amount+'"]').text,
					queryParams = {
						email_address: emailAddress, 
						first_name: firstName,
						last_name: lastName,
						amount: amount,
						amount_string: amountString
					},
					optionalParams = [
						'utm_source',
						'utm_medium',
						'utm_campaign',
						'ref'
					];

				for (var i = 0; i < optionalParams.length; i++) {
					var input = form.querySelector('input[name='+optionalParams[i]+']');
					if (input) {
						queryParams[optionalParams[i]] = input.value;
					}
				}

				var xhr = get_XHR(function(response) {
					window.location.href = thankYouPage;
				}, function(response, status) {
					if (status == 403) {
						window.alert('We have detected abuse from your IP address. Please try again later.')
					}
				});
				xhr.open(form.method, form.action, true);
				xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xhr.send(makeQueryString(queryParams));
			});
		},
		get_XHR = function(onSuccess, onFailure = false) {
			var xhr = new XMLHttpRequest();
			!onFailure && (onFailure = function(){})
			xhr.onreadystatechange = function() {
				if (xhr.readyState == XMLHttpRequest.DONE) {
					var response = xhr.responseText;
					if (xhr.status == 200) {
						onSuccess(response);
					} else {
						onFailure(response, xhr.status)
					}
				}
			};
			return xhr;
		},
		makeQueryString = function(data) {
			var doubles = [];
			for (key in data) {
				doubles.push([key, encodeURIComponent(data[key])].join('='));
			}
			return doubles.join('&');
		};

	window.addEventListener('DOMContentLoaded', function() {
		var forms = document.querySelectorAll('.email-capture-form');
		for (i = 0; i < forms.length; i++) {
			initEmailCaptureForm(forms[i]);
		}
	});

}(window));