ブログ

Googleフォームの自動返信機能を追加する(前編)

Google-auto-mail-return-8

こんにちは、フロントエンドエンジニアのかみーゆです。

書き初めしたり、カレー食べたりしてばかりだと思われるとなんなので、たまにはエンジニアらしいことを書いてみようと思います。
最近、Googleフォームの自動返信を実装したので、その方法を二回に分けてご紹介します。

今回はその前編です。

使うのはGoogleフォーム、その結果を集計するスプレッドーシート、Google Apps Scriptです。

Google Apps Scriptってなんぞ?

Google Apps Script(通称GAS)は、Googleが提供するサービス上でさらにクラウドでスクリプトを実行することで操作できるサービスです。スクリプトの言語は、JavaScriptをベースです。サーバーサイドで実行されます。
ただしJavaScriptをベースにしていますがJavaScriptの全ての組み込み関数を使えるわけではないので注意が必要です。

Googleフォームを作る

GoogleフォームはGoogleアカウントがあれば誰でも使えるサービスです。
サインインして、Googleフォームを新規で作成します。

google_form01

右上設定(歯車マーク)を開きます。
メールアドレスを収集するにチェックし、メールアドレス登録を必須項目にします。

こうすると、バリデートも勝手にしてくれるので楽チンです。
そのほかの設定も適宜すれば完了です。

ユーザーを限定するなどの不要な項目のチェックは外しておくと良いですよ。

google_form02

そのあと、お問い合わせ項目を追加していきます。

フォームタイトル、詳細なども変更したい部分をクリックして編集できます。

ラジオボタンやチェックボックスなども追加できます。
今回はわかりやすく今回は「お名前」と入力できる項目を追加してみました。

google_form03

フォーム回答終了後のメッセージはデフォルトでは「回答を記録しました」です。
こちらも右上設定(歯車マーク)からこうできます。
ポップアップが開いたらプレゼンテーションを選んで「確認メッセージ」を変更します。

google_form04

これでフォームの準備はできましたね。
右上送信からフォームページのリンクやiframeの埋め込みタグなどを取得できます。

デザインのカスタマイズなどは割愛します。右上パレットマークをクリックして色々試してみてください。

集計するためのGoogleスプレッドシートを作成

GoogleスプレッドシートはWeb上で使えるエクセルのようなものです。
今回作るGoogleスプレッドシートはGoogleフォームから回答の送信があるたびに連動して自動更新されます。

この集計用のGoogleスプレッドシートも簡単に作れます。

回答の右上スプレッドシートマークをクリック。
Googleスプレッドシート名を適当につけます。

google_form09

ここまでは楽勝でしたね!
次回はGoogleフォームの自動返信機能を追加する(後編)でスプレッドシートの細かい設定やGoogle Apps Scriptについてご紹介します!!

 

■この記事を書いた人 かみーゆ(フロントエンドエンジニア)

CMS concrete5の認定エバンジェリスト。コーディングからプログラミングまでフロント周りを中心にお仕事してます。広島支社でフロントエンドからサーバエンドまで幅広く触れるリベロなエンジニアを目指してます。お得意のconcrete5や技術的なTipsの記事を主にUPしてます。好きなものは肉とビール。

関連記事

  1. hpseisaku ホームページ制作を依頼する時のポイント
  2. news_study コーディングで大事なこと5点
  3. news_study 第93回「WEB TOUCH MEETING」に行ってきました。…
  4. hamburger そのサイト、スマホの使い勝手どうでしょう?〜メニューボタン編〜
  5. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など 【初心者OK】IllustratorCCで漫画風吹き出しの作り方…
  6. ball-animation-Ver.2 GIFアニメで「ボヨヨン」の動きを作る
  7. blog_panda_penguin ユーモアのあるサムネイル画像をデザインするための発想法
  8. shortcut_repeat-copy2 IllustratorのショートカットコンボをPhotoshop…

最近の記事

  1. carp9
  2. carp8
  3. carp7
  4. Hirofuro-logo-8
  5. Hirofuro-logo-8
PAGE TOP