（ちょっとメモ）Googleフォームで簡単・無料でフォームが作れる！

Googleフォームは、気軽に無料でフォームが作れるサービスです。
専門知識（HTML、CSS、CGI、PHPとか）がまったく無くても簡単に作れます。
パーティの招待状、アンケートなどの「テンプレート」も用意されています。

フォームは Googleのサーバに置かれるので、自分のサーバのパーミッションとか面倒な設定は一切なし。
フォームを公開する方法も、メールやHTML埋め込みなど複数用意されています。
回答の集計も簡単にできるので、イベントの幹事になったらコレを使うと便利。

今回は基本の使い方をメモっておきます。

本日のINDEX

1. Googleフォームで新規フォームを開くには
   1. Googleドライブからも新規フォームを開けます
2. Googleフォームの操作アイコン
3. お問い合わせフォームを作ってみた
   1. メールアドレスの収集
   2. 質問の「説明」や「回答の検証」も指定できる
   3. 順番の入れ替えはドラッグ＆ドロップ
   4. プレビューで確認
4. Googleフォームの公開方法は3つ
   1. メールで送信
   2. URLを取得
   3. HTMLに埋め込む
   4. HTMLに埋め込んだ例（背景は透明）
5. Googleフォームの回答を見る
   1. 概要（グラフにしてくれて便利）
   2. 質問別（質問ごとに回答を知りたいとき）
   3. 個別（回答者ごとに見たいとき）
   4. 回答があったことをメールで受け取れます
6. 回答をスプレッドシートにまとめる
7. そのほか知っておいたほうがいい設定
   1. スパム防止で「画像選択」を表示（reCAPTCHA）
   2. 回答者へのメッセージを変更する

Googleフォームで新規フォームを開くには

Googleフォームの概要はこちら。（クリックで別ウインドウで開きます）

パーソナルが無料サービスです。その「Googleフォームを使ってみる」をタップすると Googleアカウントを持っていればログイン画面になります。
（アカウントが無い人は、新規にアカウントを作る画面になります）

Googleアカウントでログインすると、自分の Googleフォームのホーム画面になります。

「新しいフォームを作成」で、テンプレート無し・テンプレート有りで新規フォームを開くことができます。
「テンプレートギャラリー」から他のテンプレートを選ぶこともできます。

今回はテンプレート無しで新規フォームを開きました。
このように↓「無題のフォーム」が現れます。これを編集していきます。

Googleドライブからも新規フォームを開けます

Googleのサービスを使って作った マップやフォームは Googleドライブに収納されるのですが、この Googleドライブから新規フォームを開くこともできます。

Googleドライブは、オンライン ストレージサービスです。
ファイルをパソコンやスマホで共有できて、15GBも無料で使えるって太っ腹。

自分の Googleドライブにログインし、ホーム画面の「＋新規」ボタンを押します。

続いて、その他＞Googleフォーム で新規フォームが開けます。

Googleフォームの操作アイコン

実際にいじっていけば、なんとなく使い方はわかっちゃうんですが、ざっと操作アイコンについてメモっておきます。

まずは画面上部にあるアイコンです。

テーマをカスタマイズ（テーマオプション）
ヘッダー画像の設定、カラーの変更、フォントスタイルの変更できます。
（残念ながら、オリジナルデザインに変更することは不可能ですが）

プレビュー
フォームのプレビューを見ることができます。

設定
フォームのさまざまな機能を設定できます。
回答者のメアドをゲット、回答者ができる操作を指定、質問の順序をシャッフル、フォームをテストやクイズにして採点したりできるようにします。

送信
フォームを公開するための送信方法が3つ用意されています。
メールで送る、フォームのURL、HTMLに埋め込むためのコードがゲットできます。

その他の設定
元に戻す、コピーを作る、共同編集者を追加など、フォーム作成時の操作ができます。

このアイコンは、デバイスの表示幅が狭いときは、下図の右側のようになります。
一番左がテーマをカスタマイズ、その横の紙飛行機が送信です。
「プレビュー」や「設定」は右端のその他の設定（3点アイコン）の中に格納されます。

次は右側にあるアイコンです。

質問を追加
フォームの質問を新規に作ります。今作った箇所の真下にできます。
このアイコンを押して次々と質問を作っていく作業になります。

質問をインポート
前に作ったフォームなどから質問をコピペできます。

タイトルと説明を追加
フォームの質問の途中にサブタイトル（とその説明）を入れたいときに使います。
選択中のアイテムの真下に新しいサブタイトルが挿入されます。説明は省略可能です。

画像を追加
フォーム内に画像を貼れます。

動画を追加
フォーム内に動画を貼れます。

セクションを追加
フォームを複数のセクションに分けられます。
選択中のアイテムの真下から新しいセクションになります。
ユーザーの操作では、最初のセクションの下にできる「次へ」ボタンでページを移動して次のセクションの質問に答える形になります。ページ遷移は任意に変更できます。

