STUDIOに自動返信メールを設定してフォームをもっと使いやすくしてみよう
STUDIOで作成したフォームにお問い合わせが届いたあと、
「データを一覧で管理したい」「自動返信メールを送りたい」と思ったことはありませんか？
実は、GoogleスプレッドシートとZapierを組み合わせることで、
フォーム送信→自動返信メールの受信という流れを、ノーコードで実現することができます。
この記事では、その仕組み・方法を解説していきます。
「初めてZapierを触る方」でも再現できる内容になっていますので、ぜひ一緒に設定していきましょう。
それぞれのツールの説明
・STUDIO：HTMLやCSSの知識がなくても、ブラウザ上でWebサイトをデザイン、構築、公開、運用まで一貫して行えます。
・Googleスプレッドシート：Googleが提供する無料で使えるクラウド型の表計算ソフト
・Zappier：プログラミング知識がなくても、直感的な操作でさまざまなツールと自動化を設定できます。
Googleスプレッドシートと連携させる
フォームで届いた情報をデータとしてまとめるために、まずは「Googleスプレッドシート」を連携させる必要があります。
連携方法
プロジェクトのダッシュボードの「フォーム」から設定を選択します。
すると、真ん中の方に「外部連携」というのが出てくるので、そちらをクリックします。
そのままアカウントを設定して進めると、、、、
STUDIOのプロジェクト名がそのままファイル名になったスプレッドシートが自動的に作成されます。
フォームの項目を当てはめる
しかし、このままではフォームの送信されたデータをまとめることができません。
次はこのシートの「どこにどんなデータが入るか」を指定していく必要があります。
ダッシュボードやプレビューを見ながら各項目名を調べて、シートの各列に当てはめていくことで
「どこにどんなデータが入るか」という指定をすることができます。
当てはめた状態で、STUDIOに戻って試しにテスト送信を行ってみましょう。
バッチリです。これでデータをまとめるための土台が完成しました。
ZapierとGoogleスプレッドシートを連携させる
ここからが本番で、やや難易度が上がっていきます。
今度は先ほど作成したスプレッドシートを「Zapier」というツールと連携させる作業を行います。
Zapier（ザピアー）は、SlackやGmail、スプレッドシートなどの5,000種類以上のWebサービスやアプリと連携させて業務を自動化できるツールです。
Googleアカウントでログインすることで、制限付きですが、誰でも無料で使うことができます。
ダッシュボードの画面はこのようになっております。
様々な機能を試したいところですが、早速スプレッドシートと連携させていきましょう！
まずは、左上の「＋ Create」をクリックし、その中からZapsを選択します。
編集画面に入ることができました。では次に、「Trigger」と「Action」を順番に設定していきます。
Triggerの設定
ここでは、メールが送られる条件を設定します。
今回は、「スプレッドシートにデータが追加された時」を条件として当てはめていきたいので、❶のツール選択画面では、「Googleスプレッドシート」を選択します。
次に右側の画面でセットアップを行います。
❷のTrigger eventを「New Spreadsheet Row」、❸のAccountを先ほどスプレッドシートとSTUDIOを連携させた時のアカウントを選択します。これで、「スプレッドシートに新たに行が1つ追加された」という条件でActionが発動するようになります。
終わったら下の「Continue」をクリックしましょう。
そして、どのシートなのかを指定しなければいけませんので、Spreadsheetでファイル名を、WorkSheetでシート名を参照します。
「Continue」→ 「Test trigger」をクリックして特に問題がなければ、Triggerの設定は完了です。
Actionの設定
ここでは、先ほどの条件が当てはまった際に何をするのかを設定します。
今回はフォームを送った人にメールを送りたいので、そうなるように設定をしていきます。
❶のツールは、自動返信メールの送信者が普段使用しているメール(Gmail、Outlook等)を選択すると良いでしょう。
今回はOutLookで行っていきます。
次に、Triggerの時と同様に、セットアップを行います。
❷のAction eventを「Send Email」、❸のAccountを自動返信メールの送信者のアカウントに設定します。
そして、誰にどういった内容のメールを送るかの設定を行います。
今回は必須項目のみ埋めていきます。
❶のTo Email(s)で誰宛に送るかを指定することができますが、誰に送るかなんて送った人によって変わってしまうので、固定化することはできません。なので、スプレッドシートに追加された行の中からメールアドレスのデータだけ取得して、そこに送信するようにしていきます。
右側の「＋」マークをクリックし、そこから「Email」を選択します。
これで、フォーム送信者のメールアドレスを取得し、自動で返信メールを送信するという指示を出すことができました！
❷のSubjectでメールの件名を入力します。
そして❸のBody Format、Bodyを埋めていきます。
Body Formatを「Text」を選択し(Gmailを選んだ方は「Plain」)、Bodyでメールの本文を入力していきます。
自動返信メールでは、フォーム送信者が入力した項目が確認として表示されるケースが基本なので、今回の本文もそれに倣って作成していきます。
冒頭に手動で挨拶文を入力し、確認表示は先ほどの「To Email(s)」と同じ要領で各項目を当てはめていきます。
テストをクリックすると、自動返信メールが正しく送信されているかを確かめることができます。
問題なく表示されていれば、Actionの設定は完了です。
すべての設定が終わって「Publish」をクリックして反映完了です。
では、試しにSTUDIOでフォームを送信してみましょう！
無事に自動返信メールが送信されるようになりました！これで完璧です！
まとめ
今回は、
STUDIOのフォームを起点に、GoogleスプレッドシートとZapierを連携させて自動返信メールを送る方法を解説しました。
ポイントは以下の3つです。
- STUDIOとGoogleスプレッドシートを連携し、フォーム情報を正しく保存できる状態を作る
- Zapierで「スプレッドシートに行が追加されたら」というTriggerを設定する
- Actionでメール送信を設定し、フォーム送信者へ自動で返信する
一度設定してしまえば、手動対応は一切不要になり、
お問い合わせ対応の抜け漏れ防止や業務効率化につながります。
STUDIOはシンプルなUIながら、外部ツールと組み合わせることでできることが大きく広がります。
ぜひ今回の手順をベースに、Slack通知やCRM連携など、さらなる自動化にもチャレンジしてみてください。
株式会社アルタではWeb制作関連の様々なサービスを提供しております
「インパクトのあるWebサイトを作りたい！」など、デザイン関連についてのお悩みをお聞かせください！
株式会社アルタへのお問い合わせはこちらからどうぞ！