Topics

MW WP Form, een Japanse plugin die al lange tijd populair is op WordPress, wordt stopgezet. Dat is een beetje teleurstellend, want het is een vertrouwde plugin die door veel organisaties en bedrijfswebsites is geadopteerd.

Sommige klanten kunnen het zich niet veroorloven om een ​​apart, beveiligd e-mailformulier te ontwikkelen of een front-endoplossing te implementeren met behulp van SaaS. Eén zo'n klant vroeg ons om hun contactformulier over te zetten naar Google Forms. We besloten een Google Form te integreren met behoud van het huidige ontwerp, en dat hebben we gedaan!

De knowhow is beschikbaar op verschillende websites, dus ik moest het even checken, maar de installatie zelf was heel eenvoudig. Er waren een paar onderdelen die wat lastig waren, dus die wil ik vandaag graag met jullie delen!

Operaties

• GoogleForms aanpassen aan een statische pagina
• Overgang naar de voltooiingspagina voor de inzending met behulp van JS nadat het formulier is ingediend
• Stuur automatische antwoord-e-mails naar klanten die via GAS een aanvraag indienen

Struikelpunten

• GAS voor het versturen van automatische antwoord-e-mails"namedValues" om formulierreacties op te halen is niet gedefinieerd.
• Het afzenderadres van de geautomatiseerde e-mail is van mijzelf.

  　

Over Google Formulieren aanpassen

U kunt Google Forms niet alleen zo installeren, maar het ook integreren in formulieren die zijn gemaakt met HTML/CSS en het ontwerp aanpassen!

Dit is ons bezoekersbeheerblad. We hebben ook Google Forms in het formuliergedeelte geïntegreerd.

We gaan niet in op details over het aanpassen van de HTML-insluiting of hoe u na indiening naar de voltooiingspagina gaat.

Struikelpunt #1
GAS voor het versturen van automatische antwoord-e-mails"namedValues" om formulierreacties op te halen is niet gedefinieerd.

U kunt Google AppScript (GAS) implementeren om geautomatiseerde e-mails te versturen vanuit een spreadsheet die gekoppeld is aan Google Forms-reacties.

Wanneer u op de knop Verzenden op het aanvraagformulier drukt, wordt er een script uitgevoerd dat de informatie uit het gekoppelde spreadsheet leest en in de e-mail weergeeft.

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 ik een e-mail kon versturen met dit script, maar ik kreeg een foutmelding.

TypeError: Kan geen eigenschappen van undefined lezen (leest 'Your name') bij antwoord (antwoord: 3:29)

Het eerste item "Naam" kan niet worden gevonden.

Heb je e kunnen bemachtigen? Kijk hieronder.

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

Het gaf nul terug. Waarom?

GAS-gebeurtenisobjectnamedValuesToen ik er eens naar keek...

Opmerking: Gebruik deze formulierinzendingstrigger in combinatie met de SpreadsheetTriggerBuilder.

Blijkbaar kunnen hier alleen triggers voor spreadsheets worden gebruikt!responseGebruik.

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

Het argument e van deze gebeurtenis is de triggerinstelling.GoogleFormsmugRekenbladHoud er rekening mee dat de inhoud (eigenschappen en methoden) verschilt, afhankelijk van de methode die u gebruikt.

• GoogleForms

  e.response.getItemResponses()

• Rekenblad

  e.values　e.namedValues

De e-mail met het herschreven script is succesvol aangekomen!

Maar als je goed kijkt, zie je dat het afzenderadres mijn eigen adres is. Als dit zo doorgaat, ontvangen klanten geautomatiseerde e-mails van mijn adres.

Struikelpunt #2
Het afzenderadres van de geautomatiseerde e-mail is van mijzelf.

• Wanneer u GAS gebruikt, moet u instellen onder welk Google-account de app wordt uitgevoerd.
• Bij het verzenden van een e-mail vanuit GAS wordt deze verzonden vanuit de "Gmail van de uitvoerder"

Deze keer heb ik het geïmplementeerd door mijn account uit te nodigen om het Google Formulier te bewerken.
Momenteel is de scriptuitvoerder voor de geautomatiseerde e-mail op mij ingesteld, waardoor de e-mail vanaf mijn adres wordt verzonden.

