無料版はてなブログでもOK!お問い合わせフォームを設置する方法

はてなブログでお問い合わせフォームを設置

Googleアドセンスやアフィリエイトサービスを利用することはブログの「営利利用」にあたります。

はてなブログの「営利利用ガイドライン」に沿って、読者が運営者に直接連絡をとれるようにしなければなりません

はてなブログ個人営利利用ガイドライン(2019年10月1日施行) - はてなブログ ヘルプ

ブログ用のメールアドレスをプロフィールに貼り付けてもOKですが、サブのメールアドレスを毎日チェックするのは面倒ですし、迷惑メールが来る可能性だってあります。

迷惑メール

そこで推奨されているのが、お問い合わせフォームの設置です。当ブログではこんな感じのお問い合わせフォームを設置しています。

お問い合わせ - のんびり優先探索

お問い合わせフォームを設置すれば、メールアドレスを公開せずに読者からの連絡を受け取ることが可能です。

この記事では、お問い合わせフォームの作り方とブログへの設置方法について、図を用いてわかりやすく説明します。

操作でよくわからないところがありましたら、コメントやtwitterのDMをくだされば対応いたします。

Googleフォームでお問い合わせフォームを作る

Google フォーム - アンケートを作成、分析できる無料サービス

まず上のリンクからGoogleフォームにアクセスし、「Googleフォームを使ってみる」をクリックします。
もしログイン画面が出た場合は、お持ちのGoogleアカウントにログインしてください。

Googleフォームを使ってみる
 

新しいフォームを作成
左上「新しいフォームを作成」の「空白(+)」をクリックします。

 

無題のフォーム
新しいフォームの作成画面に来ました。

 

書き換える内容
順番に書き換えていきましょう。
①「無題のフォーム」を「お問い合わせ」にする
②「無題の質問」を「お名前」にする
③「ラジオボタン」を「記述式」にする
「必須」をONにする(この質問への回答を必須にできます)

これで1つ目の質問は完成です。

 

質問のコピーを作成
コピーを作成」ボタンを押すと、まったく同じ質問が下にコピーされるので楽ちんです。

 

お問い合わせ内容は「段落」にする
2つ目の質問は「メールアドレス」にします。回答の形式は「記述式」のままで大丈夫です。
3つ目の質問は「お問い合わせ内容」にします。文章での回答になるので、入力形式は「段落」にしておきましょう。

必要に応じて質問を追加・変更してください。

送信ボタン
できあがったら、右上の「送信」ボタンをクリックします。

 

HTMLタグをコピーする
①送信方法はHTML(<>)を選択
②「コピー」をクリックしてHTMLコードをコピーする
(サイズはそのままで大丈夫です)

これでお問い合わせフォームが完成しました!

ちなみに、はてなブログにコードを設置した後でも、フォーム内容の変更は可能です。フォームの内容を変更してもHTMLコードが変わることはありません。

Googleフォームのメール通知設定をONにする

必須ではありませんが、お問い合わせフォームから回答があった時、自分のメールアドレスに通知メールを送るように設定できます。

お問い合わせが来ていないかチェックする手間がはぶけるのでオススメです。

「回答」ボタンをクリック
先ほどのGoogleフォーム作成の上側、「回答」をクリックしてください。

「回答」は、お問い合わせがあった際に、お問い合わせの内容が表示される画面です。

今はまだ問い合わせが来ていないので「0件の回答」となっています。

トグルメニュー
右上のトグルメニューを押して「新しい回答についてのメール通知を受け取る」をクリックします。

メール通知を受け取る
チェックがついていればOKです。お問い合わせフォームに回答があった時、ご自分のメールアドレスに通知メールが来るように設定できました。

お問い合わせフォームをはてなブログに設置する

次に、作ったお問い合わせフォームのHTMLコードをブログのページに貼り付けます。
ここからは無料版はてなブログと有料版(はてなブログPro)で手順が変わります。

Proの方の手順はこちら

無料版はてなブログでの手順

固定ページ機能を使うことができないので、aboutページにプライバシーポリシーと合わせて設置することがオススメです。

プライバシーポリシーの設置方法についてはこちらをご覧ください。
プライバシーポリシーの設置

ダッシュボード→設定→aboutページ編集

aboutページ編集

私はこんな感じで設定しています。

プライバシーポリシー本文

<h3>お問い合わせフォーム</h3>
先ほどコピーしたHTMLコード(<p>で始まり</p>で終わるやつです)

<h3></h3>はHTMLの見出しタグと呼ばれているもので、<h3>と</h3>で囲った部分は大見出しになります。

モードがHTMLになっているか確認してから、ページ下部の「変更する」を押してください。これで設置完了です!

次はサイドバーにリンクを設置します。

説明の続きはこちら

はてなブログProでの手順

固定ページを使ってお問い合わせページを作り、そこにHTMLコードを貼り付けます。

固定ページ
①ダッシュボード→固定ページ
②③URLの入力欄を「contact」として「ページを作る」をクリック

contactは連絡先という意味です。日本語が良いなら「otoiawase」などでもよいですが、私は英語の方がかっこよくて好きです。

固定ページの編集画面
①編集モードをHTML編集にする
②タイトルには「お問い合わせフォーム」などと記入
③本文にフォームのHTMLコードをそのまま貼り付ける

最後に「公開する」を押せば設置完了です!

サイドバーにリンクを設置

ここからは無料版・Pro共通です。

ダッシュボード→デザイン

サイドバーにモジュールを追加
①カスタマイズ(スパナのアイコン)をクリック
②③サイドバーの「+モジュールを追加」をクリック

モジュール編集画面
①タイトルに「リンク」「Links」などと記入
②リンクの左側には「お問い合わせ」と記入する。aboutページにプライバシーポリシーとお問い合わせフォームをまとめて設置した方は「プライバシーポリシー・お問い合わせ」などと記入する。
右側には、aboutページまたは固定ページでつくったお問い合わせページのURLを貼り付ける。
③「適用」をクリック

これでサイドバーにお問い合わせページのリンクを設置できました!

Proの方はプライバシーポリシーを別の固定ページに作れます。同じようにリンクを設置できるので、上の画像を参考にしてくださいね。

お問い合わせフォームの確認

ご自分のブログのサイドバーからお問い合わせページが開けるか確認しましょう。

スマホでもきちんと表示されていればカンペキです。

お問い合わせフォームを確認

また、お問い合わせフォームにテスト送信をしてみて、ご自分のメールアドレスに通知が来るかどうかチェックしてみましょう。私の場合送信してからメールが来るまで2~3分かかりました。すぐに届かなくても少し待つとよいと思います。

メールがいつまでも届かない場合は、Googleフォームのメール通知設定を確認してくださいね。

おつかれさまでした。

Googleアドセンスの審査に合格するためのポイントについては、こちらの記事で詳しく解説しています。

お問い合わせの設置が終わったら、自分の好きな広告を貼れる「アフィリエイト」にも挑戦してみましょう!