フォームからのお問合せに自動返信機能をつけてみた〜スプレッドシート＆GAS〜（STUDIO Tips）

JABです！
Web制作や映像制作、配信などやってます。
そしてSTUDIOブランドアンバサダーであり、STUDIOの熱狂的ファンです。

前回のSTUDIOについて書いたnoteがたくさんの人に見てもらえたので、嬉しくてまたSTUDIOについてです。

STUDIOで作ったサイトのお問合せフォームから自動返信の機能を作る方法を残しておきます。

STUDIOとGoogleフォームの連携

STUDIOもそうですが、Googleのサービスもなかなか便利です。
そしてそんなふたつが簡単に連携できることで、もはや敵なしじゃないかと思うほどです！

※フォームのgoogle連携画像

スプレッドシートとの連携が本当に簡単になってます！
説明は不要ですね。
とにかく一度自分のサイトからテスト送信してみてください。

通常STUDIOのフォームから送信された内容は、STUDIOのダッシュボードの「form」からお問合せ内容が確認できます。
もちろん、フォーム作成時に設定した送信先となっているメールアドレスに通知メールが来たりもします。

そしてさらに、、、
先ほど自動的に作られたスプレッドシートにも反映されています。

この機能を使ってお客様の声を集めて分析したり、簡易的な予約機能などもつけることができます。

この記事自体はSTUDIOというよりGoogleスプレッドシートとGASの話になりますが、STUDIOで制作したサイトのコンタクトフォームをより便利にするということで、STUDIO Tipsとしておきます。

コンタクトフォームの埋め込み→Googleスプレッドシート連携

フォームの埋め込みと基本的な設定はとても簡単だし、STUDIOのオフィシャルブログの中にも記事があると思うのでここでは割愛・・・

こんな状態になりますよね⬇︎⬇︎⬇️

ここまできたらダッシュボード＞フォームへ

フォーム右上の「設定」をクリックすると、「外部連携」がありそこで簡単にスプレッドシートと連携できます！

そのあとテストメールを送ってみて、連携したスプレッドシートを開いてみると、、、

こんな感じになります。

1行目にはラベルが入って、
2行目からフォームから送信された内容が自動的に取得されます。

ここを使って自動返信機能を作っていく感じです。
ここからは完全にGoogleサービスの話ですね！

実際に自動返信を作る場合はGASを書いていく必要があります。

GASって？

はじめに「GAS」とはGoogle App Scriptのことです。

要はここにプログラムを書いて、Google経由で自動返信メールを送るシステムを作ることになります。

実際ネット上にかなりのリファレンスがあるので、それを見ながら書いてみると、いろんなことができます！

早速GASを書いていく

まずはそのスプレッドシートの「ツール」＞「スクリプトエディタ」という風に選択していきます。

すると新しいタブが開かれて、プログラムを書いていく画面に移行します。

まずはメールの内容で返信メールに入れたいところを変数として指定します。

今回の場合,name、company、email、messageという変数を作りました。

そしてそこに新規に追加された行の各列をスプレッドシートから取得して、変数に入れます。

あとは返信内容を作っていく感じです。

スクリプトの意味はわかるんですが、私が一番悩んだのは「\（バックスラッシュ）」のタイピングでしたwww

option+¥キー

これでOKですw

ちなみに、「\n」は改行です。

最後の2行にGmailから送信する記述をして完成です！

37行目は一応自分のアドレスにも送っておこうという感じつけてます。

必ずテスト送信！

ここまできたら実行してみましょう。

「実行」をクリックすると、、、

これが出てきますが、最初の1回だけです。「権限を承認」でGoogleアカウントで承認します。

そうすると以下の表示になりますが、「詳細」をクリックして「ポートフォリオフォームに移動」を選択します。

あとは画面に従って「許可」を押せばOK！

おそらくそのあと、プログラムが走って、メールアドレス宛に送られているはずです。

内容を確認して、問題なければもう一度STUDIOで作ったWebサイトから送信してみてください。

最後にトリガーを作る

これはどうなったときにメールを先ほどの自動返信スクリプトを実行するかというものです。

メニューバーからトリガーを選択します。

すると次の画面になります

右下の「トリガーを作成」で作ります。

ここの設定はお好みだと思うんですが、私はSTUDIOフォームから送信されたときすぐに返信して欲しいので以下の設定で行きます！！

関数は先ほど作成した「autoReply」として、イベントの種類を「編集時」に設定しました。

注意

この方法でメールを送る場合、1日に送信できるメールは100通（無料版Googleアカウントの場合）となっていますので、先の方法で自分のメールアドレスにも送るとなると50回のお問い合わせまで自動返信がされるという感じです。

たくさん問い合わせが来るようなサイトだと、G Suiteなど有料のアカウントにしておいた方がいいかもしれないです。

私としてはそんなにお問い合わせが来ないので、無料でも十分なところが切ないですwww

STUDIOではGoogleスプレッドシートとの連携が簡単にできるので、自動返信なんかも簡単にできるようになりました。

少しだけGASを勉強すれば簡単にできますし、以下のコードをコピペして、必要な変数を変えたり、本文を作り直すだけで簡単にできます。

本当、STUDIO、Googleさまさまです。

function autoReply() {
 var sheet = SpreadsheetApp.getActiveSheet();
 var row = sheet.getLastRow();
 var name = sheet.getRange(row,1).getValue();
 var company = sheet.getRange(row,2).getValue();
 var email = sheet.getRange(row,3).getValue();
 var message = sheet.getRange(row,4).getValue();

 var myMail = "メールアドレス@gmail.com";
 
 //自動返信メール件名
 var title = "【自動返信】JAB'S DESIGNにお問い合わせいただきありがとうございます。"
 
 //自動返信メール本文
 var body 
 = "お問い合わせいただきありがとうございます。 \n"
 + "3日以内に返信いたします。\n"
 + "今しばらくお待ちください\n\n"
 + "お問合せ内容については以下の通りです。\n"
 + "----------------------------------------------------\n"
 + "●お名前\n"
 + name + " 様\n\n"
 + "●会社名\n"
 + company + " \n\n"
 + "●メールアドレス\n"
 + email + "\n\n"
   + "●本文\n"
 + message +"\n\n"
 + "----------------------------------------------------\n"
 + "本メールは自動返信により送信されています。\n\n"
 + "ー・ーー・ー・ーー・ー・ーー・ー・ーー・ー\n"
 + "JAB'S DESIGN\n"
 + "”JAB”　Urano\n"
 + "ー・ーー・ー・ーー・ー・ーー・ー・ーー・ー\n";
 
GmailApp.sendEmail(email, title, body);
GmailApp.sendEmail(myMail, title, body);
}