Les pièges à éviter lors de la création d'un formulaire client avec Google Form

Le plugin japonais MW WP Form, longtemps apprécié sur WordPress, va être abandonné. C'est assez regrettable, car il était largement utilisé par de nombreuses associations et entreprises et jouissait d'une grande confiance.

Certains clients ne peuvent pas investir suffisamment pour développer séparément un formulaire d'envoi sécurisé ou pour intégrer une solution SaaS dans le frontend. C'est dans ce contexte que nous avons reçu la demande de passer le formulaire de contact à Google Forms. Autant conserver le design existant tout en intégrant Google Forms : c'est ce que nous avons mis en œuvre !

De nombreuses ressources sont disponibles sur différents sites. Il a fallu vérifier certaines étapes, mais la mise en place était très simple. Nous avons toutefois rencontré quelques difficultés, c'est pourquoi nous souhaitons partager ici les points clés !

Étapes de travail

• Personnaliser Google Forms pour une page statique
• Rediriger vers la page de confirmation avec JS après l'envoi du formulaire
• Envoyer un e-mail de réponse automatique aux clients via GAS

Points de blocage

• Lors de l'envoi d'un e-mail de réponse automatique avec GAS, "namedValues" pour récupérer les réponses du formulaire renvoie undefined
• L'adresse d'expédition des e-mails automatiques correspond à mon adresse

  　

Personnalisation de Google Forms

Google Forms ne se limite pas à une simple intégration : il est possible de l'intégrer dans un formulaire créé en HTML/CSS afin de personnaliser son design !

Voici le tableau de gestion des visites de nos visiteurs : le formulaire de ce tableau intègre également Google Forms.

Nous ne détaillerons pas ici la personnalisation de l'intégration HTML ni la manière de rediriger vers une page de confirmation après l'envoi.

Premier point bloquant : avec le GAS qui envoie l'e-mail de réponse automatique,
l'objet "namedValues" permettant de récupérer les réponses du formulaire renvoie undefined

Il est possible d'envoyer des e-mails automatiques en implémentant Google Apps Script (GAS) à partir de la feuille de calcul liée aux réponses de Google Forms.

Lorsque le bouton d'envoi du formulaire de contact est cliqué, un déclencheur lance un script qui lit les informations transmises depuis la feuille de calcul liée et les insère 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 pouvoir envoyer l'e-mail avec ce script, mais une erreur s'est produite.

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

Le premier élément « お名前 » est introuvable. Et voilà.

Je suppose que e est bien récupéré... Vérifions ci-dessous.

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

Il renvoie null. Pourquoi ?

En cherchant des informations sur l'objet d'événement GAS namedValues...

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

Il paraît que seuls les déclencheurs pour Spreadsheet sont utilisables ici ! Donc, cette fois, j'utiliserai response.

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 
  });
}

Il faut faire attention : selon que le déclencheur est configuré dans Google Forms ou dans Google Sheets, le contenu de l'argument e (propriétés et méthodes) est différent.

• GoogleForms

  e.response.getItemResponses()

• Feuille de calcul

  e.values　e.namedValues

Le script réécrit a bien envoyé l'e-mail !

... Mais en regardant de plus près, l'expéditeur est mon adresse. Avec ce code, l'e-mail automatique partirait de mon adresse vers le client.

Point d'achoppement n°2 :
L'adresse de l'expéditeur des e-mails automatiques devient la mienne

• Google Apps Script (GAS) exige toujours de définir « le compte Google qui exécute le script ».
• Lorsqu'un e-mail est envoyé depuis GAS, il part du « Gmail de la personne qui exécute le script ».

Pour cette réalisation, le client m'a invité à modifier le formulaire Google avec mon compte.
Comme je suis actuellement la personne qui exécute le script d'envoi automatique, les e-mails partent de mon adresse.

Pour que cette adresse devienne l'expéditeur côté client, il faut la reconfigurer avec le compte propriétaire. Par ailleurs, si le client demande que « l'adresse dédiée aux demandes info＠example.com » soit l'expéditeur, que faut-il faire pour la configurer…?

