Topics

MW WP Form, ein in Japan entwickeltes und seit langem beliebtes Plugin für WordPress, wird eingestellt. Das ist etwas enttäuschend, da es sich um ein bewährtes Plugin handelt, das von vielen Organisationen und Unternehmenswebsites verwendet wird.

Manche Kunden können es sich nicht leisten, ein separates sicheres E-Mail-Formular zu entwickeln oder eine Front-End-Lösung mit SaaS zu implementieren. Ein solcher Kunde bat uns, sein Kontaktformular auf Google Forms umzustellen. Wir entschieden uns, ein Google Form einzubetten und gleichzeitig das aktuelle Design beizubehalten – und genau das haben wir getan!

Das Know-how ist auf verschiedenen Websites verfügbar, also musste ich es mir ansehen, aber die Einrichtung selbst war sehr einfach. Es gab einige Teile, die etwas schwierig waren, deshalb möchte ich diese Punkte heute mit euch teilen!

Betriebstechnik

• Passen Sie GoogleForms an eine statische Seite an
• Übergang zur Seite zum Abschluss der Übermittlung mithilfe von JS nach dem Absenden des Formulars
• Senden Sie automatische Antwort-E-Mails an Kunden, die über GAS anfragen

Stolpersteine

• GAS zum Senden automatischer Antwort-E-MailsDas Abrufen von Formularantworten „namedValues“ ist undefiniert
• Die Absenderadresse der automatisierten E-Mail ist meine eigene.

  　

Informationen zur Anpassung von Google Forms

Sie können Google Forms nicht nur unverändert installieren, sondern auch in mit HTML/CSS erstellte Formulare einbinden und das Design individuell anpassen!

Dies ist unser Besucherverwaltungsblatt und wir haben auch Google Forms in den Formularbereich integriert.

Wir werden nicht näher auf die Anpassung der HTML-Einbettung oder den Übergang zur Abschlussseite nach der Übermittlung eingehen.

Stolperstein Nr. 1
GAS zum Senden automatischer Antwort-E-MailsDas Abrufen von Formularantworten „namedValues“ ist undefiniert

Sie können Google AppScript (GAS) implementieren, um automatisierte E-Mails aus einer Tabelle zu senden, die mit Google Forms-Antworten verknüpft ist.

Wenn die Schaltfläche „Senden“ im Anfrageformular gedrückt wird, wird ein Skript ausgeführt, das die aus der verknüpften Tabelle gesendeten Informationen liest und in der E-Mail widerspiegelt.

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 dachte, ich könnte mit diesem Skript eine E-Mail senden, aber ich habe eine Fehlermeldung erhalten.

TypeError: Eigenschaften von undefined (Lesen von „Ihr Name“) können bei der Antwort (Antwort: 3:29) nicht gelesen werden.

Das erste Element „Name“ kann nicht gefunden werden.

Konnten Sie e erhalten? Siehe unten

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

Es wurde null zurückgegeben. Warum?

GAS-EreignisobjektnamedValuesAls ich es mir ansah ...

Hinweis: Verwenden Sie diesen Formular-Sende-Trigger mit SpreadsheetTriggerBuilder.

Anscheinend können hier nur Trigger für Tabellenkalkulationen verwendet werden!responseVerwenden.

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

Das Argument e dieses Ereignisses ist die Triggereinstellung.GoogleFormsMoskitoKalkulationstabelleBitte beachten Sie, dass sich die Inhalte (Eigenschaften und Methoden) je nach verwendeter Methode unterscheiden.

• GoogleForms

  e.response.getItemResponses()

• Kalkulationstabelle

  e.values　e.namedValues

Die E-Mail ist mit dem neu geschriebenen Skript erfolgreich angekommen!

Wenn Sie jedoch genau hinschauen, werden Sie feststellen, dass die Absenderadresse meine eigene ist. Wenn dies so weitergeht, erhalten Kunden automatisierte E-Mails von meiner Adresse.

Stolperstein Nr. 2
Die Absenderadresse der automatisierten E-Mail ist meine eigene.

• Wenn Sie GAS verwenden, müssen Sie festlegen, unter welchem ​​Google-Konto es ausgeführt wird.
• Wenn Sie eine E-Mail von GAS senden, wird sie vom „Gmail des Testamentsvollstreckers“ gesendet.

Dieses Mal habe ich es implementiert, indem ich mein Konto zum Bearbeiten des Google-Formulars eingeladen habe.
Derzeit ist der Skript-Executor für die automatisierte E-Mail auf mich eingestellt, sodass die E-Mail von meiner Adresse gesendet wird.

