Create a Bootstrap Google Web Application Form on Google Sheets

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>
    <base target="_top">
    <link rel="stylesheet" href="" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    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 != '')
      {, 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 = "";
      document.getElementById("display_error").innerHTML = "Please Enter All Information!";
  <div style="padding: 10px;" >
  <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 class="form-group col-md-3">
  <label for="lastname">Last Name</label>
  <input type="text" id="lastname" class="form-control" />
  <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 class="form-row">
  <div class="form-group col-md-3">
  <label for="city">City</label>
  <input type="text" id="city" class="form-control" />
  <div class="form-group col-md-2">
  <label for="state">State</label>
  <input type="text" id="state" class="form-control" />
  <div class="form-group col-md-1">
  <label for="zip" >Zip</label>
  <input type="text" id="zip" class="form-control" />
  <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 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>

Related Posts

Login Google Web App Google Sheets 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.
Bootstrap Sidebar Form Google Sheets 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 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.
CRUD Google Web App 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

Leave a Reply