はじめに
はてなブログを始めて1年10カ月（22カ月）経ちましたが、お問い合わせのページはあえて作ってませんでした。
理由は下手にメアドを公開したら、スパムメールがたくさん来るかも知れないと思ったからです。
ブログの記事で質問があればコメントを入力すれば良いのですが、非公開で質問をしたい場合があると思います。
しかし、はてなブログは管理者がコメントを承認したら公開となるので、こっそり質問することはできません。
まあ、こっそり質問するなんてあまりないと思いますが、Googleフォームを利用すると、メアドは非公開で簡単にお問い合わせフォームが作れることが分かったので、当ブログにも実装してみました。
前半はGoogleフォームでのお問い合わせフォームの作り方、後半にお問い合わせのページをブログに設定する方法を解説します。
お問い合わせフォームの設定方法がよくわからない、という方は是非参考にして下さい。
Googleフォームとは
GoogleフォームはGoogleが提供している無料サービスの一つですが、いろんなフォームが数分で超簡単にできちゃうツールです。
Google フォーム - アンケートを作成、分析できる無料サービス
自分でアンケートを作成するだけでなく、他のユーザーとも同時に共同で作成できます。また、デザイン性の高いさまざまな既製テーマから選択したり、独自のテーマを作成したりすることも可能です。しかも、Google フォーム内で結果を分析できる、Google の無料サービスです。
Googleフォームは何ができるのか
これから紹介する「お問い合わせ」フォームや、各種イベントのアンケート・投票をフォームで集計することができます。
集計したデータはリアルタイムで見れグラフにも表示でき、スプレッドシートを利用すると、更に詳しい分析もできる優れたツールです。
またGoogle Suiteのラーニングセンターには、Googleフォームのスタートガイドが用意されており、ここを見れば初心者でも簡単にフォームが作れるように環境が整ってます。
Google フォームのトレーニングとヘルプ - G Suite ラーニング センター
職場や学校で Google アプリをもっと活用したい場合は、
出典：Google ラーニング センター フォーム スタートガイド
それではお問い合わせフォームの作成手順を説明します。
お問い合わせフォームの作成方法
「Googleフォームを使う」をクリック
新しいフォームを作成の「空白」をクリック
無題のフォームを「お問い合わせ」に
無題の質問を「お名前（ハンドルネーム）」に修正
「ラジオボタン」をクリック
「記述式」を選択
「必須」を選択し「コピーを作成」をクリック
「お名前（ハンドルネーム）」を「メールアドレス」に修正
「コピーを作成」をクリック
「メールアドレス」を「件名」に修正
「コピーを作成」をクリック
「件名」を「内容」に修正
「記述式」を「段落に変更」
段落に変更することで、内容は複数行入力できるようになります。
「設定」をクリック
「プレゼンテーション」を選択し「別の回答を送信するためのリンクを表示」のチェックを外す
「進行状況バーを表示」をチェックし、確認メッセージを入力
以上でお問い合わせフォームの作成は終了です。
なおヘッダー画像、テーマの色、背景色、フォントスタイルは変更可能なので、お好みのものに修正して下さい。ここではヘッダーを変更してみます。
「テーマをカスタマイズ」を選択し、「画像を選択」をクリック
お好みの画像を選択
ヘッダー画像を追加したことで、魅力的？なフォームになりました。
問い合わせフォームのブログへの設定方法
次にお問い合わせフォームをブログに設定する方法を説明します。
設定方法は2つあり、お問い合わせフォームのURLのリンクを置く方法とHTMLをブログに埋め込む方法があります。
お問い合わせフォームのURLのリンク取得
「送信」をクリックします
リンクのアイコンを選択し、URLをコピー
サイドバーのリンクに追加します
別の使い方としてツイッターに貼り付けて、問い合わせ内容を送ってもらうことも可能です。
お問い合わせフォームのHTML埋め込み
はてなブログの無料版をご利用の方は、Aboutに埋め込むか、お問い合わせ専用の記事を作成し、記事の中にHTMLを埋め込んで下さい。
有料版のProをご利用の方は、固定ページを利用するのが便利です。
“あトん”は今年1月にProに変更したので、お問い合わせの固定ページを作成しました。作成方法は簡単で、
「固定ページ」を選択→アドレスを入力→「ページを作る」をクリック
Googleフォームを開き「送信」をクリック
HTMLのアイコンを選択しHTMLをコピー
画像の幅は使用しているブログのコンテンツ幅に応じて変更してください。
固定ページのHTML編集を選択→HTMLを貼り付け
固定ページのリンクは、サイドバーのプロフィール、フッター、記事下等、お好みの場所に置いて下さい。
作成した固定ページのリンクを貼っておきますので、興味がある方はご覧下さい。
当ブログについて、こっそり聞きたいことがございましたら、こちらのお問い合わせフォームに入力下さい。 内容や管理人の事情によっては、回答に1～2週間かかる場合がございますので、予めご了承ください。 なお、問い合わせではなく、お礼・励まし等、管理人が喜ぶコメントの送付は大歓迎です。 読み込んでいます... 注意 ・「このコンテンツはGoogleが作成または承認したものではありません」の意味について。 「Googleが作成したものではありません」は、このフォームはGoogleが作成したものではなく、サイトの管理者がGoogleフォームを利用して設置したという意味です。「承認したものではありません」は…
お問い合わせフォームの送信テスト
では、ちゃんとお問い合わせの内容が送信されるかテストしてみました。
今回はテストなので自分に送ってみます。
内容を入力して送信をクリックします。
無事送信されたようです。
お問い合わせフォームをクリック
回答が1件到着してます
「送信」をクリック
メーッセージを書き送信
無事回答が到着してました。
更に質問がある場合は、メールの中で記入・送信できます。
Googleフォームから自動返信させる方法
ausnichtsさまが、下記サイトで自動返信スクリプトを公開されております。
当ブログでは、まだ1件もお問い合わせがないので、まだ実装してませんが、問い合わせが多いサイトは凄く便利だと思いますので、興味がある方は自己責任で利用されると良いと思います。
Google Form に自動返信スクリプト実装 Google Apps Script - IMUZA.com
Google Form に自動返信スクリプト実装 Google Apps Script Google フォームをはてなブログにブログデザインのまま埋め込み、自動返信機能を Google Apps Script（GAS）で実装しようというプロジェクトです。 前記事 Google Form を自前のフォームで実装 Google Form ブログ実装のためのバリデーションを考える Google フォームの「メールアドレスを収集する」を調べてみる Google Apps Script（GAS） Google フォームから GAS を立ち上げる フォームの受信データを取得する フォーム送信でイベント発火…
Google フォームをブログに埋め込み、自動返信メールを送る（完成版） - IMUZA.com
Google フォームをブログに埋め込み、自動返信メールを送る（完成版） はてなブログなど Javascript を使えるブログに Google フォームをブログデザインのまま埋め込み、Google Apps Script（GAS）を使って自動返信メールや管理者への通知メールを送る方法の完成版です。 Google フォームと同じ構成で自前のフォームを作る Javascript で送信完了ページへの遷移を止める GAS で自動返信メールと管理者あて通知メールを送る お問い合わせ等 Google フォームと同じ構成で自前のフォームを作る まず、Google フォームで希望のフォームを作成し、フォー…
まとめ
今回お問い合わせフォームを設定したもう一つの理由は、はてなブログのヘルプに、お問い合わせフォームの設置とお問い合わせを固定ページとして設置する方法が推奨されていたからです。
Googleアドセンスの申請をする - はてなブログ ヘルプ
はてなブログにおけるGoogleアドセンス広告の申請方法を説明しています。
実際やってみたら、Googleフォームを使うとお問い合わせフォームが超簡単に作れることが分かり、固定ページを利用すると、作成したフォームをブログの中に簡単に置くことができることが分かりました。
まだお問い合わせのページを設けてない方は、簡単に作れるので是非試してみて下さい。
今後どんなお問い合わせが来るかドキドキしますが、楽しみに待ちたいと思います。きれいなお姉さんからの質問は大歓迎です。（笑）
♡いいねはこちら
この記事が「面白かった・参考になった」と感じた方は、♡いいねを押して頂けると嬉しいです。
https://t.co/MJi4H8D7t6#Googleフォーム
— AfterWork_Lab (@AfterWork_Lab) April 18, 2020
それでは今回の記事はこれでおしまい。
＜追伸＞
プライバシーポリシーの固定ページもついでに作ってみました。興味がある方は下記記事をご覧ください。
プライバシーポリシーは全てのWebサイトに必要？ - after work Labo
はじめに 個人情報とは 個人情報保護法 個人情報の重要度 プライバシーポリシーの内容 当ブログのプライバシーポリシー まとめ はじめに 管理人（“あトん”）は、現在はてなブログのサービスを利用してますが、今までアフィリエイトは一切やってなく、Webサイトのプライバシーポリシー（Privacy Policy：個人情報保護方針）についてはほとんど気にしていませんでした。 昨年に比べPVは増加傾向なの...つにプライバシーポリシーの表示があることがわかりました。…