Om dit de afzender van de client te maken, moet u het opnieuw configureren in het eigenaarsaccount. Ook "Client-side inquiry address"info@example.comHoe stelt u in dat u "als afzender" wilt instellen?

Oplossing

• Het Gmail-adres van de klant zal een aanvraagadres hebbeninfo@example.comLaat ze hiervoor een alias instellen.
• Triggerinstellingen opnieuw configureren in het eigenaarsaccount
• Voeg een e-mailadres met uw eigen domein toe aan uw account、ScriptMailApp.sendEmail()Voeg de optionele from toe en schrijf het adres

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

Uw eigen domeinadres toevoegenWat is

Door een account toe te voegen,info@example.comU kunt het versturen via het e-mailadres.
Met andere woorden, wanneer u vanuit Gmail verzendt,info@example.comU kunt dan een afzendernaam selecteren, bijvoorbeeld '.'. Dit is een soort subadres.

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

De eenvoudigste en beste manier is dus om
Voor vragen aan de eigenaarsaccountinfo@example.comVoeg het adres toe → Stel triggers in het eigenaarsaccount in.

Houd er rekening mee dat automatisch verzonden e-mails als Gmail worden verzonden en in de map 'Verzonden' terechtkomen.
*Als u niet wilt dat uw map Verzonden berichten vol raakt, kunt u hiervoor een nieuw account aanmaken.

samenvatting

Google Forms zelf heeft een eenvoudige functie voor automatisch verzenden, maar het is niet mogelijk om het onderwerp of de hoofdtekst van de e-mail aan te passen.
Overig: Als u een extensie gebruikt, heeft de gratis versie een dagelijkse limiet van 20 automatische antwoorden.
Met GAS kunt u daarentegen een uiterst flexibele en schaalbare oplossing bouwen, terwijl u de kosten laag houdt!

Voordelen van het gebruik van GAS

1. Eenvoudig te gebruiken e-mailaanpassing
   • De inhoud en de ontvanger van de e-mail kunnen automatisch worden gewijzigd op basis van de antwoorden in het formulier.
   • U kunt ook e-mails versturen die zijn opgesteld in HTML-formaat, waardoor ze er aantrekkelijk uitzien.
2. Kan gekoppeld worden met Google-services
   • Antwoordgegevens worden automatisch opgeslagen in Google Sheets, zodat u ze eenvoudig kunt samenstellen en beheren.
   • Maak automatisch gebeurtenissen en stel herinneringen in in Google Agenda.
   • Organiseer en bewaar bestanden in Google Drive voor eenvoudig gegevensbeheer.
3. Geen kosten
   • Gratis beschikbaar binnen Google Workspace.
   • Omdat er geen gebruik hoeft te worden gemaakt van externe diensten, kan het tegen lage kosten worden beheerd.
4. Automatisch en snel uurwerk
   • Nadat u het formulier heeft ingevuld, kunt u een e-mail versturen of de gegevens direct opslaan.
   • Het is ook mogelijk om meerdere processen tegelijk uit te voeren.
5. Veilig gegevensbeheer
   • Omdat de verwerking binnen uw Google-account plaatsvindt, is de kans op gegevenslekken naar buiten klein.
   • Ook de beveiliging is uitstekend, dus u kunt erop vertrouwen.
6. Flexibel gebruik
   • U kunt instellingen eenvoudig hergebruiken in nieuwe formulieren.
   • Door de code een beetje aan te passen, kunt u nieuwe functies toevoegen en de code aanpassen.

Door gebruik te maken van GAS,Flexibel, schaalbaar en kosteneffectiefDit wordt bereikt terwijl het veilig binnen het Google-ecosysteem functioneert. Dit maakt het een krachtige optie, vooral wanneer gedetailleerde verwerking en aanpassing op basis van de antwoorden vereist is.

Deze keer was een bevestigingsscherm niet in de scope opgenomen, dus heb ik het niet geïmplementeerd. Ik wil het echter graag proberen als er de volgende keer een verzoek binnenkomt. Ik zal er een nieuw artikel over schrijven in de vorm van een memo als het zover is!

Als u problemen ondervindt bij het wijzigen of migreren van uw aanvraagformulier, neem dan contact met ons op!

Referentiesite: Artikel door Zenn ryotoitoi:https://zenn.dev/ryotoitoi/articles/3cedb115d816e5