Implémentation de l'écran de confirmation pour une personnalisation de Google Form

Dans notre précédent article intitulé « Les pièges à éviter lors de la création d'un formulaire client avec Google Form », nous avons résumé les difficultés rencontrées lors de la création d'un formulaire de contact par personnalisation HTML de Google Form. Cette fois, nous présentons la création de l'écran de confirmation.

Dans le projet précédent,

nous avions mis en place l'écran de saisie → l'écran de fin d'envoi → l'e-mail automatique de confirmation d'envoi

.

Cette fois-ci,

nous avons mis en place l'écran de saisie → l'écran de vérification de saisie → l'écran de fin d'envoi → l'e-mail automatique de confirmation d'envoi

Nous résumons ici la mise en place de l'écran de confirmation.

Conclusion : avec Google Form seul, il n'est pas possible d'insérer une « page de confirmation ».

Google Forms ne permet pas de contrôler librement le traitement des données soumises ni les redirections via JavaScript (pour des raisons de sécurité, la structure du formulaire ne permet pas d'accéder à son contenu en JS).

Google Forms,

• il est impossible, par conception, d'insérer un écran intermédiaire de confirmation avant l'envoi.
• Il est également impossible d'envoyer les données saisies vers une autre page ou de les insérer dans le HTML.

Par conséquent, un formulaire HTML personnalisé + une application Web GAS est indispensable.

Avec une application Web GAS, on ne travaille pas avec Google Forms mais on construit l'ensemble avec HTML et GAS. Comme je souhaitais créer un formulaire de contact avec Google Forms 3, j'ai décidé de demander à Gemini.

Serait-il possible de transmettre les données saisies dans la page statique (index.html) à la page de confirmation confirm.html, puis de relier les données de cette page à un Google Form via ?

C'est une idée intéressante, mais malheureusement, cette méthode est en principe « quasiment impossible ». Si vous souhaitez tout de même la mettre en œuvre : ① index.html → enregistrer les valeurs saisies dans le formulaire avec JavaScript dans sessionStorage. ② confirm.html → lire les valeurs depuis sessionStorage et les afficher. ③ Envoyer une requête POST avec vers formResponse de Google Forms (personnalisation via entry.xxxxx). Toutefois, cette approche n'utilise pas la méthode officielle de formResponse, et elle ne fonctionne pas pour les utilisateurs ayant désactivé JavaScript. Il convient donc d'en tenir compte.

Ajout de JavaScript pour la mise en œuvre !

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

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

Tout d'abord, nous créons le formulaire de contact sur la page de saisie. À ce stade, ne renseignez pas la valeur de entry.xxxx de Google Forms.

<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, puis l'utilisateur est redirigé vers la page de confirmation /inquiry/confirm.html.

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

Les valeurs enregistrées dans sessionStorage sont insérées dans class="confirmBlock".

Ensuite, saisissez dans le formulaire situé directement en dessous les valeurs de entry.xxxxx de Google Forms.

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

Parce que ce formulaire permet de faire fonctionner formResponse de Google Forms !

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

Voici la page de confirmation réelle.

Si l'on supprime type="hidden", le Google Form personnalisé est masqué 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 de confirmation d'envoi complete.html !

Le fonctionnement consiste à transmettre les valeurs saisies dans index.html au Google Form présent dans confirm.html, puis à les envoyer.

Comme il s'agit d'un Google Form personnalisé, vous pouvez aussi utiliser une feuille de calcul de synthèse et envoyer des e-mails de réponse automatique avec GAS.

Conclusion

Une « page de confirmation », difficile à réaliser avec Google Forms seul, peut être mise en œuvre de façon flexible grâce à JavaScript. Note : le code source reste entièrement visible, je l'avoue 💦

Une petite personnalisation peut nettement améliorer l'apparence et la facilité d'utilisation. N'hésitez pas à y consacrer un peu de temps !