In this section, we'll explore how to create interactive web apps with Google Apps Script that allow users to submit information. This is crucial for building tools that collect data, trigger actions, or customize workflows. We'll achieve this by leveraging HTML forms and the power of Google Apps Script's HTML Service to handle user input.
The core of handling user input lies in creating an HTML form within your Apps Script web app. An HTML form uses elements like <input>, <textarea>, and <select> to gather information from the user. When the user clicks a submit button, this data can be sent back to your Apps Script for processing.
<html>
<head>
<base target="_top">
</head>
<body>
<form id="myForm">
<label for="name">Your Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Your Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>To make this HTML accessible via Google Apps Script, you'll typically have an index.html file and a corresponding Code.gs file. The Code.gs file will have a function that returns the HTML content. For example, the doGet(e) function is commonly used for web apps.
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index');
}Now, how do we get that form data back to our Apps Script? We use client-side JavaScript within our HTML file to capture the form submission and send the data to the server-side Apps Script. This involves adding an event listener to the form and using the google.script.run API.
<html>
<head>
<base target="_top">
<script>
function handleFormSubmit(formObject) {
google.script.run.processForm(formObject);
}
</script>
</head>
<body>
<form id="myForm" onsubmit="handleFormSubmit(this); return false;">
<label for="name">Your Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Your Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>The onsubmit="handleFormSubmit(this); return false;" attribute on the form is key. It calls our handleFormSubmit JavaScript function, passing the form object itself (this). The return false; prevents the browser's default form submission, which would refresh the page.
Inside the handleFormSubmit function, google.script.run.processForm(formObject) is where the magic happens. It asynchronously calls a server-side function named processForm in your Apps Script, passing the entire formObject as an argument. We'll define processForm in our Code.gs file.
function processForm(formObject) {
var name = formObject.name;
var email = formObject.email;
Logger.log('Received name: ' + name + ', email: ' + email);
// You can now use this data, e.g., write to a spreadsheet, send an email, etc.
}The formObject in processForm becomes an object where the keys are the name attributes of your form elements. So, formObject.name will contain the value from the input field with name="name", and so on. The Logger.log statement is a great way to test and see the data that was submitted.
This fundamental pattern of using an HTML form, client-side JavaScript to capture and send data, and a server-side Apps Script function to process it, forms the backbone of creating interactive web applications with Google Apps Script.
flowchart TD
A[User fills HTML form] --> B{Submit button clicked}
B --> C[Client-side JS captures data]
C --> D[google.script.run.processForm(data)]
D --> E[Server-side Apps Script function (e.g., processForm)]
E --> F[Process the data (e.g., log, save, email)]
F --> G[Optional: Send response back to client]