Skip to content

Instantly share code, notes, and snippets.

@madysondesigns
Created August 2, 2012 14:46
Show Gist options
  • Save madysondesigns/3237574 to your computer and use it in GitHub Desktop.
Save madysondesigns/3237574 to your computer and use it in GitHub Desktop.
Google Docs Forms
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment