はじめに
今回はGoogleフォームとGASを使ってフォーム送信時に自動返信メールを送信する方法を紹介します。
問い合わせ用の窓口であったり、その他のフォームに応用することで、多種多様なシステムに組み込むことができます。
本記事を参考にして実際に動くものを作っていきながらGASの仕組みとメールの自動返信の方法を学んでいきましょう！
準備
本記事では以下ができていることを前提としていますのであらかじめ準備をお願いします。
- Google Chrome がインストールされている
- Googleアカウントを作成済みである
それでは参りましょう！
Googleフォームの作成
はじめに本システムの最重要部分であるGoogleフォームを作成していきます。
以下のリンクをクリックしてご自身のGoogleアカウントでGoogle Driveにアクセスしてください。
Access Google Drive with a Google account (for personal use)…
続いてGoogle Driveの任意の場所で右クリックをして表示されるメニューの中から『新しいフォルダ』をクリック（下記画像参照）します。
フォルダの名前を入力する画面が表示されるので任意の名前のフォルダを作成してください。本記事ではお問合せフォームを作ることを想定していきますので、『お問合せフォーム』という名前にしています。
Google Driveを確認すると先ほど作成したフォルダ（下記画像参照）が新しくできていますのでダブルクリックをしてこのフォルダの中に入ります。
フォルダの中に入ったら再度、任意の場所で右クリックをしてメニューの中から『Google フォーム』をクリックします。
すると新しいタブが開き下記画像のようなGoogleフォームのテンプレートが作成されます。
この時にGoogle Drive側を確認してみると『無題のフォーム』という名前のファイルが作成されているのが確認できます。
次にこの無題のフォームこと出来立てホヤホヤのGoogleフォームをお問合せフォームに合う内容にカスタマイズしていきます。
まずはフォームのタイトルを修正していきましょう。
下記画像を参考にGoogleフォーム中心のあたり（下記画像①）にある『無題のフォーム』をクリックして編集してください。今回は『お問合せフォーム』という名前にしていきます。この項目を修正した後に左上の『無題のフォーム』というところ（下記画像②）をクリックすると自動で先ほど入力した名前に切り替わります。
名前をそれぞれ変えた後の見た目は下記画像のようになります。
続いてフォームの質問内容をお問合せフォームに合う形に変えていきます。
事前に質問内容と形式を下記に示しておきます。
- 質問タイトル：お名前
- 形式：記述式
- 必須
- 質問タイトル：メールアドレス
- 形式：記述式
- 必須
- 質問タイトル：お問合せ内容
- 形式：段落
それではこの内容の質問を作っていきます。
フォーム作成時に作られた『無題の質問』という項目を編集していきます。
はじめに下記画像を参考にして質問のタイトルを変えていきます。質問の項目左側の『無題の質問』と書いてある場所（下記画像①）をクリックして『お名前』に変更してください。
続いて、質問の形式を変更します。質問の項目右側の『ラジオボタン』と書いてあるところ（下記画像②）をクリックして表示されるメニューから『記述式』（メニューの中の一番上）をクリックしてください。
最後にこの質問を必須の項目に設定します。質問の項目右下にある『必須スイッチ』（下記画像③）をクリックしてください。
この質問以降も同様にして作成をしていきます。
以上でGoogleフォームの作成が完了しました。
今回作成した質問項目以外にオリジナルの質問を追加したい場合はこちらで追加しておくことをお勧めします。
スプレッドシートの作成
続いてGoogleフォームの回答が保存されていくスプレッドシートを作成していきます。
Googleフォームのページを開いてください。
続いてページ上部中央の『回答』をクリックしてください。
切り替わったページの上部右側の『スプレッドシートのアイコン』をクリックしてください。
『回答先の選択』という項目が表示されるので上の『新しいスプレッドシートを作成』を選択してあることを確認して右下の『作成』をクリックします。
新しいタブでスプレッドシートが開きます。先ほどGoogleフォームで作成した質問がスプレッドシートの1行目に書かれていることが確認できます。
Googleフォームに回答をするとこのスプレッドシートにデータが蓄積されていく仕組みになっています。
ここでGoogle Driveを確認すると『お問合せフォーム』というGoogleフォームと同じ場所に『お問合せフォーム（回答）』という名前のスプレッドシートが作成されていることが確認できます。
以上でスプレッドシートの作成が完了しました。
このスプレッドシートは今後も使用していきますので管理できる場所に配置しておくようにしてください。
GASのコーディング
続いて本システムの一番難しい場所であるGAS（Google Apps Script）を書いていきます。
はじめての場合は見落としが無いように慎重に進めてください。
準備
先ほど作成したスプレッドシートを開いてください。
続いて、スプレッドシートのページ上部のメニューの中から『拡張機能』をクリックして表示されるメニューの中から『Apps Script』をクリックしてください。
新しいタブでGASのエディタが開きます。
まず、このGASプロジェクトのプロジェクト名を修正していきましょう。
GASのエディタページの左上の『無題のプロジェクト』と書いてあるところをクリックしてください。
続いて表示される項目の『プロジェクトのタイトル』を『無題のプロジェクト』から別の名前に修正してください。今回は『お問合せフォーム』として進めていきます。
名前の変更が完了したら右下の『名前の変更』をクリックしてください。
プロジェクト名の変更が完了したら次はコードの動作を確認します。GASのエディタでは下記画像の場所にコードを書いていきます。
ここまででGASのコーディングにおける準備は終了です。
コードの記述
続いて先ほど説明したコーディングエリアにコードを書いていきます。以下のコードをコーディングエリアにコピペしてください。
function onFormSubmit(e) {
let TimeStamp = e.namedValues["タイムスタンプ"][0];
let Name = e.namedValues["お名前"][0];
let Email = e.namedValues["メールアドレス"][0];
let InquiryContent = e.namedValues["お問合せ内容"][0];
let Subject = "【自動返信】" + Name + " 様 お問合せありがとうございます";
let Body = Name + "様 お問合せありがとうございます。" + "\n" +
"\n" +
"担当者より改めてご連絡いたしますのでもうしばらくお待ちください。" + "\n" +
"\n" +
"〜お問合せ内容〜" + "\n" +
"お名前：" + Name + "\n" +
"メールアドレス：" + Email + "\n" +
"お問合せ内容：" + InquiryContent + "\n" +
"\n" +
"フォーム送信日時：" + TimeStamp + "\n";
GmailApp.sendEmail(Email, Subject, Body);
}コードのコピペが完了したら、GASのエディタページ上部にあるフロッピーディスクの『保存マーク』をクリックして変更したコードを保存してください。
コードの解説
ここではコードについて解説していきます。分からないことなどがあれば本記事の下部にあるコメントから教えてください。
1行目について
function onFormSubmit(e)1行目では onFormSubmit(e) という名前の関数を作成することを意味しています。
プログラミング経験者の方は関数名を自由に変えていただいても構いませんが、この後の処理でこの関数名が重要となりますので、まだプログラミングに馴染んでいない方はこのままの関数名を使用してください。
2~5行目について
let TimeStamp = e.namedValues["タイムスタンプ"][0];
let Name = e.namedValues["お名前"][0];
let Email = e.namedValues["メールアドレス"][0];
let InquiryContent = e.namedValues["お問合せ内容"][0];2~5行目では変数と呼ばれる箱を作成してGoogleフォームの送信によって得られた回答を保存する処理を行なっています。
変数 TimeStamp は e.namedValues["タイムスタンプ"][0] でスプレッドシートの『タイムスタンプ』の値を取得します。
変数 Name は e.namedValues["お名前"][0] によってスプレッドシートの『お名前』の値を取得します。
変数 Email は e.namedValues["メールアドレス"][0] によってスプレッドシートの『メールアドレス』の値を取得します。
変数 InquiryContent は e.namedValues["お問合せ内容"][0] によってスプレッドシートの『お問合せ内容』の値を取得します。
ここで感の良い方なら気づくかもしれませんが e.namedValues["質問の名称"][0] の『質問の名称』の部分がスプレッドシートの質問の名称と一致しています。
つまり、Googleフォームで質問を増やしたり変化させた場合はこちらを修正することでGoogleフォーム送信時の回答の値をGASで得ることができます。
なお、このコード以外にもGoogleフォームからの回答データをGASで得る方法がありますので、気になる方は以下の記事をご覧ください。
データ取得の流れ 今回はGoogleフォームからデータを取得する方法を紹介しますが、データの流れとして、Googleフォームからスプレッドシートに転送してGoogle Apps Script でデータの取得を行います。 スプレッドシ[…]
6~16行目について
let Subject = "【自動返信】" + Name + " 様 お問合せありがとうございます";
let Body = Name + "様 お問合せありがとうございます。" + "\n" +
"\n" +
"担当者より改めてご連絡いたしますのでもうしばらくお待ちください。" + "\n" +
"\n" +
"〜お問合せ内容〜" + "\n" +
"お名前：" + Name + "\n" +
"メールアドレス：" + Email + "\n" +
"お問合せ内容：" + InquiryContent + "\n" +
"\n" +
"フォーム送信日時：" + TimeStamp + "\n";6~16行目では自動返信メールの件名と本文を変数に代入する処理を行なっています。
6行目の let Subject = "【自動返信】" + Name + " 様 お問合せありがとうございます"; では Subject という箱を用意すると同時に『【自動返信】<名前> 様 お問合せありがとうございます』という文字列を箱の中に入れる処理を行なっています。
7~17行目では先ほどと同じようにして Body という箱を用意すると同時に『お礼』と『フォームの回答内容・回答日時』を合わせた文字列をメール本文として箱の中に入れる処理を行なっています。
17行目について
GmailApp.sendEmail(Email, Subject, Body);17行目では今までに作成した変数である Email 、Subject 、Body を用いてメールを送信する処理を行なっています。
ここではメールの送信を行なっていますが、メール送信以外にもメールの下書きや、CC、BCCなどの設定も可能です。気になる方は以下の記事をご覧ください。
Gmailを作成して送信する場合 本文のみを送信する let Email = "test@example.com"; let Subject = "This is the subject"; let Body = "This i[…]
以上でGASのコーディングについて説明は終わります。
トリガーの設定
続いてはトリガーの設定についてです。
先ほど書いたコードをGoogleフォーム送信時に実行するための設定を行なっていきます。GASのエディタを開いてください。
ページ左側のメニューの中から目覚まし時計のアイコンの『トリガー』をクリックしてください。
続いてページの右下にある『＋トリガーを追加』ボタンをクリックしてください。
表示されるメニューの中から必要な修正を行なっていきます。
『イベントの種類を選択』の項目をクリックしてメニューの中から『フォーム送信時』をクリックしてください。
修正が完了したら、『実行する関数を選択』が『onFormSubmit』（独自の関数名）になっているか、『イベントの種類を選択』が『フォーム送信時』になっているかを確認して、問題なければ、右下の『保存』をクリックしてください。
続いて『アカウントの選択』という画面が表示されますが、Googleフォームなどを作成したGoogleアカウントを選択し、アカウントの承認を行なってください。なお、こちらの記事にアカウント承認の詳しい方法を記載しておりますので、初めての方は確認しながら行なってください。
承認はどこで求められる？ Google Apps Script をスクリプトエディタでコーディングし、実行する際に求められます。 Google Apps Script のみで完結する処理では承認は求められませんが、スプレッドシートや[…]
アカウントの承認が完了すると、トリガーのリストに先ほど保存したものが追加されています。
以上でトリガーの設定は完了です。
動作確認
ここからはこれまでの作業で作成してきたシステムの動作確認を行なっていきます。
Googleフォームを開いてください。
Googleフォームのページ上部の『目のアイコン』をクリックしてください。
作成したGoogleフォームの入力ページが開きますので、それぞれの項目に動作確認用のデータを入力してください。
なお、メールアドレスは自動返信のメールが届くメールアドレスになりますので、確認可能なメールアドレスにしてください。
Googleフォームにデータを入力して『送信』ボタンをクリックすると、入力したメールアドレスにメールが届きますのでGmailを開いて確認してください。
自動返信メールの件名を確認するとコードで設定したものになっているのが確認できます。
また、本文の内容もGoogleフォームに入力したデータが記載されていることも確認できます。
以上でGoogleフォームで自動返信メールを送信することができました。お疲れ様でした。
おわりに
今回はGASを使ってGoogle Formsを送信時に入力された情報で自動返信メールを作成・送信する方法を紹介しました。
コーディングをしはじめは難しいと感じるかもしれませんが、実際に動くものを作っていく中で一緒に学んでいきましょう！
本ブログでは今後も今回のような記事を作成していきますので、ご興味ある方はぜひフォロー・お気に入りをお願いします。