Fallstricke bei der Erstellung von Kundenformularen mit Google Forms

Das japanische Plugin MW WP Form, das lange Zeit in WordPress beliebt war, wird eingestellt. Es ist schade, dass dieses zuverlässige Plugin, das von vielen Organisationen und Unternehmenswebseiten verwendet wurde, nicht mehr zur Verfügung stehen wird.

Manche Kunden können sich nicht leisten, separate sichere Mail-Formulare zu entwickeln oder SaaS-Lösungen für die Frontend-Implementierung zu nutzen. In solchen Fällen haben wir die Anfrage erhalten, das Kontaktformular auf Google Forms umzustellen. Um das aktuelle Design beizubehalten und Google Forms gleichzeitig einzubetten, habe ich es implementiert!

Es gibt verschiedene Ressourcen zum Thema online, und während ich diese überprüft habe, war die Implementierung selbst sehr einfach. Da es einige knifflige Punkte gab, möchte ich diese diesmal mit euch teilen!

Arbeitsprozess

• Google Forms an statische Seiten anpassen
• Nach dem Absenden des Formulars mit JavaScript zur Bestätigungsseite weiterleiten
• Automatische Antwortemails an Anfragenden mit Google Apps Script (GAS) versenden

Problematische Punkte

• Bei der Verwendung von GAS zum Versenden von automatischen Antwortemails ist "namedValues" zum Abrufen von Formularantworten nicht definiert
• Die Absenderadresse der automatisch gesendeten E-Mail ist meine eigene Adresse

  　

Google Forms-Anpassung

Google Forms können nicht nur so wie sie sind eingebettet werden – Sie können das Design anpassen, indem Sie sie in HTML/CSS-Formulare integrieren!

Dies ist unsere Besucherverwaltungstabelle für Gäste, und wir haben auch Google Forms in den Formularabschnitt integriert.

Die Erklärung zu HTML-Integrationsanpassungen und der Umleitung zu einer Abschlussseite nach dem Absenden wird dieses Mal ausgelassen.

Problem Nr. 1
: Bei der Verwendung von GAS zum Versenden von automatischen Antwortemails ist "namedValues" zum Abrufen von Formularantworten nicht definiert

Sie können Google App Script (GAS) implementieren, um automatische E-Mails zu versenden, indem Sie Daten aus dem Tabellenkalkulationsblatt verwenden, das mit den Google Forms-Antworten verknüpft ist.

Wenn die Schaltfläche zum Absenden des Kontaktformulars gedrückt wird, wird ein Skript ausgelöst, das die über das verknüpfte Tabellenkalkulationsblatt gesendeten Informationen liest und in die E-Mail reflektiert.

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

Obwohl ich dachte, dass die E-Mail mit diesem Skript gesendet werden würde, trat ein Fehler auf.

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

Das erste Element "お名前" konnte nicht gefunden werden.

Wird e korrekt abgerufen? Überprüfung unten

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

null zurückgegeben. Warum?

Nach der Untersuchung des GAS-Ereignisobjekts namedValues…

Hinweis: Bitte verwenden Sie diesen Formularübermittlungstrigger zusammen mit SpreadsheetTriggerBuilder.

Anscheinend können nur Trigger für Tabellenkalkulation verwendet werden! Daher verwende ich response dieses Mal.

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

Beachten Sie, dass die Argumente e des Ereignisses unterschiedliche Inhalte (Eigenschaften und Methoden) haben, je nachdem, ob der Trigger auf Google Forms oder Tabellenkalkulation konfiguriert ist.

• GoogleForms

  e.response.getItemResponses()

• Tabellenkalkulation

  e.values　e.namedValues

Mit dem überarbeiteten Skript kam die E-Mail erfolgreich an!

Aber wenn ich genauer hinschaue, sehe ich, dass der Absender meine eigene Adresse ist. Auf diese Weise würden automatisierte E-Mails von meiner Adresse an Kunden versendet werden.

Stolpersteine Nr. 2:
Automatische E-Mails werden von meiner Adresse gesendet

• GAS erfordert immer die Einstellung, «unter welchem Google-Konto ausgeführt werden soll».
• Wenn Sie E-Mails über GAS versenden, werden diese vom „Gmail des Ausführenden" aus versendet.

In diesem Fall habe ich das Projekt mit einer Einladung zur Bearbeitung des Google Form implementiert, bei der mein Konto hinzugefügt wurde.
Derzeit bin ich als Skriptausführer für die automatische E-Mail-Konfiguriert, daher werden E-Mails von meiner Adresse gesendet.