これらのアイコンは、横幅が狭いデバイスだと画面下部に横並びになります。

お問い合わせフォームを作ってみた

「お問い合わせフォーム」を作ってウェブサイトに埋め込んでみました。
制作の過程をメモっておきます。

まずは「新規フォーム」のタイトルを「お問い合わせフォーム」としました。
すぐ下の「フォームの説明」は不要なら空欄でOK。

で、フォームの「質問」を設定していきます。
新規フォームは最初は「質問」が1つだけある状態になっています。

この「無題の質問」となっているタイトルを、好きな文言に書き換えます。
ここで「メールアドレス」と入力したら、右横に「ラジオボタン」と表示されていたものが「記述式」に自動で変更されました。

質問のタイトルによってフォーム形式がある程度は自動で設定されるみたいです。
もちろん自分の好みのものに変更できます。

メールアドレスの収集

質問を「メールアドレス」とした場合、メールアドレスの収集設定を有効にするをオンにすると、回答者のメールアドレスを収集できます。
お問い合わせフォームなど、相手に返信する必要がある場合はこれをオンにします。

「設定」＞「全般」で、メールアドレス収集の設定の変更が可能です。
ここで「回答のコピーを送信」することができます。

アンケートなどでは不要ですが、お問い合わせフォームでは、回答者に控えが送信されるほうがいいですね。

ただし「回答のコピーを送信」にすることで、reCAPTCHAが有効になるそうです。
reCAPTCHAについては記事後半の→スパム防止で「画像選択」を表示（reCAPTCHA）をご覧ください。

質問の「説明」や「回答の検証」も指定できる

操作アイコンの「＋」を押せば、新しい項目を増やせます。
今編集中の項目の真下に新しい項目ができます。

必須アイコンの隣りにある「3点マーク」で、説明（回答してもらう際の説明文）や回答の検証を追加できます。
「回答の検証」は正しい記述かどうか検証すること。ここでは「正規表記」を追加してみました。

「正規表記」についてはこちらをご覧ください。
[49-1] input要素の属性一覧・ type属性の値一覧 ＞ おまけ：正規表記のサンプル

順番の入れ替えはドラッグ＆ドロップ

各項目の上にマウスオーバーすると、ハンドルアイコンが表示されます。
このあたりをドラッグ＆ドロップすれば、各項目の順序を入れ替えることができます。

プレビューで確認

「目のアイコン（図説はこちら）」でプレビューが見れます。
今回作ったフォームはこんな感じ。このあと公開方法を設定していきます。

Googleフォームの公開方法は3つ

出来上がったフォームは Googleのサーバ上に置かれます。
で、そのフォームを他の人に見せて回答してもらうための方法は、
・メールで送信
・URLを取得（SNSで公開するためのURLをゲット）
・HTMLコードを取得（<iframe>要素のコードが書き出されます）
の3つがあります。

指定するには、画面上部の「送信」アイコンを押します。

メールで送信

「送信」アイコンを押して開いたダイアログの最初は「メール」で送信する画面です。
メアドは「,（カンマ）」で区切って複数指定できます。
（CCでなく他人のメアドが見えない（自分だけに送られたように見える）設定になっていました）

「フォームをメールに含める」をチェックすると、本文にフォームが表示されます。
これをチェックしなければ、メールに「フォームに記入する」ボタンが付いて、ブラウザでフォームが開くようになります。

一番下の「共同編集者を追加」をクリックすると、フォームの回答を閲覧・削除できるユーザーを指定できます。
回答の集計を、他の人にやってもらいたいとき便利ですね。

URLを取得

すぐ隣のチェーンのようなアイコンは「リンク」です。
フォームのURLが表示されてるので、これをコピペして使います。
けっこう長いURLなので、SNSでお知らせするときは「URLを短縮」をチェックしたほうが良さそう。

HTMLに埋め込む

最後の「HTMLを埋め込む」では、 <iframe>要素が出ていますのでコレを自分のサイトにコピペします。

サイズ（幅・高さ）は <iframe>要素の width属性・height属性で指定されるので、後でHTML上でこれは取っちゃって、CSSの width・heightプロパティで指定したほうが良いと思います。（すぐ下の項でCSSのサンプルを書いてます↓）

HTMLに埋め込んだ例（背景は透明）

<iframe>要素を実際にHTMLに埋め込んでみました。
背景は、プレビューのときに見た背景色ではなく「透明」でした。こりゃいいわ。

Googleフォームから書き出された <iframe>には、サイズ（幅と高さ）が width属性・height属性で指定されています。
そのまま使うと、いろんなサイズのデバイスで表示するときに支障があるので、CSSで指定し直したほうがいいです。

