Topics

L'extension MW WP Form, d'origine japonaise et très populaire sur WordPress depuis longtemps, va être abandonnée. C'est un peu décevant, car il s'agit d'une extension fiable, utilisée par de nombreuses organisations et sites web d'entreprises.

Certains clients n'ont pas les moyens de développer un formulaire de contact sécurisé distinct ou de mettre en œuvre une solution front-end SaaS. L'un d'eux nous a demandé de remplacer son formulaire de contact par Google Forms. Nous avons donc décidé d'intégrer un formulaire Google tout en conservant le design existant, et c'est exactement ce que nous avons fait !

Les informations nécessaires sont disponibles sur différents sites web, j'ai donc dû les consulter, mais l'installation en elle-même était très simple. Certaines étapes étaient un peu plus complexes, et je souhaite donc vous en parler aujourd'hui !

Opérations

• Personnaliser Google Forms en une page statique
• Transition vers la page de confirmation de soumission via JS après l'envoi du formulaire
• Envoyer des e-mails de réponse automatiques aux clients qui font une demande via GAS

Points d'achoppement

• GAS pour l'envoi d'e-mails de réponse automatique"namedValues" pour obtenir les réponses du formulaire n'est pas défini
• L'adresse de l'expéditeur du courriel automatisé est la mienne.

  　

À propos de la personnalisation de Google Forms

Vous pouvez non seulement installer Google Forms tel quel, mais aussi l'intégrer à des formulaires créés avec HTML/CSS et personnaliser le design !

Voici notre fiche de gestion des visiteurs, et nous avons également intégré Google Forms dans la section formulaires.

Nous n'entrerons pas dans les détails concernant la personnalisation de l'intégration HTML ni la procédure de transition vers la page de confirmation après la soumission.

Point d'achoppement n°1
GAS pour l'envoi d'e-mails de réponse automatique"namedValues" pour obtenir les réponses du formulaire n'est pas défini

Vous pouvez utiliser Google AppScript (GAS) pour envoyer des e-mails automatisés à partir d'une feuille de calcul liée aux réponses de Google Forms.

Lorsque l'utilisateur clique sur le bouton « Envoyer » du formulaire de demande, un script s'exécute, lit les informations envoyées depuis la feuille de calcul liée et les reproduit 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 
  });
}

Je pensais pouvoir envoyer un e-mail avec ce script, mais j'ai reçu un message d'erreur.

TypeError : Impossible de lire les propriétés de undefined (lecture de « Votre nom ») à reply(reply:3:29)

Le premier élément « Nom » est introuvable.

Avez-vous pu obtenir e ? Vérifiez ci-dessous.

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

Elle a renvoyé une valeur nulle. Pourquoi ?

objet d'événement GASnamedValuesQuand j'ai examiné la question...

Remarque : Utilisez ce déclencheur de soumission de formulaire avec SpreadsheetTriggerBuilder.

Apparemment, seuls les déclencheurs pour feuilles de calcul peuvent être utilisés ici !responseUtiliser.

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 est le paramètre de déclenchement.GoogleFormsmoustiqueTableurVeuillez noter que le contenu (propriétés et méthodes) différera selon la méthode utilisée.

• GoogleForms

  e.response.getItemResponses()

• Tableur

  e.values　e.namedValues

L'e-mail contenant le script réécrit est bien arrivé !

Cependant, si vous regardez attentivement, vous constaterez que l'adresse de l'expéditeur est la mienne. Si cela continue, les clients recevront des courriels automatisés de mon adresse.

Point d'achoppement n°2
L'adresse de l'expéditeur du courriel automatisé est la mienne.

• Lorsque vous utilisez GAS, vous devez définir « sous quel compte Google il s'exécutera ».
• Lorsqu'un e-mail est envoyé depuis GAS, il sera envoyé depuis le compte Gmail de l'exécuteur testamentaire.

Cette fois-ci, je l'ai mis en œuvre en invitant mon compte à modifier le formulaire Google.
Actuellement, l'exécuteur du script pour l'envoi automatique des courriels est configuré sur moi, donc les courriels sont envoyés depuis mon adresse.

