Topics

letztes Mal"Fallstricke beim Erstellen von Kundenformularen mit Google Forms", ich habe einen Artikel geschrieben, in dem ich die Punkte zusammenfasse, die mir beim Erstellen eines Anfrageformulars mithilfe der HTML-Anpassung in Google Forms begegnet sind, und dieses Mal werde ich vorstellen, wie man einen Bestätigungsbildschirm erstellt.

Im vorherigen Fall

Eingabebildschirm → Sendeabschlussbildschirm → Automatische Sendebestätigungs-E-Mail

Dies war die Umsetzung.

Diesmal,

Eingabebildschirm → Eingabebestätigungsbildschirm → Sendeabschlussbildschirm → Automatische Sendebestätigungs-E-Mail

Hier ist eine Zusammenfassung der Implementierung des Bestätigungsbildschirms.

Fazit: Eine Bestätigungsseite lässt sich nicht allein mit Google Forms einfügen

Google Forms ermöglicht Ihnen keine freie Steuerung der Verarbeitung oder Übertragung übermittelter Inhalte per JavaScript (aus Sicherheitsgründen ist ein Zugriff auf die Formularinhalte per JS nicht möglich).

Google Formulare ist

• Die Gestaltung eines Zwischenbildschirms (zur Bestätigung vor dem Absenden) ist nicht möglich.
• Auch das Senden der eingegebenen Daten an andere Seiten oder das Einfügen in HTML ist nicht möglich.

Daher, "Original-HTML-Formular + GAS-Web-App" ist erforderlich.

GAS Web AppIch habe mich für HTML und GAS anstelle von Google Forms entschieden. Ich wollte ein Anfrageformular mit Google Form 3 erstellen und habe daher Gemini gefragt.

Ist es möglich, die auf einer statischen Seite (index.html) eingegebenen Daten an die Bestätigungsseite (confirm.html) weiterzugeben und die Daten auf dieser Seite dann mit

mit einem Google-Formular zu verknüpfen?

Die Idee ist zwar clever, aber leider ist dieser Ansatz prinzipiell nahezu unmöglich. Solltest du es wirklich tun: 1. index.html → Speichere die im Formular eingegebenen Werte mit JavaScript im SessionStorage. 2. confirm.html liest und zeigt die Werte aus dem SessionStorage an. 3. sendet einen POST an die formResponse von Google Forms (Anpassung mit entry.xxxxx). Beachte jedoch, dass dies eine inoffizielle Methode von formResponse ist und den Nachteil hat, dass sie bei Nutzern mit deaktiviertem JavaScript nicht funktioniert.

Plus mit JavaScript implementiert!

Sehen wir uns nun an, wie es mit JavaScript implementiert wird.

①index.html: Eine Eingabeseite erstellen

Erstellen Sie zunächst auf der Eingabeseite ein Anfrageformular. Hierfür können Sie Google Forms verwenden.entry.xxxxGeben Sie keinen Wert 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 gedrückt wird, wird der im Formular eingegebene Wert mithilfe von JavaScript im SessionStorage gespeichert und die Bestätigungsbildschirmseite angezeigt./inquiry/confirm.htmlSie werden weitergeleitet zu.

②confirm.html: Erstellen Sie eine Bestätigungsseite

Der im sessionStorage gespeicherte Wertclass=”confirmBlock”Einfüllen.

Und geben Sie im Formular direkt darunter GoogleForm einentry.xxxxxBitte geben Sie den Wert 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 hier ein Eingabeformular einfügen, wenn es sich um eine Bestätigungsseite handelt?

Es ist Google FormformResponseDenn in dieser Form funktioniert es!

type="hidden"Das Formular selbst wird ausgeblendet.

Hier ist der eigentliche Bestätigungsbildschirm

type="hidden"Wenn Sie es entfernen, wird Ihr benutzerdefiniertes Google-Formular hier ausgeblendet!

Wenn die Senden-Taste gedrückt wird

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

Seite zum Abschluss der Übermittlungcomplete.htmlGehen Sie einfach zu und schon kann es losgehen!

Als Flussindex.htmlDer eingegebene Wert inconfirm.htmlEs übergibt die Daten an das Google-Formular und sendet es.

Da es sich um ein benutzerdefiniertes Google-Formular handelt, können Sie auch Übersichtstabellen verwenden und mithilfe von GAS automatische Antwort-E-Mails senden.

Zusammenfassung

Ein „Bestätigungsbildschirm“, der mit Google Forms allein nur schwer zu implementieren ist, lässt sich durch den Einsatz von JavaScript flexibel umsetzen. (Der Quellcode ist allerdings vollständig sichtbar.)

Eine kleine Anpassung kann das Erscheinungsbild und die Benutzerfreundlichkeit erheblich verbessern. Warum also nicht einfach mal ausprobieren?