Google フォームを使って、ホームページにアンケートフォームをつける方法を解説します。アンケートフォームを設置することでお客様の意向を確認することができます。アンケートの内容によって、ホームページの改良や自社商品の改良に役立てることができます。様々なカスタマイズができカラーや画像のアップロードもできます。そして回答データをグラフで確認できます。便利ですね。
Googleドライブのサービスなので15GBまでは無料です。
無料で利用できるのが嬉しい限りです。
実際に当サイト内にも設置しました。実例をご覧いただければイメージがつかめると思います。
このような「アンケートフォーム」を作れます。
ついでに、アンケートにお答えいただけたら嬉しいです♪
公式サイトはこちら、Googleフォーム
その他のフォーム作成サービスもいろいろあります。無料から使えてとても高機能です。下のリンク先ページにまとめてありますので、興味のある方は併せてご覧ください。
フォーム作成ツール・サービス
では、使い方を解説していきます。
Googleアンケートフォームの使い方
事前にグーグルのアカウントが必要になりますので、登録した上での説明になります。
まず、アクセスするとこのような画面が現れます。右下の赤丸のボタンを押すと新しいフォームを作れます。
上の矢印がフォームのタイトルになります。クリックすることで編集可能になります。あとはその繰り返しで文章を入力していきます。
次に、画像の矢印の場所をクリックすると、入力フォームの種類を選択します。選択ボタンはラジオボタン・チェックボックス・プルダウンから選べます。ラジオボタンは１つだけ選択を許可するボタンです。チェックボックスは複数の選択ができます。プルダウンは隠れていてクリックすると選択肢が表示されます。
基本はボタンがラジオボタンがいいと思いますが、任意のテキストで回答してもらいたい場合は「記述式」を選べばいいです。
プレビューで確認してみよう
途中でどんな感じで表示されるか確認するには、右上の「プレビュー」で確認できます。
右にたのメニューで入力したボックス自体を「削除」「コピー」が可能です。また、入力を必須にするか任意にするかを決めることができます。デフォルトで必須になっているのチェックを外すと任意に変わります。
画像の挿入もできます。
画像の挿入もできるので、必要に応じて使いましょう。ただし、サイズ変更はご自分で行います。大きい画像だとスペースを取り過ぎてしまうので、飾り程度の画像であれば150pxくらいがいいと思います。右揃え・中央揃え・左揃えを選択できます。
カラーパレットでフォーム全体の色を変更できます。全15色にテーマも選択することができます。カラーパレットとテーマは同時に設定できません。
テーマも選んでみましょう。上の画面の右下のマークをクリックすると表示されます。かなりたくさんのイラストや写真があります。アンケートフォームがおしゃれになって回答してくれる人が増えるかもしれませんね。
設定全般
右上のメニューの歯車のマークをクリックすると下の画像が出てきます。
ここで様々な設定ができます。分かりやすく表にしておきましょう。
| 全般 | メールアドレスを収集するかどうか |
|---|---|
| ログインが必要かどうか | |
| 回答者が行える操作 | |
| 設定プレゼンテーション | |
| プレゼンテーション | 進行状況バーを表示 |
| 質問の順序を並べ替える | |
| 別の回答を送るためのリンクを表示 | |
| テスト | テストをするためのチェックボックスをつけて公開前のテストを行います。 |
ホームページにGoogleフォームを埋め込む
まず右上のメニューの「送信ボタン」に関連の項目が入っています。ホームページに埋め込むだけでなく「メールで送信」「リンクのURL」が選べます。
ホームページに埋め込むには「HTMLを埋め込む」を選択します。iframeのタグが出力されるのでコピペしましょう。高さと幅のサイズも変更できます。
実際に埋め込むとこのようにホームページ内に表示されます。
アンケート結果をグラフで確認する
アンケートに答えてくれた結果をビジュアルグラフで確認することができます。場所は「質問」作成の横にある「回答」ボタンを選択すると表示されます。
CSSでレスポンシブWebデザイン向けに調整する
レスポンシブWebデザインのサイトの方も多いでしょう。iframeをそのまま貼り付けるとスマホではみ出してしまうことがあります。そこで、サイズ調整のスタイルシートも掲載しておきます。
HTMLコード。class名は好きなように指定してください。
CSSコード。
.iframe-wrap {
position: relative;
width: 100%;
height: 0;
padding-top: 120%;
margin-left: auto;
margin-right: auto;
}
.iframe-wrap iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
ポイント
重要になるのはpadding-top:120%のところです。数字を大きくすると縦長の比率になり、逆に小さくすると縦が縮みます。
スマホの場合padding-topが比率が小さいと、下のコンテンツにかぶさって表示されることがあります。（右の画像を参照ください）
ですので、メディアクエリに合わせて細かな調整をする必要があります。
/*スマートフォン*/
.iframe-wrap {
position: relative;
width: 100%;
height: 0;
padding-top: 300%;
margin-left: auto;
margin-right: auto;
}
@media (min-width:769px) {
.iframe-wrap {
padding-top: 150%;
}
}
/*PC*/
@media (min-width:980px) {
.iframe-wrap {
padding-top: 120%;
}
}
上の例ではwidth:100%にしていますが、width:85%にしてmargin-left:auto;とmargin-right:autoで中央配置にすることもできます。
上記の方法は一部のスマートフォンで正常に表示されないことがありますので、ご注意ください。
いかがでしたか、アンケートフォームを実装するのはとても大変ですが、Googleフォームを使えば時間を短縮できるのでおすすめです。さらにグラフに集計までしてくれるでこれは重宝しそうなサービスですね。
数秒で終わりますので、アンケートにお答えいただけたら嬉しいです♪
「アンケートフォーム」
