Valkuilen bij het maken van klantenformulieren met Google Form

De langdurig populaire Japanse WordPress-plugin MW WP Form wordt stopgezet. Het is jammer dat deze betrouwbare plugin, die door veel organisaties en bedrijven is gebruikt, wordt verdwenen.

Sommige klanten kunnen niet zoveel kosten maken voor het afzonderlijk ontwikkelen van veilige mailformulieren of het gebruik van SaaS voor frontend-implementatie. In zo'n geval hebben we een verzoek gekregen om het contactformulier over te schakelen naar Google Forms. We besloten Google Form in te bouwen terwijl we het huidige ontwerp behielden, en hebben het geïmplementeerd!

Hoewel we best practices hebben gecontroleerd op verschillende websites, was de implementatie zelf zeer eenvoudig. We zijn op enkele punten tegen problemen aangelopen, dus willen we deze keer die punten delen!

Werkproces

• Google Forms aanpassen als statische pagina
• Na het indienen van het formulier doorsturen naar de bevestigingspagina met JavaScript
• Automatisch antwoordbericht verzenden naar klanten met Google Apps Script

Punten waar we vastliepen

• Bij het verzenden van een automatisch antwoordbericht via GAS: "namedValues" voor het ophalen van formulierreacties is undefined
• Het verzendadres van het automatische e-mailbericht wordt mijn eigen adres

  　

Google Forms aanpassingen

Google Forms hoeft niet alleen standaard te worden gebruikt — je kunt het ook integreren in formulieren die je met HTML/CSS hebt gemaakt en het ontwerp aanpassen!

Dit is onze bezoekersregistratietabel, en we hebben ook Google Forms in het formuliergedeelte geïntegreerd.

We slaan details over over HTML-integratie en aanpassingen en hoe je naar een bevestigingspagina navigeert na indiening.

Probleem nummer 1:
Bij het verzenden van een automatisch antwoordbericht via GAS: "namedValues" voor het ophalen van formulierreacties is undefined

Je kunt Google AppScript (GAS) implementeren vanuit het spreadsheet dat aan de Google Forms-reacties is gekoppeld om automatische e-mails te verzenden.

Wanneer op de verzendknop van het contactformulier wordt geklikt, wordt een script geactiveerd dat de informatie uit het gekoppelde spreadsheet leest en in het e-mailbericht weerspiegelt.

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

We dachten dat het script het e-mailbericht zou verzenden, maar er trad een fout op.

TypeError: Cannot read properties of undefined (reading 'o-namae') at reply(reply:3:29)

Het eerste item 'o-namae' kan niet worden gevonden.

Kan e worden opgehaald? Hieronder controle uitvoeren

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

null is geretourneerd. Waarom.

Ik heb het GAS-ereignisobject namedValues onderzocht…

Opmerking: gebruik deze formulierinzendingstrigger samen met SpreadsheetTriggerBuilder.

Dit blijkt alleen triggers voor spreadsheets te kunnen gebruiken! Daarom zullen we dit keer response gebruiken.

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

De argument e van deze ereignis heeft verschillende inhoud (eigenschappen en methoden) afhankelijk van of de triggerinstelling voor GoogleForms of Spreadsheet is ingesteld, dus wees voorzichtig.

• GoogleForms

  e.response.getItemResponses()

• Spreadsheet

  e.values　e.namedValues

Met het herschreven script is de e-mail succesvol bezorgd!

...maar als je goed kijkt, zie je dat het afzenderadres mijn adres is. Op deze manier zouden automatische e-mails van mijn adres naar klanten worden verzonden.

Probleem 2
De afzender van de automatische e-mail is mijn adres geworden

• GAS vereist altijd dat je instelt 'met welk Google-account dit wordt uitgevoerd'.
• Wanneer je een e-mail via GAS verzendt, wordt deze verstuurd vanaf 'de Gmail van de executor'.

Dit keer heb ik mijn account uitgenodigd voor bewerkingsrechten op Google Form en het geïmplementeerd.
Op dit moment ben ik de executor van het automatische e-mailscript, dus de e-mail wordt vanuit mijn adres verzonden.

