Build a Simple Google Form Add-on using Google Apps Script

6 min readJul 31, 2021

What are Add-ons?

Add-ons are customized applications that integrate with Google Workspace productivity applications. Most Add-ons are built using Google Apps Script.

What goes into the making of an Add-on?

Most Add-ons are built using Google Apps Script and various other languages. In this blog, we will be using Google Apps Script and some HTML to build the card for the Add-on.

In one of the previous blogs, I showed you how to Limit Responses in Google Forms using Google Apps Script. In this blog, I am going to show you how to create an Add-on using the same Google Apps Script code that we had written.

If you haven't read the blog, check out the link below.

https://form-publisher.com/blog/limit-responses-in-google-forms-using-google-apps-script/

Step 1: Sample Google Form

The form that I will be using is a Simple Registration form. (If you prefer working with click here).

The form contains the following details:

Name of the Attendee
Email Address of the Attendee
Phone number of the Attendee

Step 2: Create the Card

Before we get to the main script, we are first going to create the Add-on card where the user will input the maximum responses.

While you are in the Form, launch the Apps Script Editor.

To do that:

(1) Click on 3 dots next to the Send button on the top right.

(2) Next click on the Script Editor option.

This brings up the Script Editor as shown below:

We have reached the Script Editor. Let’s Code.

To create the Add-on card we are going to use some HTML. To write HTML code, you have to open a new HTML file, to do that follow these steps :

Click on the plus button, next to Files.

2. On clicking the plus button, you will be provided with two options: create a new Apps Script file or an HTML file.

3. Click on HTML and in a few seconds, an HTML file will get added to your Google Apps Script Project.

This is the HTML code that will be used to make the Add-on card.

<div class="sidebar"><div class="block form-group"><p><b> Limit Form Responses</b> </p>

Here we have created a div with the id sidebar. Since we are going to accept values from the user, we have to create a form. To do that, we have added the form-group that add some structure to forms. Next, we are adding some text to the card using <p>(represents a paragraph in HTML).

<input type="number" id="max_responses" name="max_responses" placeholder="Enter the Max Responses"/><button class="blue" id="load_responses">Set Limit</button></div>

Here we have used the input to enter the maximum responses in the Google Form. Here we have specified the input type as a number, next we have specified the id and name of the input, which we will be using a bit later. Next, we have specified some text in the placeholder that will come before the input box.

We have created a button with the colour blue and id, that displays the text Set Limit. After the user enters the maximum responses, to set the values he/she has to click on the button.

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Here we have added a CSS stylesheet that will take care of the layout and buttons in the Add-on. Next, we have added a jquery link. As soon as the user clicks the Set Limit Button, it will run the corresponding Google Apps Script code.

<script>  $(function(){    
    $('#load_responses').click(function({
       google.script.run.limit_responses($('#max_responses').val());});
  <buttonid="load_responses" onclick="openResponsesWindow()">Set Limit</button>  });  </script>

Here we are assigning the button the Google Apps Script that will limit responses in Google Forms. Next using the google.script.run we will run the limit_responses function and get the values from the input using the id that we had created previously.

We have completed the code for the Add-on card.

Step3: Google Apps Script Code

To switch back to writing Google Apps Script just click on code. gs file.

function openResponsesWindow() {

var MaxVal = document.getElementById(“max_responses”).value;

google.script.run.limit_responses(MaxVal);

console.log(“function invoked”);

}

</script>

function onOpen(){FormApp.getUi().createAddonMenu().addItem('Open','show_sidebar').addToUi();}

To open the Add-on in the Google Form, we have to get the UI of the Google Form, using the FormApp.getUi(). Next, we are going to create the Add-on menu using the .createAddonMenu() and pass in the sidebar id that we had previously created in the HTML part.

function show_sidebar() {var html = HtmlService.createTemplateFromFile("google_forms").evaluate().setTitle("Form Limitter Add-on");FormApp.getUi().showSidebar(html);}

Here we are going to create the Template from the HTML file that we just created. Next, we are going to set the Title for the Add-on.

function onformsubmit(){var limit_value = PropertiesService.getDocumentProperties().getProperty("limit");

We have created the template successfully its time to write the code to accept the values from the user and store it in the variable.

Using the Properties service we are going to store the value that the user enters in the Add-on. The getDocumentProperties() command stores the data entered by the user in the Add-on. Next, we are going to use the getProperty command and store it in the limit_value variable.

var form = FormApp.getActiveForm();var len = responses.length;Logger.log(len)if (len == limit_value){
     
   form.setAcceptingResponses(false);}}

This part of the script has already been covered in the previous blog. If you haven't read the blog, click here.

Our code for the Add-on is complete.

Step 4: Check the Output

Our code is complete. Select the correct function (OnOpen) as shown below and run the program.

To see the Add-on, go back to your Google Form and click on the Add-on button.

On clicking the Limit Responses Add-on you will get the following options.

Click on Open, to start the Add-on. On successful execution of the script, you will see that the Add-on will appear on the right side of your Google Form.