Mise en œuvre d'un écran de confirmation personnalisé pour Google Form

Dans l'article précédent intitulé « Les pièges à éviter lors de la création de vos formulaires avec Google Form », nous avions résumé les points de blocage rencontrés lors de la création d'un formulaire de contact via la personnalisation HTML de Google Form. Cette fois, nous vous présentons la création d'un écran de confirmation.

Dans le projet précédent,

écran de saisie → écran de confirmation d'envoi → e-mail de confirmation automatique

était l'implémentation.

Cette fois,

écran de saisie → écran de confirmation de saisie → écran de confirmation d'envoi → e-mail de confirmation automatique

nous résumons l'implémentation de l'écran de confirmation.

Conclusion : Google Form seul ne permet pas « d'insérer une page de confirmation »

Google Forms ne permet pas de contrôler librement le traitement ou la redirection des données soumises via JavaScript (pour des raisons de sécurité, la structure du formulaire n'est pas accessible via JS).

Google Forms

• ne peut pas intégrer un écran intermédiaire (confirmation) avant l'envoi.
• Il est impossible d'envoyer les données saisies à d'autres pages ou de les injecter dans du HTML.

Par conséquent, un formulaire HTML personnalisé + une application Web GAS devient obligatoire.

Avec une application Web GAS, vous créez le formulaire en HTML et GAS plutôt qu'avec Google Forms. Comme je voulais créer un formulaire de contact en utilisant Google Forms, j'ai décidé de consulter Gemini.

Est-ce que je pourrais passer les données saisies d'une page statique (index.html) à la page de confirmation (confirm.html), puis envoyer ces données à Google Forms via ?

C'est une excellente idée, mais malheureusement, cette approche est essentiellement "impossible en pratique". Si vous insistez vraiment : ①index.html → Enregistrez les valeurs du formulaire dans sessionStorage via JavaScript. ②Sur confirm.html, lisez et affichez les valeurs depuis sessionStorage. ③Utilisez pour effectuer un POST vers formResponse de Google Forms (en utilisant entry.xxxxx pour la personnalisation). Cependant, cette méthode n'est pas officielle pour formResponse, et elle ne fonctionnera pas pour les utilisateurs ayant JavaScript désactivé. Soyez vigilant à ce sujet.

Implémentons avec JavaScript !

Passons maintenant à la méthode d'implémentation en utilisant JavaScript.

①index.html : créer la page de saisie

D'abord, créez un formulaire de contact sur la page de saisie. À ce stade, n'entrez pas la valeur entry.xxxx du Google Form.

<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 le bouton de confirmation est cliqué, les valeurs saisies dans le formulaire sont enregistrées dans sessionStorage via JavaScript, et la page s'oriente vers la page de confirmation /inquiry/confirm.html.

②confirm.html : créer la page de confirmation

Injectez les valeurs enregistrées dans sessionStorage dans class="confirmBlock".

Ensuite, entrez la valeur entry.xxxxx du Google Form dans le formulaire situé directement en dessous.

<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 sur une page de confirmation…

C'est parce que nous utilisons formResponse du Google Form avec ce formulaire !

Le formulaire lui-même est masqué avec type="hidden".

Voici à quoi ressemble la page de confirmation réelle

Si vous supprimez type="hidden", un formulaire Google personnalisé caché s'affichera ici !

Lorsque le bouton d'envoi est cliqué

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

Il suffit de rediriger vers la page d'écran de fin d'envoi complete.html !

Le flux consiste à envoyer la valeur saisie dans index.html vers le formulaire Google situé sur confirm.html et à l'envoyer.

Comme il s'agit d'un formulaire Google personnalisé, vous pouvez utiliser une feuille de calcul d'agrégation, et vous pouvez également envoyer des e-mails de réponse automatique avec GAS.

Conclusion

L'« écran de confirmation » qui est difficile à réaliser avec Google Forms seul peut être mis en œuvre de manière flexible en utilisant JavaScript. ※Bien que le code source soit complètement visible, hein 💦

Avec juste un petit peu de personnalisation, vous pouvez grandement améliorer l'apparence et la convivialité, alors pourquoi ne pas faire cet effort supplémentaire ?