シンプルで可愛いGoogleフォーム「お問い合わせフォーム」を作成する方法

- May 19, 2018

GoogleフォームとGoogle Apps Scriptを使用してお問い合わせページが簡単に作成できます。しかも背景画像、それに微妙に動きます（笑）
可愛い画像が何種類かあり、自由に選べるのでオススメですよ。

以下、作成する方法をご紹介します。

※Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。

フォーム画面の作成

① Googleフォームからフォームを作成を選択すると、下記画面になるので無題のフォームに「お問い合わせ」や「Contact」を入力します。

② その下部に「無題の質問」とあるので、例えば「お名前」や「Name」に変更します。
初期ではラジオボタンになっているので、記述式を選択して下さい。

③ ＋で質問を追加します。

④「Email」や「Comments」を追加したら、必須ボタンをONにしておきましょう。
ちなみに、お問い合わせ内容は記述式ではなく、段落でも良いです。

⑤ 右上のパレットボタンから、色や背景画像を選択します。

カラーの右下ボタンを押すと、背景画像が選べます。

⑥ 完了したら、右上の歯車ボタンを選択してプレゼンテーションの「別の回答を送信するためのリンクを表示」のチェックを外し、「お問い合わせありがとうございます。確認後返信させていただきます。」や「Thank you for contacting us.」等コメントを記入します。そして保存をクリックして下さい。

スプレッドシートを作成し、回答を一覧表示させる

①作成したフォームに「回答」とあるので、クリックすると簡易一覧が出てきます。

しかしより分かりやすく表示させるために、GoogleのExcel版たるスプレッドシートを作成し、問い合わせ内容を一覧で表示することが出来ます。

② 緑の＋をクリックして、「新しいスプレッドシートを作成」を作成します。

通知の設定

問い合わせがあったら即メールアドレスに通知してもらいましょう。

① ツールの「通知ルール」を選択し、下記の通りに設定します。

フォームの設置

① フォームで [送信] をクリックすると、ブログやHPに貼り付る用のHTMLを作ったり、リンクを表示させることができます。

Bloggerでは幅760ピクセル、高さ1500ピクセルが丁度良いと思われます。

② 上記のコードを任意の場所に貼り付けて完了です。

Bloggerでしたら、[レイアウト]⇒サイドバー等に[ページ]ガジェット追加⇒[外部リンクを追加]⇒作成したリンクを追加して下さい。

Bloggerの固定ページに挿入する場合

上記のようにGoogleフォームのデザイン化されたページへのリンクも可能ですが、当サイトのお問い合わせフォームはBloggerの固定ページに設置致しました。

① [ページ] から [新しいページ] 作成

② 題名は「Contact」英語表記にする。

※英語で入力すると、ページのURLが英語で反映されます。日本語だと不規則な英数字のURLになるので注意しましょう。

後ほど題名を日本語に変更するか、Googleフォームで作成したものには既に「お問い合わせ」と表示されているので、題名なしにしましょう。

題名変更しても、URLは英語表記のままです。

③ 先ほどと同様に、[レイアウト]⇒サイドバー等に[ページ]ガジェット追加

④ [外部リンクを追加] ⇒ ページタイトルと、作成したページURLを貼り付けしましょう。 これで下記画像のように表示されています。

※作成したページの一覧が表示されており、該当するページにチェック入れるのでもOKです。

プライバシーポリシーの注意書きしよう

個人情報に関するクレームを防ぐためにも、個人情報を入力・送信してもらう場合は必ずプライバシーポリシーのリンクを貼り、同意の上で送信してもらうようにしましょう。

第17条個人情報取扱事業者は、偽りその他不正の手段により個人情報を取得してはならない。２個人情報取扱事業者は、次に掲げる場合を除くほか、あらかじめ本人の同意を得ないで、要配慮個人情報を取得してはならない。
引用元：個人情報の保護に関する法律

上記のように定められています。プライバシーポリシーをユーザーに一読してもらえるように、お問い合わせフォームには以下のような注意書きした方が良いでしょう。

ご訪問ありがとうございます。必要事項をご記入後、当サイトのプライバシーポリシー（リンクを貼る）に同意していただいた上で「送信」ボタンをクリックしてください。

Search This Blog

Daphne