Googleフォームをサイトに埋め込む場合の手順

Publish2014/04/08(火)

昨日のGoogleカレンダーに引き続き、これまたよくある「Googleフォームをサイトに埋め込む手順」を説明します。
まず、Googleフォームを利用するメリットですが、大きく分けると以下の3つが考えられます。

Googleフォームをサイトに埋め込むメリット

  1. プログラムが動かないサーバーでも設置できる
  2. プログラムの知識がなくてもサイトにフォームを設置できる
  3. フォームの回答をGoogleスプレッドシートに蓄積できるので、あとで一覧で確認出来る

メリットは結構大きいので、活用される場合も多いです。
では実際にご自身で設置する手順を紹介します。

Googleフォームをサイトに埋め込む場合の手順

具体的には、以下の4つの手順を踏むことで利用いただけます。
Googleカレンダー同様に、埋め込み後はサイトを変更する必要はなく、Googleフォームを変更する事でサイトも自動的に変更されます。

Googleフォームを作成する

まずはフォーム自体の作成です。
GoogleDriveにアクセスし、「作成」から「フォーム」を選択します。
GoogleDriveからフォームを選択する

すると、以下のように題名とテーマを選択する画面が表示されます。
サイトに埋め込んで使用する場合は、特に気にする必要もないので「デフォルト」のままで大丈夫です。
題名のみを入力し、OKをクリックして作成しましょう。

題名とテーマを決める

作成されると、以下のような画面に遷移します。

フォームが出来る

このままでは使用できませんので、質問内容を変更します。

項目を変更する

質問形式はたくさん選べますので、フォームに設定したい項目を選択して変更します。

質問の形式は色々選べる

質問を追加する場合は、下部にある「アイテムを追加」から質問項目を追加できます。
この場合は、最初から質問形式を選択する形です。

新規アイテムを追加する

あとは、順次質問項目を設定していきましょう。
フォームの項目は自動保存されていきますので、作業も特に何も考えずに進めていっても大丈夫なようにはなっています。

ページに埋め込むためのタグを生成する

次に、ページに埋め込むためのタグを生成します。
タグの生成方法は2種類あります。
一つは「フォームを送信」をクリックして「埋め込む」ボタンを選択する場合です。

フォームを送信

もう一つが「ファイル」メニューから「埋め込む」を選択する場合です。
どちらでも結果は同じ画面なので、好きな方を選んで対応してください。

埋め込む

いずれかを選択後は、フォームの埋め込みタグが表示されます。
あとは、サイズを変更してタグを該当箇所に貼り付ければ完了です。

埋め込みコード

フォームの回答先を作成する

フォーム完成後は、回答を蓄積しておくGoogleスプレッドシートを作成する手順に入ります。
まずは画面上部の「回答先を選択する」を選びます。

回答先を選択する

すると、新規で回答先を作成するか既存のスプレッドシートに保存するかを選択できます。
既存のものにする理由も特にないので、新しく作った方がいいかと個人的には思いますが、どちらでも好きな方でかまいません。

フォームの回答先を作成する

作成すると、GoogleDrive上にスプレッドシートが追加されたことを確認出来ます。

フォームの回答が追加される

送信テストを行い確認する

上記の手順で問題なく埋め込み、回答後のログの保存が完了していますが、念のために最後には送信チェックを行いましょう。
今回は、Googleが用意しているライブフォームの画面で説明しますが、サイトに埋め込んだ状態でのテストでもかまいません。
フォームが表示されたあとは、回答を行い送信します。

ライブフォームで動作確認

問題がなければ、回答が完了したことが分かるようにアラートで画面が表示されます。

送信完了

作成したスプレッドシートを確認し、送信した内容がきちんと反映されて入れば送信テストは完了です。

データはスプレッドシートに蓄積される

この様な感じで、かなり簡易的にフォームをサイト上に作成することが可能です。
手軽にはじめてみたい場合や、管理をGoogleで一括で行いたい場合などは非常に便利です。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、サポートやWebサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を平日毎日更新中。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
また、不定期で大阪を中心にWeb運用やブログなどをテーマにしたイベント「ふにセミWS」を開催しています。
サイトの運用や活用にお困りの方はお気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ふにすWeb相談所

ソーシャルとか。

NewEntry

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month