Valkuilen bij het maken van een Google Form voor uw klanten

De Japanse plug-in MW WP Form, die lange tijd populair was binnen WordPress, wordt helaas stopgezet. Het is een betrouwbare plug-in die door veel organisaties en bedrijfswebsites is gebruikt, dus dit is best jammer.

Sommige klanten kunnen het zich niet veroorloven om een veilig mailformulier apart te ontwikkelen of om een SaaS-oplossing te gebruiken voor de frontend-implementatie. Daarom kregen we het verzoek om het contactformulier over te zetten naar Google Forms. Omdat we het liefst het bestaande ontwerp behouden, hebben we besloten Google Forms in de bestaande pagina in te bedden, en dat hebben we vervolgens gerealiseerd!

Er staat veel kennis op verschillende websites, dus we konden het meeste al snel controleren terwijl we aan de slag gingen. De implementatie zelf was erg eenvoudig. Er waren echter een paar onderdelen die voor enige uitdaging zorgden, dus in dit artikel delen we die punten graag met jou!

Werkwijze

• Google Forms aanpassen voor een statische pagina
• Na het verzenden van het formulier navigeren naar de bevestigingspagina met JavaScript
• Een automatisch antwoord per e-mail sturen naar klanten die via het formulier contact hebben opgenomen, met GAS

Knelpunten

• Bij het versturen van automatische antwoordmails met GAS: "namedValues" om de formulierantwoorden op te halen is undefined
• Het afzenderadres van de automatische bevestigingsmail wordt mijn eigen adres

  　

Over het aanpassen van Google Forms

Google Forms hoeft niet alleen als standaardformulier te worden geplaatst. Het is ook mogelijk om het in een formulier dat je met HTML/CSS hebt gemaakt te integreren en het ontwerp aan te passen!

Dit is het bezoekersregistratieoverzicht van ons bedrijf. Ook hier is Google Forms in het formulierdeel geïntegreerd.

De aanpassing van de HTML-integratie en de manier waarop je na verzending naar een bedankpagina doorverwijst, laat ik deze keer buiten beschouwing.

Struikelpunt 1:
In de GAS die de automatische bevestigingsmail verstuurt, is het "namedValues" om de formulierantwoorden op te halen undefined

Met Google Apps Script (GAS) in het spreadsheet dat aan de antwoorden van Google Forms is gekoppeld, kun je een automatische bevestigingsmail versturen.

Wanneer op de verzendknop van het contactformulier wordt geklikt, wordt een script geactiveerd dat de gegevens uit het gekoppelde spreadsheet leest en in de e-mail verwerkt.

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

Ik dacht dat dit script de e-mail zou versturen, maar er trad een fout op.

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

Het eerste veld "お名前" (naam) werd niet gevonden. Dat is het.

Ik denk dat e wel wordt opgehaald... Laten we dat hieronder controleren.

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

Er kwam null terug. Waarom?

Bij het opzoeken van het GAS-gebeurtenisobject namedValues...

Let op: gebruik deze trigger voor het verzenden van formulieren samen met SpreadsheetTriggerBuilder.

Er is gebleken dat alleen triggers voor spreadsheets kunnen worden gebruikt, dus in dit geval gebruik ik 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 
  });
}

Let op: de inhoud (eigenschappen en methoden) van dit gebeurtenisargument e verschilt, afhankelijk van of de trigger is ingesteld voor Google Forms of voor een spreadsheet.

• GoogleForms

  e.response.getItemResponses()

• Spreadsheet

  e.values　e.namedValues

Het herschreven script heeft de e-mail succesvol verzonden!

...Maar als ik beter kijk, staat als afzender mijn eigen adres ingesteld. Zo zou de automatische e-mail naar de klant van mijn eigen adres worden verzonden.

Hoe ik struikelde, deel 2: het afzendadres van geautomatiseerde e-mails is mijn eigen adres geworden

• In GAS stel je altijd in met welk Google-account het script wordt uitgevoerd.
• Wanneer e-mails vanuit GAS worden verzonden, worden ze verstuurd vanaf de Gmail van de uitvoerder.

Voor deze implementatie heeft de klant mijn account uitgenodigd als bewerker van het Google Form.
Omdat ik momenteel de uitvoerder van het script voor geautomatiseerde e-mails ben, worden de e-mails verzonden vanaf mijn adres.