Um dies zum Absender des Clients zu machen, müssen Sie es im Eigentümerkonto neu konfigurieren. Außerdem: "Clientseitige Anfrageadresse"info@example.comWenn Sie „als Absender“ festlegen möchten, wie richten Sie dies ein?

Problemumgehung

• Die Gmail-Adresse des Kunden enthält eine Anfrageadresseinfo@example.comLassen Sie dafür einen Alias ​​festlegen.
• Triggereinstellungen im Eigentümerkonto neu konfigurieren
• Fügen Sie Ihrem Konto eine E-Mail-Adresse mit Ihrer eigenen Domain hinzu、SkriptMailApp.sendEmail()Fügen Sie das optionale „Von“ hinzu und schreiben Sie die Adresse

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

Hinzufügen Ihrer eigenen DomänenadresseWas ist

Durch das Hinzufügen eines Kontosinfo@example.comSie können es über die E-Mail-Adresse senden.
Mit anderen Worten: Beim Senden aus Gmail heraus,info@example.comSie können dann einen Absendernamen wie „.“ auswählen. Das ist wie eine Unteradresse.

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

Der einfachste und beste Weg ist also,
Für Anfragen zum Eigentümerkontoinfo@example.comAdresse hinzufügen lassen → Trigger im Besitzerkonto einrichten.

Bitte beachten Sie, dass automatisch gesendete E-Mails als Gmail gesendet werden und sich im Ordner „Gesendet“ sammeln.
*Wenn Sie nicht möchten, dass Ihr Ordner „Gesendet“ voll wird, können Sie speziell für diesen Zweck ein neues Konto erstellen.

Zusammenfassung

Google Forms selbst verfügt über eine einfache automatische Sendefunktion, es ist jedoch nicht möglich, den Betreff oder den Text der E-Mail anzupassen.
Sonstiges: Wenn Sie eine Erweiterung verwenden, gilt in der kostenlosen Version ein tägliches Limit von 20 automatischen Antworten.
Andererseits ermöglicht Ihnen GAS den Aufbau einer äußerst flexiblen und skalierbaren Lösung bei gleichzeitig niedrigen Kosten!

Vorteile der Verwendung von GAS

1. Benutzerfreundliche E-Mail-Anpassung
   • Inhalt und Empfänger der E-Mail können anhand der im Formular gegebenen Antworten automatisch geändert werden.
   • Sie können auch E-Mails im HTML-Format versenden, wodurch sie großartig aussehen.
2. Kann mit Google-Diensten verknüpft werden
   • Antwortdaten werden zur einfachen Zusammenstellung und Verwaltung automatisch in Google Sheets gespeichert.
   • Erstellen Sie automatisch Ereignisse und legen Sie Erinnerungen in Google Kalender fest.
   • Organisieren und speichern Sie Dateien in Google Drive für eine einfache Datenverwaltung.
3. Keine Kosten
   • Kostenlos in Google Workspace verfügbar.
   • Da keine externen Dienste in Anspruch genommen werden müssen, ist der Betrieb kostengünstig.
4. Automatische und schnelle Bewegung
   • Nach dem Ausfüllen des Formulars können Sie eine E-Mail senden oder die Daten sofort speichern.
   • Es ist auch möglich, mehrere Prozesse gleichzeitig auszuführen.
5. Sicheres Datenmanagement
   • Da die Verarbeitung innerhalb Ihres Google-Kontos erfolgt, besteht nur ein geringes Risiko, dass Daten nach außen gelangen.
   • Auch die Sicherheit ist solide, Sie können also beruhigt sein.
6. Flexibler Einsatz
   • Sie können Einstellungen problemlos in neuen Formularen wiederverwenden.
   • Durch einfaches Ändern des Codes können Sie neue Funktionen hinzufügen und ihn anpassen.

Durch die Verwendung von GASFlexibel, skalierbar und kostengünstigDies wird erreicht, während der sichere Betrieb innerhalb des Google-Ökosystems gewährleistet wird. Dies macht es zu einer leistungsstarken Option, insbesondere wenn eine detaillierte Verarbeitung und Anpassung auf Grundlage der Antworten erforderlich ist.

Dieses Mal war ein Bestätigungsbildschirm nicht im Umfang enthalten, daher habe ich ihn nicht implementiert, aber ich möchte es beim nächsten Mal versuchen, wenn eine Anfrage eingeht. Ich werde einen weiteren Artikel darüber als Memo schreiben, wenn das passiert!

Sollten Sie Probleme bei der Änderung oder Migration Ihres Anfrageformulars haben, kontaktieren Sie uns bitte!

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