Inhaltsverzeichnis

Erstellen eines einfachen Eingabeformulars mit Google Apps Script

Möchten Sie Ihr eigenes Online-Eingabeformular erstellen, ohne Google Forms zu verwenden? Mit Google Apps Script können Sie ein benutzerdefiniertes Formular erstellen und es über einen einfachen Weblink teilen.

In diesem Tutorial erfahren Sie, wie Sie ein Google Apps Script-Formular von Grund auf neu erstellen, bereitstellen und testen — auch wenn Sie Anfänger sind.

💡Weitere Tipps und Beispiele finden Sie in unserer Google Sheets-Skriptsammlung.

Schritt 1: Erstellen Sie ein neues Apps-Skriptprojekt

Dieser Schritt richtet den Arbeitsbereich ein, in dem Sie Ihren Code schreiben und verwalten.

Gehen Sie zu Google Apps Script.
Klicken Sie in der Seitenleiste auf “Neues Projekt”, um einen neuen Arbeitsbereich zu erstellen.
Benennen Sie Ihr Projekt in etwas Sinnvolles um (z. B. “Einfache Form”).

Im Editor sehen Sie eine Standarddatei code.gs. In dieser Datei werden alle Ihre serverseitigen Funktionen gespeichert.

Ersetzen Sie den vorhandenen Code durch den folgenden Ausschnitt:

function doGet() {
  // Load and render the main HTML page
  return HtmlService.createHtmlOutputFromFile('Index');
}

Diese Funktion weist die Web-App an, eine HTML-Datei mit dem Namen Index.html anzuzeigen.

Schritt 2: Erstellen Sie die HTML-Datei

In diesem Schritt wird die Webseite erstellt, die Ihre Benutzer sehen werden — die eigentliche Formularoberfläche.

Klicken Sie als Nächstes auf das Symbol “+” neben der Registerkarte „Dateien“ und wählen Sie dann “HTML” aus.

Benennen Sie die Datei in Index um. Dadurch wird die Datei Index.html erstellt, die Ihr Skript laden wird.

Schritt 3: Stellen Sie die Web-App bereit

Durch die Bereitstellung wird Ihr Apps Script-Projekt zu einer echten Web-App, auf die über einen gemeinsam nutzbaren Link zugegriffen werden kann.

Klicken Sie auf “Bereitstellen” und dann auf “Neue Bereitstellung.”
Klicken Sie im Dialogfeld auf das Zahnradsymbol neben „Typ auswählen“ und wählen Sie “Web-App.”
Behalten Sie unter “Ausführen als” die Standardeinstellung bei.
Legen Sie “Wer hat Zugriff” auf „Jeder mit einem Google-Konto“ fest, wenn Sie es teilen möchten.
Klicken Sie auf “Bereitstellen.”

Sie sehen jetzt ein Modal, das Ihre Web-App-URL enthält. Kopieren Sie es zum Testen.

Sie können im Menü „Bereitstellung“ auch auf “Bereitstellungen testen” klicken, um eine Vorschau der Änderungen anzuzeigen, ohne sie erneut bereitzustellen.

Schritt 4: Fügen Sie das Eingabeformular hinzu

In diesem Schritt wird das Formular entworfen, das Benutzer in ihrem Browser ausfüllen.

Im Moment ist Ihre Webseite leer, da Index.html keinen Inhalt hat. Fügen Sie den folgenden Code in Ihre Index.html-Datei ein, um ein einfaches Kontaktformular zu erstellen:

<!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 und aktualisieren Sie dann den Link zu Ihrer Test-Web-App. Sie sehen Ihr Live-Formular.

Here’s what you’ll see when you test your deployment.

Schritt 5: Mit Updates neu bereitstellen

Dieser Schritt speichert Ihre neueste Version und veröffentlicht Ihre Updates.

Nach dem Testen können Sie Ihr Projekt mit Änderungen neu bereitstellen:

Klicken Sie auf “Bereitstellen” → “Bereitstellungen verwalten.”
Suchen Sie Ihre vorhandene Bereitstellung und klicken Sie auf das Bearbeitungssymbol.
Wählen Sie unter Version “Neue Version.”

Klicken Sie erneut auf “Bereitstellen”, um Ihre Updates zu veröffentlichen.

Kopieren Sie die neue Web-App-URL und teilen Sie sie mit jedem, der ein Google-Konto hat.

Zusammenfassung

In dieser Anleitung haben Sie gelernt, wie Sie mit Google Apps Script ein einfaches Eingabeformular als Web-App erstellen und bereitstellen. Sie haben ein HTML-Formular erstellt, es mit Ihrem Apps Script-Projekt verbunden und die bereitgestellte Version online getestet. Dieser Prozess hilft Anfängern zu verstehen, wie clientseitiges HTML und serverseitige Skripte zusammenarbeiten — ein großartiger erster Schritt zum Erstellen dynamischerer Web-Apps im Google Workspace.

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.