Solution

• Demander au client de configurer un alias info＠example.com sur son adresse Gmail.
• Reconfigurer le déclencheur avec le compte propriétaire
• Ajouter une adresse e-mail sur un domaine personnalisé au compte, ajouter l'option from à MailApp.sendEmail() dans le script et indiquer l'adresse

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

Ajouter une adresse e-mail sur un domaine personnaliséQu'est-ce que c'est

En ajoutant un compte, vous pouvez envoyer des e-mails depuis l'adresse [email protected].
Concrètement, lors de l'envoi depuis Gmail, vous pouvez choisir un expéditeur nommé « [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'expéditeur.
Dans ce cas, il est nécessaire d'utiliser un serveur SMTP externe (par ex. SendGrid, Amazon SES).

La méthode la plus simple et la plus efficace consiste donc à
demander au titulaire du compte propriétaire d'ajouter l'adresse [email protected] dédiée aux contacts, puis à configurer le déclencheur depuis le compte propriétaire.

Point d'attention : les e-mails automatiques étant envoyés via Gmail, ils s'accumuleront dans le dossier « Éléments envoyés ».
Si vous ne souhaitez pas que le dossier d'envoi se remplisse, vous pouvez également créer un compte dédié.

Conclusion

Google Forms propose lui-même une fonction d'envoi automatique simplifiée, mais la personnalisation de l'objet et du corps de l'e-mail n'est pas possible.
Avec une méthode utilisant une extension tierce, la version gratuite limite le nombre de réponses automatiques à 20 par jour.
En revanche, GAS permet de construire une solution peu coûteuse, flexible et très extensible !

Avantages de l'utilisation de GAS

1. Personnalisation facile des e-mails
   • Le contenu et le destinataire de l'e-mail peuvent être modifiés automatiquement en fonction des réponses du formulaire.
   • Vous pouvez aussi envoyer des e-mails au format HTML, pour un rendu soigné.
2. Intégration avec les services Google
   • Enregistrez automatiquement les réponses dans Google Sheets pour faciliter le calcul et la gestion des données.
   • Créez automatiquement des événements dans Google Agenda et configurez des rappels.
   • Organisez et enregistrez les fichiers dans Google Drive pour une gestion des données simplifiée.
3. Sans coût supplémentaire
   • Utilisable gratuitement dans Google Workspace.
   • Aucun service externe n'est nécessaire, ce qui permet une exploitation à moindre coût.
4. Automatique et rapide
   • Envoi d'e-mails et enregistrement des données dès la soumission du formulaire.
   • Plusieurs traitements peuvent aussi être exécutés en une seule fois.
5. Gestion sécurisée des données
   • Le traitement s'effectue entièrement dans votre compte Google, ce qui limite les risques de fuite de données vers l'extérieur.
   • La sécurité est également bien assurée, ce qui vous procure une tranquillité d'esprit.
6. Une utilisation flexible et adaptable
   • Les paramètres peuvent être facilement réutilisés dans de nouveaux formulaires.
   • Il suffit de modifier légèrement le code pour ajouter de nouvelles fonctionnalités ou personnaliser le fonctionnement.

GAS permet d'obtenir une grande flexibilité, une bonne extensibilité et un excellent rapport coût-efficacité, tout en fonctionnant de manière sécurisée au sein de l'écosystème des services Google. Il constitue un choix particulièrement pertinent lorsque des traitements détaillés ou des personnalisations basés sur les réponses recueillies sont nécessaires.

Cette fois, l'écran de confirmation ne faisait pas partie du périmètre, nous ne l'avons donc pas implémenté. Si une demande arrive ultérieurement, nous aimerions l'essayer. Nous rédigerons alors un article récapitulatif à ce sujet !

Si vous rencontrez des difficultés avec la refonte ou la migration de votre formulaire de contact, n'hésitez pas à nous contacter !

Site de référence : article de ryotoitoi sur Zenn : https://zenn.dev/ryotoitoi/articles/3cedb115d816e5