Um dies als Absenderadresse des Clients zu verwenden, müssen Sie die Einstellungen über das Ownerkonto neu konfigurieren. Wenn der Client beispielsweise den Wunsch äußert, „info＠example.com , die dedizierte Kontaktadresse auf Clientseite, als Absenderadresse zu verwenden", was müssen Sie tun, um dies zu konfigurieren...?

Lösungsansatz

• Gmail-Adresse des Clients mit der Kontaktadresse info@example.com als Alias konfigurieren.
• Trigger-Einstellung mit dem Besitzerkonto neu konfigurieren
• Fügen Sie ein E-Mail-Adresse mit einer benutzerdefinierten Domain zu Ihrem Konto hinzu, und fügen Sie ein optionales from-Parameter im Skript MailApp.sendEmail() hinzu, um die Adresse anzugeben

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

Hinzufügen einer benutzerdefinierten Domain-Adresseerklärt

Durch das Hinzufügen eines Kontos können Sie mit der E-Mail-Adresse info@example.com versenden.
Das heißt, beim Versand aus Gmail können Sie "info@example.com" als Absender auswählen. Es ist ähnlich wie eine Subadresse.

Wenn Sie kein Konto hinzufügen, können Sie den Absender nicht frei anpassen, solange Sie ein Gmail-Konto verwenden.
In diesem Fall müssen Sie einen externen SMTP-Server (z. B. SendGrid oder Amazon SES) nutzen.

Der einfachste und beste Ablauf wäre daher:
Das Besitzerkonto bittet, die info@example.com-Adresse für Kontaktanfragen hinzuzufügen → Der Besitzer richtet den Trigger ein.

Beachten Sie, dass automatische E-Mails als Gmail versendet werden, daher sammeln sie sich im Ordner "Gesendet".
Falls Sie nicht möchten, dass dieser Ordner voll wird, können Sie auch ein dediziertes Konto erstellen.

Fazit

Google Forms selbst hat auch eine einfache automatische Versandfunktion, ermöglicht aber keine Anpassung von E-Mail-Betreff und Text.
Bei anderen Erweiterungen ist die kostenlose Version auf 20 automatische Antworten pro Tag begrenzt.
Andererseits können Sie mit GAS eine kostengünstige, flexible und erweiterbare Lösung schaffen!

Vorteile der Verwendung von GAS

1. Benutzerfreundliche E-Mail-Anpassung
   • Je nach Formularantwort können Inhalt und Empfänger der automatisch versendeten E-Mail angepasst werden.
   • Sie können auch E-Mails im HTML-Format versenden, um ein ansprechendes Erscheinungsbild zu erzielen.
2. Integration mit Google-Diensten
   • Antwortdaten werden automatisch in Google Sheets gespeichert, wodurch Auswertung und Verwaltung vereinfacht werden.
   • Termine werden automatisch in Google Calendar erstellt und Erinnerungen können eingestellt werden.
   • Dateien werden in Google Drive organisiert und gespeichert, was die Datenverwaltung vereinfacht.
3. Kostenlos
   • Kostenlose Nutzung innerhalb von Google Workspace.
   • Da keine externen Dienste erforderlich sind, können die Betriebskosten niedrig gehalten werden.
4. Automatisiert und schnell
   • E-Mails können unmittelbar nach der Formularantwort versendet und Daten gespeichert werden.
   • Mehrere Prozesse können gleichzeitig in einem Durchgang ausgeführt werden.
5. Sichere Datenverwaltung
   • Die Verarbeitung erfolgt ausschließlich innerhalb des Google-Kontos, sodass das Risiko von Datenlecks minimiert wird.
   • Mit solider Sicherheit können Sie beruhigt arbeiten.
6. Flexible Anpassung der Verwendungsweise
   • Einstellungen lassen sich problemlos auf neue Formulare übertragen.
   • Mit geringen Codeänderungen können Sie neue Funktionen hinzufügen oder Anpassungen vornehmen.

Durch die Verwendung von GAS erzielen Sie Flexibilität, Erweiterbarkeit und Kosteneffizienz, während Sie sicher innerhalb des Google-Services-Ökosystems arbeiten. Dies ist besonders eine starke Wahl, wenn detaillierte Verarbeitung und Anpassung auf Basis von Antwortinhalten erforderlich sind.

Dieses Mal war der Bestätigungsbildschirm nicht im Umfang enthalten, daher haben wir ihn nicht implementiert. Wenn die Anforderung das nächste Mal auftritt, möchte ich es gerne ausprobieren und dann wieder einen Notizen-Artikel schreiben!

Falls Sie Unterstützung bei der Überarbeitung oder Migration von Kontaktformularen benötigen, wenden Sie sich gerne an uns!

Referenz-Website Zenn – Artikel von ryotoitoiさん: https://zenn.dev/ryotoitoi/articles/3cedb115d816e5