はてなブログ初心者さん・はてなブログにお問い合わせフォーム設置したいな～
・設置しておかないとアドセンスの審査も通らないんでしょ？
はてなブログに問い合わせフォームを設置するなら、Googleの「フォーム」を使えば無料で簡単にできますよ。
この記事ではGoogleフォームでお問い合わせフォームの作り方を紹介します。
お問い合わせフォーム完成イメージ
この記事で作成するお問い合わせフォームは下記の項目で作成することにします。
- メールアドレス
- お名前
- ご質問
以降の手順で作成すると、こんなお問い合わせフォームが完成します。
必要最小限のシンプルなお問い合わせフォームです。
お問い合わせフォームの作り方の手順
まずはGoogleフォームで、お問い合わせフォームの本体を作成します。
今回のお問い合わせフォームに設定する３項目について、
「ラベル（項目の名前）」と「項目の種類」を順番に設定して行きます。
Google「フォーム」を始める
Googleのホームページの画面右上「Googleアプリ」のボタンから、更に深いところに入ったところに入口があります。
「その他のソリューション」を押すと、ブラウザーの画面が切り替わります。
この画面をずっと下の方までスクロールしていくと、「フォーム」があります。
「Googleフォームを使ってみる」を押して、次に進みましょう。
直リンクはこちら Googleフォーム
「空白」を選んで、いよいよフォームを作成していきます。
Googleフォームで問い合わせフォームを作る
初期画面
まずはこんな画面が表示されます。
画面の題名とフォームの説明を入力する
お問い合わせ画面の「題名」と「フォームの説明」を記入します。
画面の赤い枠に、お好みの文字列を入力してください。
この記事では以下のようにしておきます。
- 題名： お問い合わせ
- フォームの説明： 当サイトへのご質問は当フォームよりご連絡ください。
お名前欄を設置する
お問い合わせする方（入力者）のお名前を入力する欄を設置します。
- 「無題の質問」と表示されている部分に「お名前」と記入します
- 「お名前」と入力した右横の「ラジオボタン」となっている部分をマウスでクリックして、「記述式」を選択してください
- 画面右下の「必須」部分をクリックして色付き（On）の状態にします
ここまでで、下記の状態になったいるはずです。
次の項目を設置するために、画面右側の「＋」ボタンを押しましょう。
メールアドレス欄を設置する
お問い合わせする方（入力者）のメールアドレス入力欄を設置します。
新しい項目が「質問」と表示されていますね？
そこに「メールアドレス」と入力してください。
すると自動的に、
- メールアドレス欄の下に「メールアドレスの収集設定を有効にする」と表示され
- 右側の項目属性が「記述式」
に変更されます。
あとは、画面右下の「必須」部分をクリックして色付き（On）の状態にします。
上図で青で囲んだ「メールアドレスの収集設定を有効にする」をクリックすると、以下のような画面になります。
メールアドレスの項目が一番上になってしまいます。
「メールアドレスの収集設定」を有効にすると上に来る仕様のようです。
ここに入力されたメールアドレス情報をスプレッドシートに転送して一覧管理ができます。
「メールアドレスの収集」設定を有効にしなくても、メール情報は入手できますのでスプレッドシートでの管理が不要であれば設定しなくても良いです。
上記画面で青で囲んだ「設定を変更」を押すと、メールアドレスの収集要否やフォームからの情報送信時のアクションについての設定ができます。
フォームからの回答内容のコピーを送信者が自分自身のメールアドレスに送信するかどうかを設定することができます。
回答者がリクエスト（送信時に選択する）できるようにする場合は、下記の通りに設定します。
次の項目を設置するために、画面右側の「＋」ボタンを押しましょう。
質問欄を設置する
お問い合わせの内容を記入する欄を設置します。
- 「質問」と表示されている部分に「ご質問」と記入します
- 「ご質問」と入力した右横の「ラジオボタン」となっている部分をマウスでクリックして、「記述式」を選択してください
- 画面右下の「必須」部分をクリックして色付き（On）の状態にします
これでお問い合わせフォームの設定が終わりました。
設定はgoogleドライブへ自動保存されます。
はてなブログへの設定手順
上記で作成したGoogleフォームをはてなブログ（無料）へ設定していきます。
Googleフォームで作った問い合わせフォームの埋め込みHTMLをコピーする
まだ引き続きGoogleフォームの画面です。
- 画面右上の「送信」ボタンを押す
- タブの「＜＞」を選択する
- 画面右下のコピーを押す
これで、はてなブログに問い合わせフォームを設置するための埋め込みHTMLがコピーされました。
この操作は何度もやり直しはできますが、念のため、コピーした内容はメモ帳などに張り付けて、コピーしなおせるようにしておくことをおすすめします（クリップボードからクリアされた時のやり直しの手間を省くため）。
はてなブログに問い合わせフォームを設置する
はてなの無料ブログは固定ページが使用できないため、通常の記事投稿で設置する方法もありますが今回は下記のように設置します。
- 「about」ページに埋め込み
- サイドバーのウィジェットにページリンクを設置する
「about」ページに埋め込み
設定の入口ははてなブログの「設定」ページです。
ここの「aboutページ編集」をクリックしてください。
下記の通り、HTML記入欄に、Googleフォームからコピーした「埋め込みHTML」を貼り付けてください。
貼り付けたら、画面下部の「変更する」ボタンを押して保存してください。
サイドバーのウィジェットにページリンクを設置する
はてなブログのデザインのカスタマイズページから設定をします。
サイドバーの設定の入口は下記の通り。
「リンク」の欄にメニュー名とaboutページのURLを記入してください。
aboutのURLは https://あなたのはてなサイト.hatenablog.com/about です。
※あなたのはてなサイトの末尾に /about をつけるだけです。
これで、はてなブログへのお問い合わせフォームの設置が完了しました。
これで、ご自身で表示のテストをしてみてくださいね。
この記事の通りに作成していれば、下記の通りに表示されるはずです。
まとめ
この記事では、
- Googleフォームを使って
- はてな無料ブログのaboutページを使用して
- サイトバーからお問い合わせフォーム表示させる
方法を紹介しました。
Googleフォームは無料で使えますし、WordPressのプラグインのようなものが使えない、無料ブログとの組み合わせは抜群ですね。
コメント