Stolpersteine beim Erstellen von Kundenformularen mit Google Forms

Das japanische WordPress-Plugin MW WP Form, das lange Zeit beliebt war, wird eingestellt. Da es auf vielen Websites von Organisationen und Unternehmen im Einsatz war und als verlässliches Plugin galt, ist das bedauerlich.

Manche Kunden können es sich nicht leisten, ein sicheres E-Mail-Formular separat zu entwickeln oder ein SaaS-Produkt für das Frontend einzubinden. Vor diesem Hintergrund erhielten wir die Anfrage, das Kontaktformular auf Google Forms umzustellen. Wir haben es so umgesetzt, dass das bestehende Design erhalten bleibt und das Google Form eingebettet wird.

Da das Know-how auf vielen Websites veröffentlicht ist, war es zwar nötig, sich ständig zu vergewissern, doch die Einrichtung selbst war sehr einfach. Einige Punkte haben uns allerdings Mühe bereitet, daher möchten wir diese Stolpersteine hier teilen.

Arbeitsschritte

• Google Forms für eine statische Seite anpassen
• Nach dem Absenden des Formulars per JavaScript zur Bestätigungsseite weiterleiten
• Automatische Antwort-E-Mail über GAS an Kunden senden, die eine Anfrage gestellt haben

Stolpersteine

• Beim Senden der automatischen Antwort-E-Mail mit GAS liefert "namedValues", mit dem die Formularantworten abgerufen werden, undefined
• Die Absenderadresse der automatisch versendeten E-Mails wird auf meine eigene Adresse gesetzt.

  　

Zur Anpassung von Google Forms

Google Forms lässt sich nicht nur unverändert einbinden, sondern auch in ein mit HTML/CSS erstelltes Formular integrieren, sodass das Design individuell angepasst werden kann!

Das folgende Beispiel zeigt unser internes Besucherverwaltungsformular, bei dem ebenfalls Google Forms in den Formularbereich eingebunden ist.

Auf die Einbindung in HTML sowie die Gestaltung der Weiterleitung zur Abschlussseite nach dem Absenden gehe ich in diesem Beitrag nicht ein.

Stolperstein Nr. 1:
Im GAS zum Versand der Bestätigungsmail wird "namedValues", mit dem die Formularantworten abgerufen werden, als undefined zurückgegeben

Mithilfe von Google Apps Script (GAS) lassen sich aus der mit den Google-Forms-Antworten verknüpften Tabelle automatisch E-Mails versenden.

Sobald der Senden-Button des Kontaktformulars gedrückt wird, startet ein Skript, das die übermittelten Daten aus der verknüpften Tabelle liest und in die E-Mail einfügt.

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

Ich ging davon aus, dass sich damit E-Mails versenden lassen, doch das Skript lieferte einen Fehler.

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

Das erste Element "Name" wurde nicht gefunden. Und?

e müsste eigentlich abrufbar sein... Ich prüfe es unten.

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

Es kam null zurück. Warum nur?

Beim Recherchieren zum GAS-Event-Objekt namedValues...

Hinweis: Verwenden Sie diesen Formular-Übermittlungstrigger zusammen mit SpreadsheetTriggerBuilder.

Laut Dokumentation kann nur ein Trigger für Tabellenkalkulationen verwendet werden. Daher verwende ich dieses Mal 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 
  });
}

Achtung: Das Argument e dieses Events unterscheidet sich in seinen Eigenschaften und Methoden, je nachdem, ob der Trigger in Google Forms oder in einer Tabellenkalkulation eingerichtet wurde.

• GoogleForms

  e.response.getItemResponses()

• Tabellenkalkulation

  e.values　e.namedValues

Mit dem überarbeiteten Skript ist die E-Mail erfolgreich angekommen!

...Beim genauen Hinsehen zeigt sich jedoch, dass als Absender meine eigene Adresse eingetragen ist. So würde die automatische Bestätigungsmail von meiner Adresse an den Kunden gesendet.

Stolperstein Nr. 2: Die Absenderadresse der automatisch versendeten E-Mails ist meine eigene Adresse

• Bei GAS wird immer festgelegt, mit welchem Google-Konto das Skript ausgeführt wird.
• Wenn GAS E-Mails versendet, werden diese über das Gmail-Konto des Ausführenden verschickt.

Für die Umsetzung wurde mein Konto zur Bearbeitung des Google Forms eingeladen.
Da ich derzeit als Ausführender des Skripts für die automatischen E-Mails eingetragen bin, werden die Nachrichten über meine Adresse versendet.

Damit der Kunde als Absender festgelegt werden kann, muss die Einstellung über das Eigentümerkonto neu vorgenommen werden. Wenn der Kunde jedoch wünscht, dass [email protected] als Absenderadresse verwendet wird, stellt sich die Frage, wie dies eingerichtet werden kann ...?

