Creating Forms in Google Sheets – Sidebar & Modal Dialog forms

There are several ways to create 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 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 elementary 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 them 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.

We can also use almost the same code used in the second post mentioned above for this method.

You need to create a 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
1 l8Um43Fq5cVcyAIMGXDpkQ 2

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 includes the following files.

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

The functions of these code snippets 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 files 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.

2. Index.html

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

This file was created from Bootstrap Starter Template.

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 add new form elements, add the “name” of your new field in the processForm function in the Code.gs file as explained above.

4. JavaScript.html

This file includes the client-side JavaScript functions. This file is 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.

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 could create a data entry form within Google Sheets. I used Google Apps script and Bootstrap toolkit for building the form. You can load the form in the Sidebar, Modal Dialog, or Modeless Dialog in this method. You can add almost any type of form element 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.

15 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
  2. Very informative write-up, but I can’t seem to get the code to run. I’ve both copied into scripts as well as the linked copy, and can’t seem to troubleshoot the issue. Is there anything I needed to alter once copied?

    Reply
    • Hi Ryan,
      I checked the Google Sheet again and it is working fine.
      You don’t need to do any alteration to see the forms I have created.

      1. Just make a copy of the Google Sheet to your Drive using the link provided in the post.
      2. Wait a few seconds and you will see a custom menu named “My Menu” next to Help.
      3. Click this My Menu and chose a form.
      4. For the first time, it will ask permission to allow the code to run in your Google Allow. (You will need to perform few clicks in the pop-up window to allow the action)
      5. After you grant permission, click the My Menu, and select a form type again.
      6. Then you should see the form.
      Reply
  3. Lovely article. I wonder whether anyone can help me with thoughts about how to initialize one of the input fields in this example, using spreadsheet data.

    Reply
  4. Hello. Thank you for sharing this script; it was very useful to me!
    I state that I am a newbie in programming on apps script and if you could give me some advice I am grateful.

    I bound your script to a google sheet and modified the form and everything works. But I have problems when I share the sheet with another user. Even if the other user authorizes the execution of the script, when the user clicks on the “Submit” button the data is not recorded on the google sheet but the data entered in the form is deleted only.
    How could I fix this problem?

    Thanks for the reply. 🙂

    Ruben

    Reply
  5. Beautiful piece of program. Just wondering if there are any other ways to replace the html service as google blocked the app due too security threat. Cheers

    Reply
  6. Thousand THANKS for the tutorial! I found few before, but no luck in success running. This article helps me to solve the problem. Thank you again!

    Reply
  7. Thank you for this clear and helpful tutorial. I was able to customize a data entry form for my Google Sheets spreadsheet that works perfectly!

    Reply
  8. Thanks for this tutorial, it definitely seems to work on your sheet!

    However, on my own personal sheet where I am trying this out, it fails in the Index.HTML portion. Where we put the

    it doesn’t even seem to register this as a valid line of code. It does this for both instances of it in that Index.HTML file.
    I understand that this line references the other files, but it doesn’t seem to work for me.

    Can someone explain exactly what this line of code does and why it might not be working for me? I can’t find anything out about it in documentation or online.

    Reply
  9. The line I am referring to didn’t show up in my comment. What I was referring to is (I’ve written it over 4 lines so it doesn’t get deleted anymore):

    Reply

Leave a Comment

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