Les pièges à éviter lors de la création de formulaires Google Form

Le plugin japonais MW WP Form, longtemps apprécié sur WordPress, sera bientôt supprimé. C'est dommage, car ce plugin de confiance a été adopté par de nombreuses organisations et sites d'entreprises.

Certains clients n'ont pas les moyens de développer séparément un formulaire de contact sécurisé ou de recourir à une SaaS pour l'intégration frontend. Face à cette situation, nous avons reçu une demande de migration du formulaire de contact vers Google Form. Nous avons décidé de profiter de l'occasion pour conserver le design existant tout en intégrant Google Form. Nous l'avons mis en œuvre !

Bien que nous ayons consulté diverses ressources en ligne pour les bonnes pratiques, la mise en œuvre elle-même s'est avérée très simple. Nous avons rencontré quelques difficultés à certains points, et nous aimerions les partager avec vous cette fois-ci !

Processus de travail

• Personnaliser Google Form en tant que page statique
• Rediriger vers une page de confirmation d'envoi avec JavaScript après la soumission du formulaire
• Envoyer un message de confirmation automatique via GAS aux clients qui ont rempli le formulaire

Points d'achoppement

• Lors de l'envoi d'un e-mail de réponse automatique via GAS, la "namedValues" pour récupérer les réponses du formulaire est undefined
• L'adresse d'expédition de l'e-mail envoyé automatiquement devient mon adresse

  　

Personnalisation de Google Forms

Google Forms n'a pas besoin d'être simplement installé tel quel – vous pouvez l'intégrer dans un formulaire créé avec HTML/CSS et personnaliser la conception!

Ceci est notre tableau de gestion des visites de clients, et nous avons également intégré Google Forms dans la section formulaire.

Les explications sur la personnalisation de l'intégration HTML et la méthode de redirection vers la page d'achèvement après la soumission sont omises cette fois.

Point d'achoppement n° 1
Lors de l'envoi d'un e-mail de réponse automatique via GAS, la "namedValues" pour récupérer les réponses du formulaire est undefined

Vous pouvez envoyer des e-mails automatiques en implémentant Google App Script (GAS) à partir de la feuille de calcul liée aux réponses Google Forms.

Lorsque le bouton d'envoi du formulaire de contact est cliqué, un script s'exécute pour lire les informations envoyées depuis la feuille de calcul associée et les refléter dans l'e-mail.

function reply(e) {
  // フォームの回答を取得
  const name = e.namedValues['お名前'][0];
  const email = e.namedValues['メールアドレス'][0];

  
  // 自動返信メール件名
  const subject = '【テスト】お問い合わせありがとうございます';
      
  // 自動返信メール本文
  const body = name + '様\n' +
    '\n' +
    '下記の内容で申し込みを受付いたしました。\n' +
    '\n' +
    '【お名前】\n' +
    name + '\n' + 
    '\n' +
    '【メールアドレス】\n' +
    email + '\n' ;
  
  // メール送信
  MailApp.sendEmail({
    to: email,　 
    subject: subject,
    body: body 
  });
}

Nous pensions que cet script enverrait l'e-mail, mais nous avons reçu une erreur.

TypeError: Cannot read properties of undefined (reading 'お名前')at reply(reply:3:29)

L'élément « お名前 » n'a pas pu être trouvé.

Je me demande si e peut être récupéré… Vérification ci-dessous.

function reply(e) {
  Logger.log(JSON.stringify(e)); 
}

Null a été retourné. Pourquoi ?

J'ai examiné l'objet d'événement GAS namedValues…

Remarque : utilisez ce déclencheur d'envoi de formulaire avec SpreadsheetTriggerBuilder.

Il s'avère que seul le déclencheur pour les feuilles de calcul peut être utilisé ! Je vais donc utiliser response cette fois.

function reply(e) {
  // フォームの回答を取得
  const responses = e.response.getItemResponses();
  let name = '';
  let email = '';
  
  // 回答をループして必要な項目を抽出
  responses.forEach(response => {
    const itemTitle = response.getItem().getTitle(); // 質問のタイトルを取得
    const answer = response.getResponse(); // 回答を取得

    if (itemTitle === 'お名前') {
      name = answer;
    } else if (itemTitle === 'メールアドレス') {
      email = answer;
    }
  });

  // 自動返信メール件名
  const subject = '【テスト】お問い合わせありがとうございます';
  
  // 自動返信メール本文
  const body = name + '様\\n' +
    '\\n' +
    '下記の内容で申し込みを受付いたしました。\\n' +
    '\\n' +
    '【お名前】\\n' +
    name + '\\n' + 
    '\\n' +
    '【メールアドレス】\\n' +
    email + '\\n';
  
  // メール送信
  MailApp.sendEmail({
    to: email,　 
    subject: subject,
    body: body 
  });
}

L'argument e de cet événement a des contenus différents (propriétés et méthodes) selon que le déclencheur est configuré sur GoogleForms ou une feuille de calcul, il faut donc être prudent.

• GoogleForms

  e.response.getItemResponses()

• Feuille de calcul

  e.values　e.namedValues

Le courrier est arrivé avec succès grâce au script réécrit !

