Google Forms-Anpassung – Implementierung des Bestätigungsbildschirms

Im vorherigen Artikel mit dem Titel „Fallstricke beim Erstellen von Kundenformularen mit Google Forms" haben wir die Hürden zusammengefasst, auf die wir beim Erstellen von Contact-Formularen mit HTML-Anpassungen in Google Forms gestoßen sind. Diesmal möchten wir die Erstellung einer Bestätigungsseite vorstellen.

Im letzten Projekt haben wir

Eingabebildschirm → Sendebestätigungsbildschirm → Automatische Bestätigungsemail

wurde implementiert.

Diesmal,

Eingabebildschirm → Bestätigungsbildschirm → Abschlussbildschirm → Automatische Bestätigungsmail

Ich fasse die Implementierung des Bestätigungsbildschirms zusammen.

Fazit: Mit Google Forms allein ist es nicht möglich, eine „Bestätigungsseite dazwischenzuschalten".

Google Form ermöglicht es nicht, Formulareingaben mit JavaScript zu verarbeiten oder Übergänge frei zu steuern (aus Sicherheitsgründen hat das Formular eine Struktur, in der JavaScript nicht auf den Inhalt zugreifen kann).

Google Form ermöglicht es nicht,

• einen Bestätigungsbildschirm vor dem Absenden einzufügen.
• Es ist unmöglich, Eingabedaten während der Eingabe an andere Seiten zu senden oder in HTML einzufügen.

Daher ist benutzerdefiniertes HTML-Formular + GAS-Webanwendung notwendig.

Bei einer GAS-Webanwendung wird das Formular mit HTML und GAS erstellt, nicht mit Google Form. Da ich ein Kontaktformular mit Google Form erstellen wollte, habe ich mich an Gemini gewandt.

Kann ich die in index.html eingegebenen Daten an confirm.html weitergeben und diese Daten dann mit an Google Form übermitteln?

Das ist eine scharfsinnige Idee, aber leider ist dieser Weg praktisch "unmöglich". Wenn Sie es unbedingt versuchen möchten: ① index.html → Speichern Sie die eingegebenen Werte mit JavaScript in sessionStorage. ② Lesen Sie die Werte in confirm.html aus sessionStorage und zeigen Sie sie an. ③ POST an GoogleForms formResponse mit (mit entry.xxxxx anpassen) Beachten Sie jedoch, dass dies eine inoffizielle Methode für formResponse ist und nicht funktioniert, wenn JavaScript deaktiviert ist.

Zusätzlich mit JavaScript implementiert!

Nun werden wir die Implementierungsmethode mit JavaScript durchgehen.

①index.html: Eingabeseite erstellen

Zunächst erstellen wir auf der Eingabeseite ein Kontaktformular. Zu diesem Zeitpunkt geben wir den Wert von Google Forms entry.xxxx nicht 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 Bestätigungsschaltfläche geklickt wird, werden die in das Formular eingegebenen Werte mit JavaScript in sessionStorage gespeichert und die Seite wechselt zur Bestätigungsseite /inquiry/confirm.html.

②confirm.html: Erstellen Sie eine Bestätigungsseite

Der in sessionStorage gespeicherte Wert wird in class="confirmBlock" übergeben.

Und geben Sie dann den entry.xxxxx Wert des Google Forms in das darunter liegende Formular 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 wird ein Eingabeformular auf einer Bestätigungsseite platziert…"

Das liegt daran, dass die formResponse von Google Forms in diesem Formular funktioniert!

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

Hier ist der eigentliche Bestätigungsbildschirm

Wenn Sie type=\"hidden\" weglassen, wird hier ein angepasstes Google Form verborgen!

Wenn die Sendeschaltfläche gedrückt wird

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

Es ist OK, wenn Sie zur Seite complete.html weitergeleitet werden!

Der Ablauf besteht darin, dass die in index.html eingegebenen Werte an das in confirm.html befindliche Google Form übergeben und abgesendet werden.

Da es sich um ein angepasstes Google Form handelt, können Sie sowohl die Aggregationstabelle nutzen als auch automatische Antwortemails über GAS versenden.

Fazit

Eine "Bestätigungsseite", die mit Google Formularen allein schwer zu realisieren ist, lässt sich mit JavaScript flexibel implementieren. ※ Nun ja, der Quellcode ist natürlich vollständig sichtbar... 💦

Mit ein paar kleinen Anpassungen können Sie das Aussehen und die Benutzerfreundlichkeit erheblich verbessern. Warum probieren Sie nicht, einen zusätzlichen Schritt zu investieren?