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

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/

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: 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 :

  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: Google Apps Script Code

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.

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.

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