Pour définir cette adresse comme expéditeur du client, vous devez la reconfigurer dans le compte du propriétaire. De plus, « Adresse de requête côté client »info@example.comSi vous souhaitez définir un utilisateur comme « expéditeur », comment procéder ?

Solution

• L'adresse Gmail du client aura une adresse de demande de renseignementsinfo@example.comDemandez-leur de créer un alias pour cela.
• Reconfigurez les paramètres de déclenchement dans le compte du propriétaire
• Ajoutez une adresse e-mail avec votre propre domaine à votre compte、ScénarioMailApp.sendEmail()Ajoutez le champ facultatif « de » et indiquez l'adresse.

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

Ajouter votre propre adresse de domaineQu'est-ce que

En ajoutant un compte,info@example.comVous pouvez l'envoyer en utilisant cette adresse électronique.
Autrement dit, lors de l'envoi depuis Gmail,info@example.comVous pouvez ensuite sélectionner un nom d'expéditeur comme "." C'est 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, vous devrez utiliser un serveur SMTP externe (par exemple SendGrid, Amazon SES).

La solution la plus simple et la meilleure est donc de
Pour toute question relative au compte du propriétaireinfo@example.comAjouter l'adresse → Configurer les déclencheurs dans le compte du propriétaire.

Veuillez noter que les courriels envoyés automatiquement le seront via Gmail et s'accumuleront dans le dossier « Éléments envoyés ».
*Si vous ne souhaitez pas que votre dossier « Messages envoyés » se remplisse, vous pouvez créer un nouveau compte spécifiquement à cet effet.

résumé

Google Forms possède une fonction d'envoi automatique simple, mais il n'est pas possible de personnaliser l'objet ou le corps de l'e-mail.
Autre : Si vous utilisez une extension, la version gratuite est limitée à 20 réponses automatiques par jour.
En revanche, GAS vous permet de construire une solution extrêmement flexible et évolutive tout en maîtrisant les coûts !

Avantages de l'utilisation du 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 fournies dans le formulaire.
   • Vous pouvez également envoyer des e-mails conçus au format HTML, ce qui leur donne un aspect très attrayant.
2. Peut être connecté aux services Google
   • Les données de réponse sont automatiquement enregistrées dans Google Sheets pour faciliter leur compilation et leur gestion.
   • Créez automatiquement des événements et définissez des rappels dans Google Agenda.
   • Organisez et stockez vos fichiers sur Google Drive pour une gestion simplifiée des données.
3. Sans frais
   • Disponible gratuitement dans Google Workspace.
   • Puisqu'il n'est pas nécessaire de recourir à des services externes, son fonctionnement peut être peu coûteux.
4. Mouvement automatique et rapide
   • Une fois le formulaire rempli, vous pouvez envoyer un courriel ou enregistrer les données immédiatement.
   • Il est également possible d'exécuter plusieurs processus simultanément.
5. Gestion sécurisée des données
   • Le traitement étant effectué au sein de votre compte Google, le risque de fuite de données vers l'extérieur est minime.
   • La sécurité est également solide, vous pouvez donc être rassuré.
6. Utilisation flexible
   • Vous pouvez facilement réutiliser les paramètres dans de nouveaux formulaires.
   • En modifiant légèrement le code, vous pouvez ajouter de nouvelles fonctionnalités et le personnaliser.

En utilisant le GAS,Flexible, évolutif et rentableElle y parvient tout en fonctionnant en toute sécurité au sein de l'écosystème Google, ce qui en fait une option puissante, notamment lorsqu'un traitement détaillé et une personnalisation basée sur les réponses sont nécessaires.

Cette fois-ci, l'écran de confirmation n'était pas prévu, je ne l'ai donc pas implémenté. Cependant, je souhaiterais l'essayer la prochaine fois qu'une demande me sera faite. Je rédigerai un article à ce sujet à ce moment-là !

Si vous rencontrez des problèmes lors de la modification ou de la migration de votre formulaire de demande, veuillez nous contacter !

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