In this post, I demonstrate how to create a Bootstrap Google Web Application Form on Google Sheets using Google Apps Script.
How to Video:
Video Notes:
- Legacy Apps Script Editor Used in Video
- Apps Script (Script Editor) is now located under tab ‘Extensions’ instead of ‘Tools’ on Google Sheets
- For Further Details on Deploying a Web App Click Here
- Bootstrap Documentation
Code in Video:
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('WebAppBoot');
}
function AddRecord(firstname, lastname, street, city, state, zip, email) {
var url = ''; //Paste URL of GOOGLE SHEET
var ss= SpreadsheetApp.openByUrl(url);
var webAppSheet = ss.getSheetByName("FORM DATA");
webAppSheet.appendRow([firstname, lastname, street, city, state, zip, email, new Date()]);
}<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script>
function AddRow()
{
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;
var street = document.getElementById("street").value;
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
var zip = document.getElementById("zip").value;
var email = document.getElementById("email").value;
if(firstname != '' && lastname != '' && street != '' && city != '' && state != '' && zip != '' && email != '')
{
google.script.run.AddRecord(firstname, lastname, street, city, state, zip, email);
document.getElementById("firstname").value = '';
document.getElementById("lastname").value = '';
document.getElementById("street").value = '';
document.getElementById("city").value = '';
document.getElementById("state").value = '';
document.getElementById("zip").value = '';
document.getElementById("email").value = '';
document.getElementById("display_error").innerHTML = "";
}
else
{
document.getElementById("display_error").innerHTML = "Please Enter All Information!";
}
}
</script>
</head>
<body>
<div style="padding: 10px;" >
<form>
<div class="form-row">
<div class="form-group col-md-3">
<label for="firstname">First Name</label>
<input type="text" id="firstname" class="form-control" />
</div>
<div class="form-group col-md-3">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="street">Street</label>
<input type="text" id="street" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="city">City</label>
<input type="text" id="city" class="form-control" />
</div>
<div class="form-group col-md-2">
<label for="state">State</label>
<input type="text" id="state" class="form-control" />
</div>
<div class="form-group col-md-1">
<label for="zip" >Zip</label>
<input type="text" id="zip" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="email" >Email</label>
<input type="text" id="email" class="form-control "/>
</div>
</div>
<div class="form-group col-md-3">
<input type="button" value="Submit" class="btn btn-primary" onclick="AddRow()" />
<div id="display_error" style="color: red" ></div>
</div>
</form>
</div>
</body>
</html>Related Posts
Create Login Google Web App using Google Account - In this video, I demonstrate how to log in to a Google Web App using a Google Account but also control who has editor access through the Google Sheets Share.
How to Create a Bootstrap Sidebar Form on Google Sheets - In this post, I demonstrate how to create a Bootstrap sidebar HTML Form on Google Sheets.
Using Bootstrap Modal on Google Web App - In this post, I demonstrate how to use Bootstrap Modal on a Google Web Application to show Nested Data.
Create a Bootstrap CRUD Google Web App using Google Sheets - In this post, I demonstrate how to create a Bootstrap CRUD application using Google Web App and Google Sheets