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

July 29, 2021
Build a Simple Google Form Add-on using Google Apps Script
Table of Contents
Table of Contents

What are Google Form Add Ons?

Add-ons are customized applications that integrate with Google Workspace productivity applications, such as the Form Publisher add-on. Most Add-ons are built using Google Apps Script.

Most Add Ons are made in the Google Form Apps Script Editor

Most Add-ons are built using script editor in Google Docs. 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 shared a detailed Google Apps Script tutorial on 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/

If you prefer to watch a video instead of reading, we've got you covered:

Step 1: Sample Google Form

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

The form contains the following details:

  1. Name of the Attendee
  2. Email Address of the Attendee
  3. Phone number of the Attendee


Step 2: Creating the Card with the Google Docs Script Editor

Before we get to the main scripts and Google Apps editor, 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, our Google script language of choice will be HTML. To write HTML code, you have to open a new HTML file, to do that follow these steps :

  1. 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.

<div class="sidebar">
  <div class="block form-group">
    <p><b> Limit Form Responses</b> </p>
      <input type="number" id="max_responses" name="max_responses"   placeholder="Enter the Max Responses"/>
      <button class="blue" id="load_responses" onclick="openResponsesWindow()">Set Limit</button>
    </div>
  </div>


<script>

  function openResponsesWindow() {
    const maxVal = document.getElementById("max_responses").value;
    google.script.run.limit_responses(maxVal);
    console.log("function invoked");
  }

</script>

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" onclick="openResponsesWindow()">Set Limit</button>

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.

Here we have created a new button with the ID load_responses. On clicking the button we have to run the Google Apps Script code that limits responses in Google Forms. Using the Onclick command we can assign the function that we want to run by clicking the button.

<script>
    function openResponsesWindow() {
        const maxVal = document.getElementById(“max_responses”).value;
        google.script.run.limit_responses(maxVal);
        console.log(“function invoked”);
    }
</script>

We are going to open the function that we passed in the Onclick command. Next, we are going to get the maximum responses and store it in a variable using the Document.getElementById, by passing the input function id. Using the google.script.run we will run the limit_responses function by passing the maxim responses variable.

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

Step 3: Switching from HTML to Google Apps Script Editor

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

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

}

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

}

function onformsubmit(){
    const limit_value = PropertiesService.getDocumentProperties().getProperty("limit");
console.log(limit_value);
    const form = FormApp.getActiveForm();
    const responses = form.getResponses();

  //Logger.log("The maximum responses are : " + maximum_responses);
  const len = responses.length;
    
  Logger.log(len)

  if (len == limit_value){

    form.setAcceptingResponses(false);
  }

}

function limit_responses(maximum_responses){

  PropertiesService.getDocumentProperties().setProperty("limit",maximum_responses);

  const form = FormApp.getActiveForm();
  const responses = form.getResponses();
  //Logger.log("The maximum responses are : " + maximum_responses);
  const len = responses.length;
  Logger.log(len)

  if (len == maximum_responses){

    form.setAcceptingResponses(false);
  }
}
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() {
    const html = HtmlService.createTemplateFromFile("google_forms").evaluate().setTitle("Form Limiter 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(){
    const limit_value = PropertiesService.getDocumentProperties().getProperty("limit");

We have successfully created the template 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.

  const form = FormApp.getActiveForm();
  const 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.

Learn more about Google Apps Script here

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.

Here I have set the limit to 2 responses and clicked on the Set Limit button.

Here you can see that on reaching 2 responses the Google Form has automatically closed.

Creating Google Form Add Ons with Google Docs App Scripts: The Summary

We saw how you can build a simple Google Form Add-on that limits responses using Google Apps Script and some HTML.

Hope you enjoyed the blog. Feel free to reach out if you have any issues/feedback at aryanirani123@gmail.com.


Great! Next, complete checkout for full access to Form Publisher Blog
Welcome back! You've successfully signed in
You've successfully subscribed to Form Publisher Blog
Success! Your account is fully activated, you now have access to all content
Success! Your billing info has been updated
Your billing was not updated