…cependant, en regardant de plus près, l'adresse d'expéditeur est celle de mon compte. De cette manière, les e-mails automatisés seraient envoyés de mon adresse à vos clients.

Point de difficulté n°2
: l'adresse d'expéditeur des e-mails automatisés devient celle de mon compte

• GAS exige de définir impérativement « sous quel compte Google l'exécuter ».
• Lors de l'envoi d'un e-mail via GAS, celui-ci est envoyé « depuis le Gmail de l'exécuteur ».

Cette fois-ci, j'ai été invité avec mes droits de modification sur Google Form et j'ai implémenté la solution.
Actuellement, puisque je suis l'exécuteur du script d'e-mail automatisé, les e-mails sont envoyés depuis mon adresse.

Pour que ce soit l'adresse d'expéditeur du client, il faudrait le reconfigurer avec le compte propriétaire. De plus, s'il y a une demande comme « nous souhaitons que l'adresse dédiée au contact du client [email protected] soit l'expéditeur », comment faire pour la configurer...?

Solutions

• Configurer l'adresse dédiée au contact [email protected] comme alias sur l'adresse Gmail du client.
• Reconfigurer les paramètres de déclenchement avec le compte propriétaire.
• Ajouter une adresse e-mail avec domaine personnalisé au compte, puis ajouter l'option from au MailApp.sendEmail() du script et y inscrire l'adresse

GmailApp.sendEmail(email, replySubject, body, {
    from: 'info＠example.com'  // 追加した送信元アドレス
  });

Ajout d'une adresse de domaine personnalisée – qu'est-ce que c'est ?

En ajoutant un compte, vous pouvez envoyer des e-mails à l'aide de l'adresse [email protected].
En d'autres termes, lors de l'envoi depuis Gmail, vous pouvez sélectionner une adresse d'origine portant le nom « [email protected] ». C'est un peu comme une sous-adresse.

Si vous n'ajoutez pas de compte, tant que vous utilisez un compte Gmail, vous ne pouvez pas personnaliser librement l'adresse d'origine.
Dans ce cas, vous devez utiliser un serveur SMTP externe (par exemple SendGrid ou Amazon SES).

Le flux simple et optimal est donc le suivant :
demander au compte propriétaire d'ajouter l'adresse [email protected] pour les demandes de contact → configurer les déclencheurs à partir du compte propriétaire.

À noter : les e-mails automatisés seront envoyés en tant que Gmail, de sorte qu'ils s'accumuleront dans le dossier « Envoyés ».
* Si vous ne voulez pas que le dossier d'envoi se remplisse, vous pouvez aussi créer un compte dédié.

Conclusion

Google Forms dispose d'une fonction d'envoi automatique basique, mais il n'est pas possible de personnaliser l'objet ou le corps du message.
Avec les autres méthodes utilisant des extensions, la version gratuite est limitée à 20 réponses automatiques par jour.
En revanche, GAS permet de créer une solution flexible et extensible à moindre coût !

Avantages de l'utilisation de GAS

1. Personnalisation d'e-mail simple et intuitive
   • Le contenu et le destinataire de l'e-mail à envoyer peuvent être modifiés automatiquement en fonction du contenu de la réponse du formulaire.
   • Vous pouvez également envoyer des e-mails au format HTML, ce qui les rend plus esthétiques.
2. Intégration avec les services Google
   • Les réponses sont automatiquement sauvegardées dans Google Sheets pour un agrégation et une gestion simplifiées.
   • Créez automatiquement des événements dans Google Agenda et configurez des rappels.
   • Organisez et stockez vos fichiers dans Google Drive pour une gestion des données simplifiée.
3. Pas de coûts
   • Utilisation gratuite dans Google Workspace.
   • Pas besoin de services externes, fonctionnement à faible coût.
4. Automatisation rapide
   • L'envoi d'e-mails et la sauvegarde des données se font immédiatement après la soumission du formulaire.
   • Vous pouvez également exécuter plusieurs traitements à la fois en une seule opération.
5. Gestion sécurisée des données
   • Le traitement s'effectue entièrement au sein de votre compte Google, ce qui réduit considérablement le risque de fuite de données vers l'extérieur.
   • La sécurité est robuste, vous pouvez donc être tranquille.
6. Flexibilité d'utilisation
   • Vous pouvez facilement réutiliser les paramètres d'un formulaire pour un nouveau formulaire.
   • Il suffit de modifier légèrement le code pour ajouter de nouvelles fonctionnalités ou effectuer des personnalisations.

En utilisant GAS, vous bénéficiez de flexibilité, extensibilité et rentabilité, tout en fonctionnant en toute sécurité dans l'écosystème des services Google. C'est une solution puissante, particulièrement lorsque des traitements fins ou des personnalisations basées sur les réponses sont nécessaires.

Cette fois, l'écran de confirmation n'était pas dans le périmètre, donc nous ne l'avons pas implémenté. Si une demande arrive à l'avenir, j'aimerais bien l'essayer. Je publierai un nouvel article à ce moment-là !

Si vous avez des questions ou des difficultés concernant la révision ou la migration de formulaires de contact, n'hésitez pas à nous contacter !

Référence : Zenn - Article de ryotoitoiさん : https://zenn.dev/ryotoitoi/articles/3cedb115d816e5