Lösung

• Der Kunde richtet im eigenen Gmail-Konto für die Kontaktadresse [email protected] einen Alias ein.
• Die Trigger-Einstellung wird über das Eigentümerkonto neu vorgenommen.
• Dem Konto eine E-Mail-Adresse mit eigener Domain hinzufügen, im Skript die Option from zu MailApp.sendEmail() ergänzen und die Adresse eintragen

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

Hinzufügen einer Adresse mit eigener Domain: Was ist das?

Indem Sie ein Konto hinzufügen, können Sie über die E-Mail-Adresse [email protected] versenden.
Das bedeutet, dass Sie beim Versenden aus Gmail heraus als Absender „[email protected]“ auswählen können. Es funktioniert ähnlich wie eine Subadresse.

Wenn Sie kein Konto hinzufügen, können Sie den Absender nicht frei anpassen, solange Sie ein Gmail-Konto verwenden. Der Absender ist in diesem Fall fest vorgegeben.
Stattdessen müssen Sie einen externen SMTP-Server verwenden, z. B. SendGrid oder Amazon SES.

Der einfachste und beste Ablauf sieht daher so aus:
Der Inhaber-Account fügt die Anfrageadresse [email protected] hinzu → Anschließend richtet der Inhaber-Account den Auslöser ein.

Zu beachten ist, dass automatisch versendete E-Mails als Gmail gesendet werden und sich daher im Ordner „Gesendet“ ansammeln.
Falls Sie es störend finden, dass sich der Ordner „Gesendet“ füllt, empfiehlt es sich, ein eigenes Konto anzulegen.

Fazit

Google Forms verfügt selbst über eine einfache Funktion für automatische Antworten, bietet jedoch keine Möglichkeit, Betreff und Text der E-Mails anzupassen.
Bei der Verwendung einer Erweiterung ist in der kostenlosen Version die tägliche Obergrenze für automatische Antworten auf 20 festgelegt.
GAS hingegen ermöglicht eine kostengünstige Lösung mit hoher Flexibilität und Erweiterbarkeit!

Vorteile der Nutzung von GAS

1. Einfach anpassbare E-Mails
   • Inhalt und Empfänger der versendeten E-Mail können automatisch an die Antworten im Formular angepasst werden.
   • Auch im HTML-Format gestaltete E-Mails können versendet werden, sodass ein ansprechendes Ergebnis entsteht.
2. Lässt sich mit Google-Diensten verbinden
   • Antwortdaten werden automatisch in Google Sheets gespeichert, sodass Auswertung und Verwaltung ganz einfach sind.
   • Termine werden automatisch in Google Kalender angelegt, und Erinnerungen lassen sich einrichten.
   • Dateien werden in Google Drive organisiert und gespeichert, sodass die Datenverwaltung unkompliziert wird.
3. Keine Kosten
   • Kostenlos innerhalb von Google Workspace nutzbar.
   • Da keine externen Dienste benötigt werden, lässt sich der Betrieb kostengünstig umsetzen.
4. Automatisch und schnell
   • Unmittelbar nach dem Absenden eines Formulars können E-Mails versendet und Daten gespeichert werden.
   • Auch mehrere Prozesse lassen sich gleichzeitig ausführen.
5. Sichere Datenverwaltung
   • Da die Verarbeitung vollständig innerhalb des Google-Kontos erfolgt, besteht ein geringes Risiko, dass Daten nach außen gelangen.
   • Auch die Sicherheit ist gut gelöst, sodass Sie sich auf das Ergebnis verlassen können.
6. Die Einsatzweise lässt sich flexibel anpassen
   • Einstellungen lassen sich auch für neue Formulare einfach wiederverwenden.
   • Mit nur geringen Codeanpassungen lassen sich neue Funktionen hinzufügen oder Anpassungen vornehmen.

Mit GAS werden Flexibilität, Erweiterbarkeit und Kosteneffizienz erreicht, während der Betrieb innerhalb des Google-Ökosystems sicher bleibt. Besonders wenn detaillierte Verarbeitungsschritte oder Anpassungen auf Basis der Antworten nötig sind, ist dies eine starke Option.

Diesmal war die Bestätigungsseite nicht im Umfang enthalten, daher haben wir sie nicht umgesetzt. Wir würden sie aber gern ausprobieren, falls der Wunsch beim nächsten Mal aufkommt. Dazu schreiben wir dann wieder einen Artikel als Gedächtnisstütze!

Bei Herausforderungen wie der Überarbeitung oder Migration Ihres Kontaktformulars unterstützen wir Sie gern. Wenden Sie sich einfach an uns!

Referenzseite Zenn, Artikel von ryotoitoi: https://zenn.dev/ryotoitoi/articles/3cedb115d816e5