Implementierung der Bestätigungsseite für das individuell angepasste Google Form

In unserem letzten Artikel mit dem Titel Stolpersteine beim Erstellen eines Kundenformulars mit Google Forms haben wir die Schwierigkeiten zusammengefasst, auf die wir bei der Erstellung eines Kontaktformulars durch die HTML-Anpassung von Google Forms gestoßen sind. Heute stellen wir die Erstellung der Bestätigungsseite vor.

Beim letzten Projekt

Eingabeseite → Abschlussseite nach dem Senden → automatische Bestätigungs-E-Mail

umzusetzen.

Dieses Mal

Eingabeseite → Bestätigungsseite → Abschlussseite nach dem Senden → automatische Bestätigungs-E-Mail

Im Folgenden fassen wir die Umsetzung der Bestätigungsseite zusammen.

Fazit: Mit Google Forms allein lässt sich keine Bestätigungsseite zwischenschalten.

Google Forms erlaubt es nicht, die Übermittlung von Daten per JavaScript frei zu steuern oder Weiterleitungen einzurichten (aus Sicherheitsgründen ist der Inhalt des Formulars per JS nicht zugänglich).

Google Forms

• lässt sich von Grund auf nicht so aufbauen, dass vor dem Absenden eine Zwischenseite (Bestätigung) eingeblendet wird.
• Eingegebene Daten lassen sich außerdem weder an andere Seiten übergeben noch in HTML einfügen.

Daher ist zwingend ein eigenes HTML-Formular mit einer GAS-Web-App erforderlich.

Mit einer GAS-Web-App baut man das Formular statt mit Google Forms mit HTML und GAS. Da ich ein Kontaktformular mit Google Forms 3 erstellen wollte, habe ich Gemini gefragt.

Kann man die auf der statischen Seite (index.html) eingegebenen Daten an die Bestätigungsseite confirm.html übergeben und die Daten dieser Seite mit einem Google Form verknüpfen, etwa über ?

Eine scharfsinnige Idee, aber leider ist dieser Weg grundsätzlich "nahezu unmöglich". Wenn Sie es trotzdem versuchen möchten: ① index.html: Die in das Formular eingegebenen Werte mit JavaScript in sessionStorage speichern. ② confirm.html: Die Werte aus sessionStorage laden und anzeigen. ③ Mit per POST an das formResponse von Google Forms senden (Anpassung über entry.xxxxx). Beachten Sie jedoch: Diese Methode ist nicht offiziell unterstützt, und bei deaktiviertem JavaScript funktioniert sie für Nutzer nicht.

Umsetzung zusätzlich mit JavaScript!

Nun zur Umsetzung mit JavaScript.

① index.html: Eingabeseite erstellen

Zunächst erstellen Sie auf der Eingabeseite das Kontaktformular. An dieser Stelle tragen Sie noch keinen Wert für entry.xxxx aus dem Google Form ein.

<form id="form">
  <input type="text" name="category" placeholder="お問い合わせ種類">
  <input type="text" name="name" placeholder="お名前">
  <input type="email" name="email" placeholder="メールアドレス">
  <button type="submit">確認</button>
</form>

<script>
  document.getElementById('form').addEventListener('submit', function (e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    for (const [key, value] of formData.entries()) {
      sessionStorage.setItem(key, value); // sessionStorage に保存
    }
    window.location.href = '/inquiry/confirm.html';
  });
</script>

Wenn die Schaltfläche „Bestätigen“ gedrückt wird, speichert JavaScript die im Formular eingegebenen Werte in sessionStorage und leitet zur Bestätigungsseite /inquiry/confirm.html weiter.

② confirm.html: Bestätigungsseite erstellen

Die in sessionStorage gespeicherten Werte werden in class="confirmBlock" eingefügt.

Tragen Sie anschließend in das direkt darunterliegende Formular die Werte für entry.xxxxx aus dem Google Form ein.

<div class="confirmBlock">
  <p>お問い合わせ種類: <span id="category"></span></p>
  <p>お名前: <span id="name"></span></p>
  <p>メールアドレス: <span id="email"></span></p>
</div>

<form action="<https://docs.google.com/forms/d/e/1FAIpQLSc-.../formResponse>"
      method="POST" target="hidden_iframe" onsubmit="submitted = true;">
  <input type="hidden" name="entry.1234567890" id="categoryInput">
  <input type="hidden" name="entry.2345678901" id="nameInput">
  <input type="hidden" name="entry.3456789012" id="emailInput">
  <button type="submit">送信</button>
</form>

<iframe name="hidden_iframe" style="display:none;" onload="if(submitted) window.location='/inquiry/complete.html';"></iframe>

<script>
  // 表示とフォームへの挿入
  ['category', 'name', 'email'].forEach(key => {
    const value = sessionStorage.getItem(key);
    document.getElementById(key).textContent = value;
    document.getElementById(key + 'Input').value = value;
  });

  let submitted = false;
</script>

Warum steht hier ein Eingabeformular, obwohl es sich um die Bestätigungsseite handelt…?

Das liegt daran, dass dieses Formular das formResponse von Google Form nutzbar macht!

Das Formular selbst wird mit type="hidden" ausgeblendet.

Die tatsächliche Bestätigungsseite sieht so aus:

Wenn Sie type="hidden" weglassen, ist hier das angepasste GoogleForm verborgen!

Wenn der Button zum Absenden gedrückt wird,

<iframe name="hidden_iframe" style="display:none;" onload="if(submitted) window.location='/inquiry/complete.html';"></iframe>

Anschließend genügt es, zur Abschlussseite complete.html weiterzuleiten!

Der Ablauf sieht so aus: Die in index.html eingegebenen Werte werden an das GoogleForm in confirm.html übergeben und dort abgeschickt.

Da es sich um ein angepasstes GoogleForm handelt, können Sie außerdem eine Auswertungstabelle nutzen und mit GAS automatische Antwortmails versenden.

Fazit

Eine Bestätigungsseite, die sich mit einem einfachen GoogleForm kaum umsetzen lässt, ist mit JavaScript flexibel realisierbar. Hinweis: Der Quellcode ist allerdings für jeden einsehbar 💦

Mit kleinen Anpassungen lassen sich Optik und Bedienbarkeit deutlich verbessern. Probieren Sie es doch einmal aus!