Om dit in te stellen naar het client-afzenderadres moet het opnieuw worden geconfigureerd met het eigenaaraccount. Ook als er een verzoek is als 'wij willen graag dat het info＠example.com afzenderadres van de klant wordt gebruikt', hoe stel je dit in...?

Oplossing

• Laat de client een alias-instelling toevoegen van het contactadres info＠example.com aan het Gmail-adres van de client.
• Trigger-instellingen opnieuw configureren met het eigenaaraccount
• Voeg een e-mailadres met een custom domain aan het account toe, voeg de optionele from-parameter toe aan MailApp.sendEmail() in het script en voer het adres in

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

Een aangepast domeinadres toevoegenwat is dat?

Door een account toe te voegen, kunt u e-mails verzenden met het adres [email protected].
Dit betekent dat u bij het verzenden vanuit Gmail "[email protected]" als afzender kunt kiezen. Het werkt ongeveer als een subadresnaam.

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

De eenvoudigste en beste werkwijze is daarom om
het eigenaarsaccount te vragen om het adres [email protected] voor contactverzoeken toe te voegen → vervolgens de triggerconfiguratie in het eigenaarsaccount in te stellen.

Een aandachtspunt: automatische e-mails worden als Gmail verzonden, dus verzamelen zich in de map "Verzonden items".
*Als u niet wilt dat de verzendmap vol raakt, kunt u ook beter een speciaal account aanmaken.

Samenvatting

Google Forms zelf heeft ook een eenvoudige automatische verzendingsfunctie, maar u kunt het onderwerp en de body van de e-mail niet aanpassen.
Bij het gebruik van extensies is de gratis versie beperkt tot 20 automatische antwoorden per dag.
Met GAS kunt u daarentegen een kosteneffectieve oplossing met hoge flexibiliteit en uitbreidbaarheid bouwen!

Voordelen van het gebruik van GAS

1. Gebruikersvriendelijke e-mailaanpassing
   • U kunt de inhoud en ontvanger van de verzonden e-mail automatisch wijzigen op basis van de antwoorden op het formulier.
   • U kunt ook e-mails in HTML-indeling versturen, zodat deze er goed uitzitten.
2. Integratie met Google-services
   • Antwoordgegevens worden automatisch opgeslagen in Google Sheets, waardoor samenvatting en beheer eenvoudig zijn.
   • U kunt automatisch afspraken in Google Agenda maken en herinneringen instellen.
   • Bestanden organiseren en opslaan in Google Drive voor eenvoudig gegevensbeheer.
3. Geen kosten
   • Gratis beschikbaar binnen Google Workspace.
   • U hoeft geen externe services te gebruiken, wat resulteert in lage bedrijfskosten.
4. Automatisch en snel
   • Direct na indiening van het formulier kunnen e-mails worden verzonden en gegevens worden opgeslagen.
   • Het is ook mogelijk om meerdere processen tegelijk uit te voeren.
5. Veilige gegevensbeheer
   • Omdat de verwerking volledig binnen uw Google-account plaatsvindt, hoeft u zich weinig zorgen te maken over gegevenslekkage naar externe partijen.
   • De beveiliging is ook goed geregeld, dus u kunt gerust zijn.
6. Flexibel aanpasbaar naar uw behoeften
   • U kunt instellingen eenvoudig hergebruiken in nieuwe formulieren.
   • Met kleine wijzigingen in de code kunt u nieuwe functies toevoegen of het systeem aanpassen.

Door Google Apps Script te gebruiken, realiseert u flexibiliteit, uitbreidbaarheid en kostenefficiëntie, terwijl u veilig binnen het Google-ecosysteem werkt. Dit maakt het een krachtige keuze, vooral wanneer u verfijnde verwerkingen en aanpassingen nodig heeft op basis van antwoordinhoud.

Deze keer hebben we een bevestigingsscherm niet in het bereik opgenomen en dus niet geïmplementeerd, maar als dit in de toekomst wordt gevraagd, willen we het graag proberen. Dan schrijf ik weer een artikel als herinnering!

Als u hulp nodig hebt bij het wijzigen of migreren van contactformulieren, kunt u contact met ons opnemen.

Referentiebron Zenn artikel van ryotoitoiさん: https://zenn.dev/ryotoitoi/articles/3cedb115d816e5