|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<title>Post to Google Sheet Demo</title> |
|
<!-- bootstrap & fontawesome css --> |
|
<link href="http://cdn.jsdelivr.net/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> |
|
<link rel="stylesheet" href="http://cdn.jsdelivr.net/fontawesome/4.1.0/css/font-awesome.min.css" /> |
|
|
|
<!-- BootstrapValidator CSS --> |
|
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css"/> |
|
|
|
<!-- jQuery and Bootstrap JS --> |
|
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script> |
|
<script type="text/javascript" src="http://cdn.jsdelivr.net/bootstrap/3.2.0/js/bootstrap.min.js"></script> |
|
|
|
<!-- BootstrapValidator JS --> |
|
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"></script> |
|
|
|
<!-- Animated Loading Icon --> |
|
<style type="text/css"> |
|
.glyphicon-refresh-animate { |
|
-animation: spin .7s infinite linear; |
|
-webkit-animation: spin2 .7s infinite linear; |
|
} |
|
|
|
@-webkit-keyframes spin2 { |
|
from { -webkit-transform: rotate(0deg);} |
|
to { -webkit-transform: rotate(360deg);} |
|
} |
|
|
|
@keyframes spin { |
|
from { transform: scale(1) rotate(0deg);} |
|
to { transform: scale(1) rotate(360deg);} |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
</head> |
|
|
|
<body> |
|
<div class="container"> |
|
<div class="row"> |
|
<div class="col-lg-12"> |
|
<h2>Post to Google Sheets with form validation</h2> |
|
<p> |
|
Based on Martin Hawksey's <a href="http://mashe.hawksey.info/2014/07/google-sheets-as-a-database-insert-with-apps-script-using-postget-methods-with-ajax-example/" target="_blank">example</a>. |
|
<p> |
|
</div> |
|
</div> |
|
<hr> |
|
<form class="form-horizontal" role="form" id="test-form"> |
|
<div class="form-group"> |
|
<label class="col-lg-3 control-label">First Name</label> |
|
<div class="col-lg-3 inputGroupContainer"> |
|
<div class="input-group"> |
|
<input type="text" class="form-control" name="firstName" placeholder="First Name"/> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label class="col-lg-3 control-label">Last Name</label> |
|
<div class="col-lg-3 inputGroupContainer"> |
|
<div class="input-group"> |
|
<input type="text" class="form-control" name="lastName" placeholder="Last Name"/> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label class="col-lg-3 control-label">Email</label> |
|
<div class="col-lg-3 inputGroupContainer"> |
|
<div class="input-group"> |
|
<input type="text" class="form-control" name="email" placeholder="name@domain.com"/> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label class="col-lg-3 control-label">Address</label> |
|
<div class="col-lg-3 inputGroupContainer"> |
|
<div class="input-group col-lg-10"> |
|
<textarea type="text" class="form-control" name="address" placeholder="Enter your address here" rows="4" style="resize: vertical;"></textarea> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label class="col-lg-3 control-label">Notes</label> |
|
<div class="col-lg-3 inputGroupContainer"> |
|
<div class="input-group col-lg-10"> |
|
<textarea type="text" class="form-control" name="notes" placeholder="Comments or questions?" rows="4" style="resize: vertical;"></textarea> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<div class="col-lg-9 col-lg-offset-3"> |
|
<button type="submit" class="btn btn-default" id="postForm">Submit</button> |
|
</div> |
|
</div> |
|
|
|
</form> |
|
|
|
</div> |
|
</body> |
|
|
|
<footer> |
|
<script src="validation-functions.js"></script> |
|
</footer> |
|
|
|
</html> |