Topics

dernière fois"Pièges à éviter lors de la création de formulaires clients avec Google FormsJ'ai écrit un article résumant les points que j'ai rencontrés lors de la création d'un formulaire de demande de renseignements à l'aide de la personnalisation HTML dans Google Forms, et cette fois-ci, je vais vous présenter comment créer un écran de confirmation.

Dans le cas précédent,

Écran de saisie → Écran de confirmation d'envoi → Envoi automatique de l'e-mail de confirmation

Voici comment cela s'est passé.

Cette fois,

Écran de saisie → Écran de confirmation de saisie → Écran de fin d'envoi → Courriel de confirmation d'envoi automatique

Voici un résumé de la mise en œuvre de l'écran de confirmation.

Conclusion : Il est impossible d’insérer une page de confirmation uniquement avec Google Forms.

Google Forms ne vous permet pas de contrôler librement le traitement ou la transition du contenu soumis à l'aide de JavaScript (pour des raisons de sécurité, le contenu du formulaire n'est pas accessible via JavaScript).

Google Forms est

• Il n'est pas possible de concevoir un écran intermédiaire (pour confirmation) avant l'envoi.
• Il n'est pas non plus possible d'envoyer les données que vous saisissez à d'autres pages ni de les insérer dans du code HTML.

Donc, "Formulaire HTML original + application web GAS" est requis.

Application Web GASJ'ai opté pour HTML et GAS mais une Google Forms. Je souhaitais créer un formulaire de demande de renseignements avec Google Forms 3, j'ai donc fait appel à Gemini.

Est-il possible de transmettre les données saisies sur une page statique (index.html) à la page de confirmation (confirm.html) puis de lier les données de cette page à un formulaire Google avec

?

C'est une idée astucieuse, mais malheureusement, cette approche est en principe quasiment impossible. Si vous souhaitez vraiment l'utiliser : 1. index.html → Enregistrez les valeurs saisies dans le formulaire dans sessionStorage à l'aide de JavaScript. 2. confirm.html lit et affiche les valeurs stockées dans sessionStorage. 3. La balise envoie une requête POST à ​​la réponse de Google Forms (personnalisable avec entry.xxxxx). Attention : cette méthode de réponse n'est pas officielle et présente l'inconvénient de ne pas fonctionner pour les utilisateurs ayant désactivé JavaScript.

De plus, implémenté avec JavaScript !

Voyons maintenant comment l'implémenter en utilisant JavaScript.

①index.html: Créer une page de saisie

Commencez par créer un formulaire de demande sur la page de saisie. Vous pouvez utiliser Google Forms.entry.xxxxNe saisissez aucune valeur.

<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>

Lorsque l'utilisateur appuie sur le bouton de confirmation, la valeur saisie dans le formulaire est enregistrée dans sessionStorage à l'aide de JavaScript, et la page de confirmation s'affiche./inquiry/confirm.htmlVous serez redirigé vers.

②confirm.html: Créer une page de confirmation

La valeur stockée dans sessionStorageclass=”confirmBlock”Versez dans.

Et dans le formulaire juste en dessous, saisissez GoogleFormentry.xxxxxVeuillez saisir la valeur.

<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>

Pourquoi placer un formulaire de saisie ici alors qu'il s'agit d'une page de confirmation ?

C'est un formulaire Google.formResponseParce que ça fonctionne sous cette forme !

type="hidden"Le formulaire lui-même sera caché.

Voici l'écran de confirmation.

type="hidden"Si vous le supprimez, votre formulaire Google personnalisé sera caché ici !

Lorsque le bouton d'envoi est enfoncé

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

Page de confirmation de soumissioncomplete.htmlIl suffit de vous déplacer et c'est parti !

En tant que fluxindex.htmlLa valeur saisie dansconfirm.htmlIl transmet les données au formulaire Google et les envoie.

Comme il s'agit d'un formulaire Google personnalisé, vous pouvez également utiliser des feuilles de calcul récapitulatives et envoyer des e-mails de réponse automatiques via GAS.

résumé

Un écran de confirmation difficile à mettre en place avec Google Forms peut être implémenté de manière flexible grâce à JavaScript. (Attention toutefois, le code source est entièrement visible.)

Un peu de personnalisation peut grandement améliorer l'apparence et la facilité d'utilisation, alors pourquoi ne pas essayer ?