Google formsでアンケートフォームを作ってサイトに埋め込む方法

Googleフォーム
Pocket

Google formsを使って、ホームページにアンケートフォームをつける方法を解説します。アンケートフォームを設置することでお客様の意向を確認することができます。アンケートの内容によって、ホームページの改良や自社商品の改良に役立てることができます。様々なカスタマイズができカラーや画像のアップロードもできます。そして回答データをグラフで確認できます。便利ですね。

Googleドライブのサービスなので15GBまでは無料です。

無料で利用できるのが嬉しい限りです。

実際に当サイト内にも設置しました。実例をご覧いただければイメージがつかめると思います。
このようなアンケートフォームを作れます。

公式サイトはこちら、Googleフォーム

では、使い方を解説していきます。

Googleアンケートフォームの使い方

事前にグーグルのアカウントが必要になりますので、登録した上での説明になります。

まず、アクセスするとこのような画面が現れます。右下の赤丸のボタンを押すと新しいフォームを作れます。

Googleフォーム スタート画面

上の矢印がフォームのタイトルになります。クリックすることで編集可能になります。あとはその繰り返しで文章を入力していきます。

googleフォーム タイトルの編集

次に、画像の矢印の場所をクリックすると、入力フォームの種類を選択します。選択ボタンはラジオボタン・チェックボックス・プルダウンから選べます。ラジオボタンは1つだけ選択を許可するボタンです。チェックボックスは複数の選択ができます。プルダウンは隠れていてクリックすると選択肢が表示されます。

基本はボタンがラジオボタンがいいと思いますが、任意のテキストで回答してもらいたい場合は「記述式」を選べばいいです。

Googleフォーム選択ボックス選択画面

プレビューで確認してみよう

途中でどんな感じで表示されるか確認するには、右上の「プレビュー」で確認できます。

Googleフォームプレビューボタン

右にたのメニューで入力したボックス自体を「削除」「コピー」が可能です。また、入力を必須にするか任意にするかを決めることができます。デフォルトで必須になっているのチェックを外すと任意に変わります。

Googleフォーム削除と複製

画像の挿入もできます。

画像の挿入もできるので、必要に応じて使いましょう。ただし、サイズ変更はご自分で行います。大きい画像だとスペースを取り過ぎてしまうので、飾り程度の画像であれば150pxくらいがいいと思います。右揃え・中央揃え・左揃えを選択できます。

画像のアップロードの方法

カラーパレットでフォーム全体の色を変更できます。全15色にテーマも選択することができます。カラーパレットとテーマは同時に設定できません。

カラーパレット選択画面

テーマも選んでみましょう。上の画面の右下のマークをクリックすると表示されます。かなりたくさんのイラストや写真があります。アンケートフォームがおしゃれになって回答してくれる人が増えるかもしれませんね。

テーマ選択の様子

設定全般

右上のメニューの歯車のマークをクリックすると下の画像が出てきます。

設定

ここで様々な設定ができます。分かりやすく表にしておきましょう。

全般 メールアドレスを収集するかどうか
ログインが必要かどうか
回答者が行える操作
設定プレゼンテーション
プレゼンテーション 進行状況バーを表示
質問の順序を並べ替える
別の回答を送るためのリンクを表示
テスト テストをするためのチェックボックスをつけて公開前のテストを行います。

ホームページにGoogleフォームを埋め込む

まず右上のメニューの「送信ボタン」に関連の項目が入っています。ホームページに埋め込むだけでなく「メールで送信」「リンクのURL」が選べます。

ホームページに埋め込むには「HTMLを埋め込む」を選択します。iframeのタグが出力されるのでコピペしましょう。高さと幅のサイズも変更できます。

GoogleアンケートフォームHTML埋め込み

実際に埋め込むとこのようにホームページ内に表示されます。

ホームページ内に埋め込んだ例

アンケート結果をグラフで確認する

アンケートに答えてくれた結果をビジュアルグラフで確認することができます。場所は「質問」作成の横にある「回答」ボタンを選択すると表示されます。

アンケート集計グラフ

CSSでレスポンシブWebデザイン向けに調整する

レスポンシブWebデザインのサイトの方も多いでしょう。iframeをそのまま貼り付けるとスマホではみ出してしまうことがあります。そこで、サイズ調整のスタイルシートも掲載しておきます。

HTMLコード。class名は好きなように指定してください。

CSSコード。

重要になるのはpadding-top:120%のところです。数字を大きくすると縦長の比率になり、逆に小さくすると縦が縮みます。

width:85%にしてmargin-left:auto;とmargin-right:autoで中央配置にしています。

いかがでしたか、アンケートフォームを実装するのはとても大変ですが、Googleフォームを使えば時間を短縮できるのでおすすめです。さらにグラフに集計までしてくれるでこれは重宝しそうなサービスですね。

カテゴリー ツール

シェア&ブックマークする

Pocket


  • EC
    ネットショップ作成ソフト
  • フリー
    無料ホームページ作成ソフト
  • 人気
    人気ホームページ作成ソフト
  • seo
    SEO対策ホームページ作成ソフト
  • スマホ
    スマートフォンサイト作成ソフト
  • ビジネス
    企業向けホームページ作成ソフト
  • おすすめ
    おすすめホームページ作成ソフト
  • 低価格
    低価格ホームページ作成ソフト
  • 初心者
    初心者ホームページ作成ソフト
  • Webオーサリング
    WEBオーサリングツール