下の例では、<iframe>の width属性・height属性を削除して、style属性で「width:100%; height:50vh」を加えています（2行目）
幅は表示領域いっぱいにし、高さは表示領域の50％という指定です。スマホなどの小さい画面でもはみ出さずに見えるようにしました。

<iframe src="https://docs.google.com/forms/exform" frameborder="0" marginheight="0" marginwidth="0"
 style="width:100%; height:50vh">読み込んでいます…</iframe>

CSSに関しては以下をご参考に（クリックで別ウィンドウで開きます）
【16-1】幅の width、高さの heightプロパティ
【7-1】CSSのサイズの単位について（em, %, px, rem の使い分け）
【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について

Googleフォームの回答を見る

今までフォームを作っていたのは上部の「質問」タブ内でした。
その隣りにある「回答」タブで、回答を見ることができます。

回答は「概要・質問別・個別」に見ることができます。
（回答0のときは当然ですが何も表示されません）

概要（グラフにしてくれて便利）

「回答」タブで最初に表示されるのが「概要」です。
これは、「ラジオボタン」や「チェックボックス」などでの回答をグラフ化してくれるのが画期的。アンケートにはとても便利。このままプレゼンに使える。

「記述式」の回答では、結果は単にリストになって並びます。

質問別（質問ごとに回答を知りたいとき）

真ん中の「質問」では、「質問ごと」の回答を見ることができます。
質問のタイトルをプルダウンメニューで選んで、回答を表示させます。

個別（回答者ごとに見たいとき）

「個別」では、「回答者ごと」に見ることができます。
プルダウンメニューで回答者を特定し、その人のフォームシート全体を見ます。
「お問い合わせフォーム」とかならこの方法で見るのが順当。

回答があったことをメールで受け取れます

回答は Googleフォームにログインして見るわけですが、何度も回答が来ているかどうか確認するのも面倒です。
そんなときは回答があるたびに自分にメール通知が来るように設定できます。

「回答」タブ内の「3点アイコン」で「新しい回答についてのメール通知を受け取る」をチェックしておけばOK。

Googleアカウントに紐づけているメールアドレスに「新しい回答が有りました」とメールが来ます。
そこにあるリンクから Googleフォームに移動し、新しい回答を見れます。
（あくまでも回答内容を見るのは Googleフォーム上です。メールフォームではないので）

お問い合わせフォームなどでは非常に便利です。
ですが、アンケートだと大量にメールが来て厄介なのでやめといたほうがいいかもね。

回答をスプレッドシートにまとめる

ここでのスプレッドシートとは、Googleが提供しているオンライン表計算サービス。エクセルのオンライン版みたいなかんじです。
フォームの回答を集計・保存したいときに便利です。

「回答」タブ内の「3点アイコン」で、「回答先を選択」を選ぶと、回答をまとめるスプレッドシートに出力することができます。

新しいスプレッドシートを作るか、既存のものに書き込むか選んで、「作成」を押せばOK。

質問が列に、回答は行にまとめられて一覧できます。

このスプレッドシートは、前述の Googleドライブに保存されます。

このほか、「回答」タブの「3点アイコン」内で、フォームの回答をCSV形式で出力したり、プリントしたりもできます。

そのほか知っておいたほうがいい設定

Googleフォームの使い方であといくつかメモっておきます。

スパム防止で「画像選択」を表示（reCAPTCHA）

フォームで送信する時、画像を見て何かしら入力する「画像認証」などを reCAPTCHA（リキャプチャ）と呼びます。

Bot（ボット=ネット上で仕事するソフトウエア）でなく、人間が操作していることを証明するために reCAPTCHAが使われます。

GoogleフォームのreCAPTCHAは「○○の画像をすべて選択してください」という形式。こんなかんじのが出ます↓

＊これは必ず出るわけでなく、1度認証されたデバイスには出ないようです。

Googleフォームでは、メールアドレスの収集をするとき「回答のコピーを送信」をチェックするとオンになります。
お問い合わせフォームなどは、スパム防止のためにオンにしたほうが良いと思う。

ただ、あのGoogle の reCAPTCHAって画像がわかりにくくて、なかなか送信できないことあるよね。せっかく問い合わせようと思った人が途中であきらめないか心配です（笑）

でも、スパム撃退には効果ありましたよ。自分で作ったお問い合わせフォームにスパムが1日平均10通ほど来てたんですが、Googleフォームに換えたら、ここ1ヶ月まったく来てません。

回答者へのメッセージを変更する

フォームを送信してくれると、送信後の画面に
「回答を記録しました。」
って味気ないメッセージが表示されるのがデフォルトです。

これを変更できます。
設定（歯車アイコン）＞プレゼンテーションの「確認メッセージ」で編集して最後に「保存」を押します。

フォームを書いてもらう相手に合わせて変えたほうが良いですね。