Creating Forms in Google Sheets – Sidebar & Modal Dialog forms

There are a number of ways for creating forms in Google Sheets.

The most popular and easiest method is to use Google Forms. However, it is a general-purpose form building application. Sometimes you may find it very difficult to create a form that is in your mind with Google Forms. Especially when it comes to mass data entry works, you cannot use it.

So, what are the other methods for creating forms in Google Sheets? You can build various types of forms using Google Apps Scripts. In some of my previous posts, I explained,

  1. How to create a Data Entry form in Google Sheets
  2. How to Create Data Entry Form with Google HTML Service and Submit Data to Google Sheets
  3. How to Create an Online Data Entry Form that can Perform CRUD Operations on Google Sheets

The first method described above is very basic and uses a small piece of code. But it is a way to build a form within the Spreadsheet.

The other two are completely built with Google Apps Scripts. You can publish them as Web Apps and share it with others without giving access to your Google Sheet.

Let’s see how to create HTML forms inside Google Sheet Sidebar and in Modal Dialog.

Creating forms in Google Sheets and show in the Sidebar or Modal Dialog

For creating this form, we are going to use Google Apps Scripts;

And also, we are going to use Bootstrap HTML, CSS, and JS library to add styles to the form.

For this method also, we can use almost the same code used in the second post mentioned above.

You need to create bound script to display Modal and Sidebar using this method.

Before start, watch the below animation to see how the final form is working.

Make a copy of the Google Sheet

Go to Tools > Script editor to access the code

The Google Sheet in the above link contains all the scripts. So, you can start customizing it to match your requirements. However, I will explain the code below for easy understanding.

Code Snippets

The Apps Script include the following files.

  1. Code.gs
  2. Index.html
  3. Form.html
  4. JavaScript.html

The codes inside the functions are briefly explained below.

1. Code.gs

The Code.gs file includes the following functions,

onOpen: Create a custom menu (My Menu) and sub-menus (Sidebar Form, Modal Dialog Form, Modeless Dialog Form) when you open the Google Sheets.

showFormInSidebar: When you click the sub-menu item “Sidebar Form” this function display the form on the right side of your Google Sheet.

showFormInModalDialog: When you click the sub-menu item “Modal Dialog Form”, this function displays the form inside the Modal Dialog. With Modal Dialog, you can see the Google Sheet in the background. But, you cannot edit the sheet until you close the modal dialog.

showFormInModlessDialog: When you click the sub-menu item “Modeless Dialog Form”, this function displays the form inside the Modeless Dialog. With Modeless Dialog also, you can see the Google Sheets in the background. However, you can edit the sheet without closing the Modeless Dialog.

processForm: This function extract the values in the form object and appends the data to Google Sheet. If you are adding more form items, you need to include the “name” of that item inside this function.

include: As you can see in the above 4 Apps Script files, I have separated, Form and JavaScript file from the Index file. I have done this to reduce the complexity of the code (See HTML Service: Best Practices). These separated codes are included in the Index file using this include function.

//CREATE CUSTOM MENU
function onOpen() { 
  var ui = SpreadsheetApp.getUi();
  ui.createMenu("My Menu")
    .addItem("Sidebar Form","showFormInSidebar")
    .addItem("Modal Dialog Form","showFormInModalDialog")
    .addItem("Modeless Dialog Form","showFormInModlessDialog")
    .addToUi();
}

//OPEN THE FORM IN SIDEBAR 
function showFormInSidebar() {      
  var form = HtmlService.createTemplateFromFile('Index').evaluate().setTitle('Contact Details');
  SpreadsheetApp.getUi().showSidebar(form);
}


//OPEN THE FORM IN MODAL DIALOG
function showFormInModalDialog() {
  var form = HtmlService.createTemplateFromFile('Index').evaluate();
  SpreadsheetApp.getUi().showModalDialog(form, "Contact Details");
}


//OPEN THE FORM IN MODALLESS DIALOG
function showFormInModlessDialog() {
  var form = HtmlService.createTemplateFromFile('Index').evaluate();
  SpreadsheetApp.getUi().showModelessDialog(form, "Contact Details");
}


//PROCESS FORM
function processForm(formObject){ 
  var sheet = SpreadsheetApp.getActiveSheet();
  sheet.appendRow([formObject.first_name,
                formObject.last_name,
                formObject.gender,
                formObject.email
                //Add your new field names here
                ]);
}

//INCLUDE HTML PARTS, EG. JAVASCRIPT, CSS, OTHER HTML FILES
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

2. Index.html

The HTML form and the client-side scripts are included in this file. When you click the menu items, this file is evaluated and displayed on the Sidebar or Modal Dialog. The JavaScript and Form are included inside this file as explained above.

This file was created from Bootstrap Starter Template.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <?!= include('JavaScript'); ?> <!-- See JavaScript.html file -->
    <title>Contact Details</title>
  </head>
  
  <body class="bg-secondary text-light">
    <div class="container">
      <?!= include('Form'); ?> <!-- See Form.html file -->
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

3. Form.html

This includes all the form components. You can add or remove the form items in this file. You can grab the code snippets for required form items from Bootstrap Documentation.

If you are adding new form elements, add the “name” of your new field in the processForm function in the Code.gs file as explained above.

<form id="myForm" onsubmit="handleFormSubmit(this)">
  <div class="form-group">
    <label for="first_name">First Name</label>
    <input class="form-control form-control-sm" type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
  </div>
  <div class="form-group">
    <label for="last_name">Last Name</label>
    <input class="form-control form-control-sm" type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
  </div>
  <div class="form-group">
    <label for="gender">Gender</label>
    <select class="form-control form-control-sm" id="gender" name="gender" required>
      <option value="" selected>Choose...</option>
      <option value="Male">Male</option>
      <option value="Female">Femle</option>
    </select>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input class="form-control form-control-sm" type="email" class="form-control" id="email" name="email">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

4. JavaScript.html

This file includes the client-side JavaScript functions. This file also included in the Index.html as explained above.

The preventFormSubmit function prevents the default behavior of the form. So if you click the submit button, you won’t leave the page.

When you click the Submit button, it will call the handleFormSubmit and pass the formObject as a parameter. Then this formObject passes to the processForm function in the Code.gs file explained above.

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);    
      
      
  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();
  }
</script>

How to Edit & Run this Code

First, make a copy of the Google Sheet with the above code from this Link.

When you open the Google Sheets, you will see the My Menu next to the Help Menu. Click the My Menu and Select the form type you want to open. When you run the code (open a form) for the first time, it will ask your permission to run the code in your Google Account. Authorize it and click the menu again.

To edit the code,

Click Tools > Script Editor

Form Validation

In this example, I have used browser defaults for data validation. However, depending on the requirements you may need more customization. You can learn more about Bootstrap form validation from this link.

Wrapping Up

This post explained how you can create a data entry form withing the Google Sheets. I used Google Apps script and Bootstrap toolkit for building the form. In this method, you can load the form in the Sidebar, Modal Dialog, or Modeless Dialog. You can add almost any type of form elements to this form. You can learn them from the Bootstrap links provided above. You can also extend this form to make all the CRUD operations and can get some ideas from the post mentioned above on the CRUD application.

3 thoughts on “Creating Forms in Google Sheets – Sidebar & Modal Dialog forms”

  1. Hello and thank you for a great job! But i have some question –
    i change this form to my needs and got a problem with part – everything what i add, is not adding to the table. Can you help me what to do, is my first project lol just working needs

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.