Om dit in te stellen als afzender van de klant, moet het worden opnieuw geconfigureerd met het eigenaarsaccount. Als de klant echter verzoekt om het speciale contactadres van de klant [email protected] als afzender te gebruiken, hoe moet dat dan worden ingesteld...?

Oplossing

• Laat de klant het contactadres [email protected] als alias instellen op het Gmail-adres van de klant.
• Stel de trigger opnieuw in met het eigenaarsaccount
• Voeg een e-mailadres met een eigen domein toe aan het account, voeg de optie from toe aan de MailApp.sendEmail() in het script en geef het adres op

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

Een e-mailadres met eigen domein toevoegen: wat is dat?

Door een account toe te voegen, kun je verzenden met het e-mailadres [email protected].
Dat betekent dat je bij het verzenden vanuit Gmail de afzender "[email protected]" kunt selecteren. Het werkt als een subadres.

Als je geen account toevoegt, kun je zolang je een Gmail-account gebruikt de afzender niet vrij aanpassen.
In dat geval moet je een externe SMTP-server gebruiken (bijvoorbeeld SendGrid of Amazon SES).

De eenvoudigste en beste werkwijze is daarom:
laat de eigenaar van het account het adres [email protected] toevoegen voor contactdoeleinden → stel vervolgens de trigger in via het account van de eigenaar.

Let op: automatisch verzonden e-mails worden als Gmail verzonden en blijven zich opstapelen in de map "Verzonden items".
Als je het vervelend vindt dat de verzendmap vol raakt, kun je overwegen om een apart account aan te maken.

Conclusie

Google Forms heeft zelf ook een eenvoudige automatische verzendfunctie, maar je kunt het onderwerp en de inhoud van de e-mail niet aanpassen.
Bij andere extensies geldt in de gratis versie een limiet van 20 automatische antwoorden per dag.
GAS daarentegen biedt een oplossing die kosten beperkt en tegelijk flexibel en goed uitbreidbaar is!　

Voordelen van het gebruik van GAS

1. Eenvoudig aan te passen e-mails
   • Afhankelijk van de antwoorden in het formulier kunnen de inhoud en ontvanger van de verzonden e-mail automatisch worden aangepast.
   • Ook e-mails in HTML-opmaak kunnen worden verzonden, zodat ze er verzorgd uitzien.
2. Integreert met Google-diensten
   • Antwoordgegevens worden automatisch opgeslagen in Google Spreadsheets, zodat ze eenvoudig kunnen worden geteld en beheerd.
   • Maak automatisch afspraken in Google Agenda en stel herinneringen in.
   • Ordn en sla bestanden op in Google Drive, zodat gegevensbeheer eenvoudig blijft.
3. Geen extra kosten
   • Gratis te gebruiken binnen Google Workspace.
   • Omdat er geen externe diensten nodig zijn, kan het systeem tegen lage kosten worden beheerd.
4. Automatisch en snel
   • Direct na het invullen van een formulier kunnen e-mails worden verzonden en gegevens worden opgeslagen.
   • Meerdere processen kunnen ook tegelijk worden uitgevoerd.
5. Veilig gegevensbeheer
   • Omdat de verwerking volledig binnen het Google-account plaatsvindt, is het risico op datalekken naar buiten beperkt.
   • Ook de beveiliging is goed geregeld, dus je kunt gerust zijn.
6. Flexibel aanpasbaar in het gebruik
   • Instellingen zijn eenvoudig opnieuw te gebruiken, ook voor nieuwe formulieren.
   • Met een kleine codewijziging kun je nieuwe functies toevoegen of het geheel aanpassen.

Met GAS realiseer je flexibiliteit, uitbreidbaarheid en kosteneffectiviteit, terwijl je veilig binnen het ecosysteem van Google-diensten kunt werken. Vooral wanneer gedetailleerde verwerking of aanpassing op basis van antwoordinhoud nodig is, is dit een krachtige keuze.

Dit keer stond het bevestigingsscherm niet in de scope, dus hebben we het niet geïmplementeerd. Als er de volgende keer een verzoek komt, willen we het graag uitproberen. Dan schrijven we daar weer een artikel over als geheugensteun!

Heb je hulp nodig bij het aanpassen of migreren van je contactformulier? Neem dan gerust contact met ons op!

Referentiesite: Zenn, artikel van ryotoitoi: https://zenn.dev/ryotoitoi/articles/3cedb115d816e5