--- title: "GoogleFormでお客様のフォームを作るときの落とし穴" date: 2024-11-27 categories: column author: 平林 canonical: https://www.liberogic.jp/topics/20241127-googleform-point/ --- # GoogleFormでお客様のフォームを作るときの落とし穴 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/d96e0673d4f54b75be3a984ae11cedb8/pixta_99080248.jpg) GoogleFormsをHTMLでカスタマイズし、GASを使って自動返信メールを設定する方法を解説。つまずきやすいnamedValuesエラーや送信元アドレスの変更方法も詳しく説明。柔軟性・拡張性に優れたGASの活用で、低コストで効率的なフォーム運用が可能になります！ WordPressで長らく愛用されていた日本製のプラグイン MW WP Form が廃止されてしまいますね。多くの団体や法人サイトで採用されてきた信頼あるプラグインなだけに少し残念です。 セキュアなメールフォームを別途開発したり、SaaSを利用してフロント実装するほどコストをかけられないお客様もいらっしゃいます。そんな中でお問い合わせフォームをGoogleFormsに切り替えるご要望を頂きました。どうせなら現状のデザインを活かしつつ、GoogleFormを埋め込む形にしようと思い、実装してみました！ ノウハウは色々なサイトに掲載されているので、確認しながらにはなりましたが、導入自体はとてもシンプルでした。 少し手こずった部分もあったので、今回はそのポイントを共有したいと思います！ ### 作業工程 - GoogleForms を静的ページにカスタマイズ - フォーム送信後に送信完了ページにJSで遷移させる - GASで自動返信メールをお問合せいただいたお客様に送る ### つまづいた点 - 自動返信メールを送る際のGASで**フォームの回答を取得する"namedValues"がundefined** - 自動送信メールの送信元が私のアドレスになってしまう #### GoogleFormsカスタマイズについて GoogleFormsはそのまま設置するだけではなく、HTML/CSSで作成したフォームに組み込んでデザインをカスタマイズすることが可能です！ こちらは弊社の来客者訪問管理表なのですが、こちらもフォーム部分にGoogleFormsを組み込んでおります。 ![GoogleFormをカスタマイズして作成した、来客者訪問管理サイトのキャプチャ](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/de601c6610aa49ea9a02a28519462d03/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-11-27%2014.57.30.png) HTMLへの組み込みカスタマイズ、送信後に完了ページへの遷移方法に関してのご説明は今回は割愛します。 ## つまづいた点 その1 自動返信メールを送る際のGASで**フォームの回答を取得する"namedValues"がundefined** GoogleFormsの回答に紐づいたスプレットシートからGoogleAppScript (GAS)を実装して自動送信メールを送ることができます。 ![GoogleFormに紐づいた回答スプレットシートのキャプチャ](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/7186faede53c4b95bab1784703e1309c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-11-21%2017.43.15.png) ![GASのスクリプトトリガー設定内容のキャプチャ](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/59b9b3c7b287463db9fa7668a9cd9440/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-11-21%2018.11.58.png) お問合せフォームの送信ボタンが押されたタイミングをトリガーに、紐づけられたスプレットシートから送られてきた情報を読み取ってメールに反映するスクリプトが走ります。 ``` `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 }); } ` ``` このスクリプトでメールが送れると思いきやエラーになりました。 `TypeError: Cannot read properties of undefined (reading 'お名前')at reply(reply:3:29)` 最初の項目「お名前」が見つかりません。と。 eは取得できているんだろうか…下記で確認 ``` `function reply(e) { Logger.log(JSON.stringify(e)); }` ``` null と返ってきた。ナンデ。 GASのイベントオブジェクト**namedValues**について調べてみると… > ** 注意: SpreadsheetTriggerBuilder とともにこのフォーム送信トリガーを使用してください。** こちらはスプレットシート用のトリガーしか使用できないとのこと！なので今回は**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 }); }` ``` このイベントの引数eは、トリガーの設定を**GoogleForms**か**スプレッドシート**のどちらでしているかで、中身（プロパティ・メソッド）が異なっているので注意が必要です。 - GoogleForms`e.response.getItemResponses()` - スプレッドシート`e.values e.namedValues` 書き直したスクリプトで無事メールが届きました！ …でも、よく見てみると送信元が自分のアドレスになってます。 このままでは私のアドレスからお客様へ自動送信メールが届いてしまうことになります。 ![自動送信メールのキャプチャ](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/d645d799fa69445cb32dfc516867ca49/%E3%82%AF%E3%82%99%E3%83%AB%E3%83%BC%E3%83%95%E3%82%9A%201.png) ## つまづいた点 その2 自動送信メールの送信元が私のアドレスになってしまう - GASは「誰のGoogleアカウントで実行するか」を必ず設定します。 - GASからメールを送信する際は「実行者のGmail」から送信される形になります 今回はGoogleFormの編集権限に私のアカウントを招待していただき実装しました。 現在 自動送信メールのスクリプト実行者が私になっているため、送信元が私のアドレスで送信されてしまいます。 こちらをクライアント送信元にするためにはオーナーアカウントで設定し直す必要があります。 また、「クライアント側のお問合せ専用アドレス`info@example.com` を送信元にしてほしい」とご要望があった場合、設定するためには…? ![GASのスクリプトトリガー設定者のキャプチャ](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/24c77007d03b4196b51b8c87a019ef17/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-11-22%2011.22.01.png) #### **解決方法** - クライアント側のGmailアドレスにお問合せ用アドレス`info@example.com` をエイリアス設定してもらう。 - トリガー設定をオーナーアカウントで設定し直す - アカウントに独自ドメインのメールアドレスを追加**、**スクリプトの`MailApp.sendEmail()`にオプションのfromを追加し、アドレスを記述 ``` `GmailApp.sendEmail(email, replySubject, body, { from: 'info@example.com' // 追加した送信元アドレス });` ``` --- #### 独自ドメインアドレスの追加**とは** アカウントを追加するすることで、 `info@example.com` のメールアドレスを使って送信することができます。 つまり、Gmail内から送信する際に「`info@example.com`」という名前の送信元を選べるようになります。サブアドレスのようなものです。 --- アカウント追加をしない場合、Gmail アカウントを使っている限り、**送信元を自由にカスタマイズすることはできません**。 その場合、外部 SMTP サーバー（例: SendGrid, Amazon SES）を利用する必要があります。 なのでシンプルかつベストな流れとしては、 オーナーアカウントにお問い合せ用の`info@example.com` アドレスを追加してもらう → オーナーアカウントでトリガー設定を行う。 注意点は、自動送信メールは Gmail として送信されることになるので「送信済み」フォルダに溜まっていきます。 ※送信フォルダがいっぱいになるのが嫌であれば専用のアカウントを新規作成するのも良いかと思います。 ### まとめ GoogleForms自体にも簡易的な自動送信機能がありますが、メールの件名や本文のカスタマイズが不可。 その他 拡張機能を使う方法だと無料版は1日の上限自動返信数が20件と定められています。 一方GASはコストを抑えつつ柔軟性と拡張性の高いソリューションを構築できます！ #### GASを使用するメリット 1. **使いやすいメールカスタマイズ** - フォームの回答内容に合わせて、送信するメールの内容や宛先を自動で変更可能。 - HTML形式でデザインされたメールも送れるので、見栄えよく仕上がる。 2. **Googleサービスと連携できる** - 回答データをGoogleスプレッドシートに自動保存して、集計や管理が簡単。 - Googleカレンダーに自動で予定を作成してリマインダーを設定可能。 - Googleドライブにファイルを整理・保存して、データ管理がラクに。 3. **コストがかからない** - Google Workspace内で無料で利用可能。 - 外部サービスを使わなくていいので、低コストで運用できる。 4. **自動で素早く動く** - フォーム回答後すぐにメール送信やデータ保存ができる。 - まとめて複数の処理を一度に実行することも可能。 5. **安全にデータ管理** - Googleアカウント内だけで処理が完結するので、外部にデータが漏れる心配が少ない。 - セキュリティもしっかりしているので安心。 6. **柔軟に使い方を変えられる** - 新しいフォームでも簡単に設定を使い回せる。 - 少しコードを変えるだけで、新しい機能を追加したり、カスタマイズができる。 GASを使用することで、**柔軟性・拡張性・コスト効率の良さ**を実現しつつ、Googleサービスのエコシステム内で安全に運用可能で、特に回答内容を基にした細かな処理やカスタマイズが必要な場合に強力な選択肢となります。 今回は確認画面がスコープになかったので実装しませんでしたが、次回要望が来たら試してみたいところです。その時にまた備忘録的に記事書きます！ お問い合せフォームの改修や移行などでお困りごとがありましたら、弊社へご相談ください！ 参考サイト Zenn ryotoitoiさんの記事：[https://zenn.dev/ryotoitoi/articles/3cedb115d816e5](https://zenn.dev/ryotoitoi/articles/3cedb115d816e5)