初心者でも簡単に自分のブログやWEBサイトにお問合せフォームを設置することができます。
通常、お問合せフォームを作るには、HTML/CSSやPHPといったプログラミング言語の知識が必要になります。また、個人情報を取り扱うケースもあるため、初心者のうちはかなり敷居が高いです。
しかし、Googleフォームでを利用することでGoogleアカウント１つでお問合せフォームを作成できます。
STEP1：Googleのアカウントを作成
まずはグーグルのアカウントを作成しましょう。
https://support.google.com/accounts/answer/27441?hl=ja
すでにアカウントをお持ちの方はSTEP2へ進みましょう。
STEP2：Googleフォームを作成
Googleフォームを作成していきます。
本ステップではSTEP１で作ったGoogleアカウントをもとに、新規グーグルフォームの作成を行います。
https://www.google.com/intl/ja_jp/forms/about/
Googleアカウントにログインした状態で、上記にアクセスし新規フォームを立ち上げます。
Googleが用意したテンプレートも複数あります。
内容がマッチしそうなものがあればそのまま利用するのもいいでしょう。
今回はオリジナルのフォームを作成するために、空白をクリックします。
新規のフォームが完成しました。
STEP3：組み合わせ自由自在、Googleフォームの基本設定
まずは、フォームのタイトルと概要を入力してください。
次に、質問項目の設定をします。
質問項目は1つのボックスに１つ設定します。
入力項目の説明をします。
①「入力タイプ」を選択します
選択例：記述式
※よく使う「入力タイプ」は、記述式、段落、ラジオボタン、チェックボックス、プルダウンとなります。
説明は下図「入力サンプル」を参考にしてください。
②質問のタイトルを入力します
入力例：お名前
③必須項目かどうかを選択します
設定例：必須
※ONにすると、回答者は必ずこの項目を入力しないと回答を完了することができなくなります。
これで１つめの質問項目が完成しました。
④設定した項目を削除・コピーすることができます。
⑤新しい質問項目のボックスを増やすことができます。
必要な質問項目を増やしながらオリジナルのフォームを完成させましょう。
①で記載した「入力サンプル」です。
「入力タイプ」の解説を記載しているので、選択に迷ったときは参考にしてください。
極力不要な項目を避け、入力者が入力しやすいフォームを作ることを心がけましょう。
STEP4：運用を助ける、Googleフォームの便利な設定
お問合せフォームを運用をするうえで、最低限以下の３つを設定しておきましょう。
・お問い合わせがあった際に、メール通知が来る設定
・回答内容をスプレッドシートにためる設定
・フォームのテーマカラーを設定
説明していきます。
お問い合わせがあった際に、メール通知が来る設定
作成したフォームに回答があった際に通知が来るように設定をします。
① 回答タブをクリックします
② メニューをクリックします
新しい回答についてのメール通知を受け取るにチェックを入れてください。
チェックを入れると、作成したGoogleフォームに回答があるたびに、Googleメールにお知らせ通知が届くようになります。
回答内容をスプレッドシートにためる設定
Googleスプレッドシート内に回答のデータをためる設定を行います。
スプレッドシートにデータをためることで、万が一フォームを消してしまった時のデータバックアップや、回答データの2次利用がしやすくなります。
① 回答タブをクリックします
③ アイコンをクリックします
下記の画面が開くので、右上の作成ボタンをクリックしてください。
設定が完了すると、スプレッドシートが自動で作成されます。
以降、回答データが作成されたスプレッドシートの中にもたまっていきます。
個人データを扱う場合は、スプレッドシートの公開領域に注意しましょう。
※初期設定では非公開になっているので設定を変更しなければ気にしなくて大丈夫です。
フォームのテーマカラーを設定
ボタン一つで以下の項目を設定できます。
・ヘッダー画像
・テーマ色
・背景色
・フォント設定
埋め込み先のサイトに合わせて調整しましょう。
STEP5：Googleフォームをサイトへ埋め込む
作成したGoogleフォームをサイトへ埋め込みます。
送信ボタンをクリックします。
一番右の＜＞をクリックします。出てきたコードをコピーします。
コピーしたコードを、サイト内の表示したい部分にペーストします。
吐き出されたコードは２つ調整を行ってください。
１：フォーム全体についてしまう外枠を削除。
以下のコードを height=”数字” の後に追加してください。
style="border: none;"２：表示幅を横幅MAXで表示されるように調整。
width=”数字” の数字を100％に変更してください。
width="100%"設定は以上となります。
コードを保存したら、サイト表示を確認してみましょう。
STEP6：送信テスト
最後に・・・、
設置したフォームは、必ず送信のテストをしましょう。
回答内容がきちんと取得できるかはもちろん、実際に入力し、選択肢の過不足がないかも合わせてチェックしましょう。
いかがでしょうか。
すべてクリアできれば完成です。
まとめ Googleフォームの設置6STEP
Googleフォームをサイトに埋め込むまでの6STEPを紹介しました。
Googleが提供しているサービスのため、セキュリティ面もばっちりです。
是非試してみてください。
お疲れ様でした。
おまけ、その他高度な設定
Googleフォームは他にも細かな設定が可能です。
Google Apps Script（GAS）を利用することで、メール通知時にお問い合わせ内容をフォームの回答から取得し表示することや、Googleメール以外のメールアドレスに通知設定を飛ばすことができます。
また、フォームタグのname値を取得することでデザインもある程度自由に変更をすることもできます。HTMLのソースを解析し構築。バリデーション用のJS制御等、かなりの知識が必要となり、難易度はかなり高いです。（ここまでやると通常のフォームを作ったほうが簡単な可能性も・・・。）
どちらも難易度は高いため、本記事では紹介までとします。
