How to get input from HTML form using Google Apps Script

There are different ways to display an HTML form from Google Apps Script. You can display a form in a Google Sheet (from a custom menu for example) or you can create a standalone web app and display the web form.

Let us first see how to display an HTML form from a Google Sheet.

Custom form in a Google Sheet

First, create an HTML page to hold the form. Select menu item: File → New and then HTML.
Here is the HTML code of the form:

form.html

Styling in Apps Script HTML pages

Notice the link to the Style sheet in the HTML code above. This is the style sheet recommended for Add-ons by Google. Read the documentation for this style sheet here. This style sheet provides a consistent look for the add-on user interfaces.

Display the form in a box

In order to display the form, let us add a menu item to the Google Sheet.

Then we display the form in the addItem() function

The parameter to createHtmlOutputFromFile() is the name of the HTML template we created in the first step.

Do File → Save. Close and re-open the Google Sheet.

Try the Menu item Form → add Item. It should show the form.

Receiving form input

The form HTML code requires a bit of client-side Javascript to post the form data using the google.script.run interface. You can call any server-side function from the client-side using the google.script.run interface.

For example, google.script.run.myFunction() will call the function myFunction() on the server-side.

Here is the script that we add to the form.html

The script attaches an event handler to the onSubmit event of the form. In the event handler, it calls preventDefault() to stop further processing and then calls the server-side function. If you don’t call the close() call, the dialog box will remain open.

Now, on the server-side , we have to add the function like this:

The server-side function just appends the form data to the Google Sheet.

See Also

Leave a Reply 0 comments

Leave a Reply: