Google Apps Script: Erstellen eines einfachen Eingabeformulars als Web-App
Google Apps Script (GAS) ermöglicht es, schlanke Tools in Google Workspace zu erstellen. Ein nützliches Beispiel ist das Erstellen eines einfachen Eingabeformulars und das Bereitstellen als Web-App , die mit einem Google-Link geteilt werden kann. In dieser Schritt-für-Schritt-Anleitung zeigen wir Ihnen, wie Sie ein einfaches Eingabeformular mit Apps Script erstellen, bereitstellen und testen.
Schritt 1: Rufen Sie den Google Apps Script Editor auf
Rufen Sie den Google Apps Script Editor auf und klicken Sie auf Neues Projekt.
Sie werden zum Editor weitergeleitet, wo Sie eine Datei mit dem Namen Code.gs sehen. Hier werden Ihre serverseitigen Funktionen hingehen.
Tipp: Benenne dein Projekt in eindeutig. Dies hilft wenn eine Vielzahl von Dateien dort liegen.
Schritt 2: Fügen Sie die Hauptfunktion hinzu
Löschen Sie den Standardcode in Code.gs, und fügen Sie die folgende Funktion ein. Es weist Apps Script an, eine HTML-Datei zu laden, wenn die Web-App geöffnet wird.
function doGet() {
// Load and render the main HTML page
return HtmlService.createHtmlOutputFromFile('Index');
}
Schritt 3: Erstellen der HTML-Datei
Wir benötigen eine Index.html Datei, um das Formular anzuzeigen:
- Klicken Sie auf das +-Symbol neben „Dateien“
- Wählen Sie HTML
3. Benennen Sie die Datei in Index um
Schritt 4: Bereitstellen als Web-App
Stellen Sie vor dem Hinzufügen des Formulars das Projekt bereit, um einen Link zu generieren:
- Klicken Sie auf Bereitstellen > Neue Bereitstellung
2. Wählen Sie Web-App als Typ aus
3. Im Feld „Neue Beschreibung“ ist das Hinzufügen einer Beschreibung optional. Belassen Sie die Einstellung „Ausführen als“ auf dem Standardwert. Wenn Sie den Zugriff über einen Link freigeben möchten, ändern Sie die Option „Wer hat Zugriff“ in „Jeder mit einem Google-Konto“. Klicken Sie dann auf Bereitstellen.
- Kopieren Sie die generierte Web-App-URL und klicken Sie auf Fertig. Diese URL wird verwendet, um Ihre App zu testen.
5. Um die Änderungen zu überprüfen, öffnen Sie den Testlink, indem Sie die URL in Ihren Browser einfügen. Zu diesem Zeitpunkt wird die Seite leer angezeigt, da die html Datei noch keinen Inhalt enthält.
Hinweis: Den Testlink für das Tool finden Sie, indem Sie unter der Schaltfläche „Bereitstellen“ auf „Testbereitstellungen“ klicken . Über diesen Link können Sie alle gespeicherten Änderungen anzeigen, ohne das Tool erneut bereitstellen zu müssen. Beachten Sie, dass der Testlink nur von Benutzern aufgerufen werden kann, die Bearbeitungszugriff auf Ihr Projekt haben.
Schritt 5: Fügen Sie das Eingabeformular hinzu
Als Nächstes fügen wir ein einfaches Formular mit den Feldern Vorname, Nachname, E-Mail und einer Schaltfläche Speichern hinzu.
Kopieren Sie dazu den folgenden Code, und fügen Sie ihn in die Index.html Datei ein:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Simple Contact Form</title>
</head>
<body>
<h1>Simple Contact Form</h1>
<form id="myForm">
<fieldset>
<legend>Contact Details</legend>
<label for="first-name">First name</label><br />
<input
id="first-name"
name="firstName"
type="text"
autocomplete="given-name"
required
/><br /><br />
<label for="last-name">Last name</label><br />
<input
id="last-name"
name="lastName"
type="text"
autocomplete="family-name"
required
/><br /><br />
<label for="email">Email</label><br />
<input
id="email"
name="email"
type="email"
autocomplete="email"
required
/><br /><br />
<button type="submit">Save</button>
</fieldset>
</form>
</body>
<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault();
const first = document.getElementById("first-name").value;
const last = document.getElementById("last-name").value;
const email = document.getElementById("email").value;
alert(
`Your details:\nFirst Name: ${first}\nLast Name: ${last}\nEmail: ${email}`);
});
</script>
</html>
Speichern Sie die Datei, aktualisieren Sie den Web-App-Link, und das Formular sollte jetzt angezeigt werden.
Schritt 6: Aktualisieren und erneutes Bereitstellen
Wenn Sie Änderungen vornehmen:
- Klicken Sie auf Bereitstellen > Verwalten von Bereitstellungen
2. Klicken Sie auf „Bearbeiten“ und wählen Sie dann unter „Version“ die Option „Neue Version“ aus. Klicken Sie danach auf Bereitstellen, um die Änderungen zu speichern und zu veröffentlichen.
Wenn Sie fertig sind, kopieren Sie die Web-App-URL, die im Modal angegeben ist. Sie können diesen Link für alle Personen freigeben, die über ein Google-Konto verfügen, damit diese auch die von Ihnen erstellte Web-App anzeigen können.
Endergebnis
Sie haben nun ein einfaches Eingabeformular als Web-App mit Google Apps Script erstellt. In diesem Beispiel wird nur eine Warnung mit den Formulardaten angezeigt, die Sie jedoch erweitern können auf:
- Speichern Sie Eingaben direkt in Google Sheets
- Hinzufügen von Validierungsregeln
- Weitere Felder einschließen
Mit Apps Script können Sie schnell kleine Webanwendungen erstellen und freigeben, ohne externe Server zu benötigen.
Benötigen Sie Unterstützung bei Google Sheets?
Wir als exact construct programmieren mit einem Team von rd. 20 Mitarbeitern seit über 10 Jahren Tools. Wir sind ein Nischenanbieter der spezialisiert auf Makros/VBA-Codes sowie generell Microsoft-Produkte ist. Daneben unterstützen wir Unternehmen bei Google Scripts, Google Sheets, etc.
Haben Sie ein Excel-Problem? Benötigen Sie einen Programmierer? Rufen Sie uns unverbindlich an +41 52 511 05 25 oder kontaktieren Sie uns via Kontaktformular.
