Google Docs Forms

gistfile1.html

<script type="text/javascript">var submitted=false;</script>

//This is where thank you page/message is loaded. Replace onload function with jQuery hide/show or page redirect to separate page {window.location='thankyou.html';}. 
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {$('#formblock').hide(); $('#thankyou').fadeIn('fast');}"></iframe>

//replace form key with actual key from Google Docs
<form action="https://docs.google.com/a/betterment.com/spreadsheet/formResponse?formkey=dGlUczJTRUNjaHExOGtqZkVCYjVtR3c6MQ&amp;ifq" method="post"     target="hidden_iframe" id="commentForm" onsubmit="submitted=true;">
     <div id="formblock">

//recreate form fields and validation if needed
         <input type="email" placeholder="Email Address" name="entry.0.single" value="" class="ss-q-short" id="requestEmail">
         <input type="hidden" name="pageNumber" value="0">
         <input type="hidden" name="backupCache" value="">
         <input type="submit" name="submit" value="Request an Invite" id="requestSubmit">
     </div>

//thank you content as a replacement div. can also use separate page
     <div id="thankyou">
          <h4>Thanks!</h4>
          <p>We'll send your invitation soon.</p>
     </div>
</form>


//form validation requires lots of extra divs and jQuery validation plugin
//http://bassistance.de/jquery-plugins/jquery-plugin-validation/

//form with validation
<div class="ss-form">
	<script type="text/javascript">var submitted=false;</script>
	<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='thankyou.html';}"></iframe>
	<form action="https://docs.google.com/a/betterment.com/spreadsheet/formResponse?formkey=dFVSRFljZXBtWFJMYUVDdUFqNTBNZ1E6MQ&amp;ifq" method="post"	target="hidden_iframe" id="commentForm" onsubmit="submitted=true;">
		<div class="formblock">
			<div class="errorbox-good">
				<div class="ss-item  ss-text">
					<div class="ss-form-entry">
						<label class="ss-q-title" for="entry_0">First Name</label>
						<label class="ss-q-help" for="entry_0"></label>
						<input type="text" name="entry.0.single" value="" class="required" title="Please enter your first name" id="entry_0">
					</div>
				</div>
			</div>
			<div class="errorbox-good">
				<div class="ss-item  ss-text">
					<div class="ss-form-entry">
						<label class="ss-q-title" for="entry_1">Last Name</label>
						<label class="ss-q-help" for="entry_1"></label>
						<input type="text" name="entry.1.single" value="" class="required" title="Please enter your last name" id="entry_1">
					</div>
				</div>
			</div>
			<div class="errorbox-good">
				<div class="ss-item  ss-text">
					<div class="ss-form-entry">
						<label class="ss-q-title" for="entry_2">Email Address</label>
						<label class="ss-q-help" for="entry_2"></label>
						<input type="text" name="entry.2.single" value="" class="required {validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}" title="Please enter a valid email address" id="entry_2">
					</div>
				</div>
			</div>
			<input type="hidden" name="pageNumber" value="0">
			<input type="hidden" name="backupCache" value="">
		</div>
		<div class="formblock">
			<img src="images/form_header.png" alt="Register Now: It's Free!" border="0" />
		</div>
		<div class="formsubmit ss-item ss-navigate">
			<div class="ss-form-entry">
				<input type="submit" name="submit" value="Submit">
			</div>
		</div>
	</form>
	<script type="text/javascript">   
	      (function() {
			var divs = document.getElementById('ss-form').
			getElementsByTagName('div');
			var numDivs = divs.length;
			for (var j = 0; j < numDivs; j++) {
				if (divs[j].className == 'errorbox-bad') {
					divs[j].lastChild.firstChild.lastChild.focus();
				return;
				}
			}
			for (var i = 0; i < numDivs; i++) {
				var div = divs[i];
				if (div.className == 'ss-form-entry' &&
				div.firstChild &&
				div.firstChild.className == 'ss-q-title') {
					div.lastChild.focus();
					return;
				}
			}
			})();
	</script>
</div>