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,
- How to create a Data Entry form in Google Sheets
- How to Create Data Entry Form with Google HTML Service and Submit Data to Google Sheets
- 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
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.
The Apps Script includes the following files.
The functions of these code snippets are briefly explained below.
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.
This file was created from Bootstrap Starter Template.
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.
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
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.
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.