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
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<form id="myform">
<div class="block form-group">
<label for="first_name">First Name</label>
<input type='text' name='first_name' id="first_name" required="required"/>
</div>
<div class="block form-group">
<label for="last_name">Last Name</label>
<input type='text' name='last_name' id="last_name" required="required"/>
</div>
<div class="block form-group">
<label for="email">Email</label>
<input type='text' name='email' id="email" required="required"/>
</div>
<div class="block">
<button type="submit" class="action">Submit</button>
</div>
</form>
</body>
</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.
function onOpen()
{
var ui = SpreadsheetApp.getUi();
ui.createMenu('Form')
.addItem('add Item', 'addItem')
.addToUi();
}
Then we display the form in the addItem() function
function addItem()
{
var html = HtmlService.createHtmlOutputFromFile('form');
SpreadsheetApp.getUi()
.showModalDialog(html, 'Add New Item');
}
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
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<form id="myform">
<div class="block form-group">
<label for="first_name">First Name</label>
<input type='text' name='first_name' id="first_name" required="required"/>
</div>
<div class="block form-group">
<label for="last_name">Last Name</label>
<input type='text' name='last_name' id="last_name" required="required"/>
</div>
<div class="block form-group">
<label for="email">Email</label>
<input type='text' name='email' id="email" required="required"/>
</div>
<div class="block">
<button type="submit" class="action">Submit</button>
</div>
</form>
<script>
document.querySelector("#myform").addEventListener("submit",
function(e)
{
e.preventDefault(); //stop form from submitting
google.script.run.addNewItem(this);
google.script.host.close();//close this dialogbox
}
);
</script>
</body>
</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:
function addNewItem(form_data)
{
var sheet = SpreadsheetApp.getActive().getSheetByName('Sheet1');
sheet.appendRow([form_data.first_name, form_data.last_name, form_data.email]);
}
The server-side function just appends the form data to the Google Sheet.