無料はてなブログ用「問い合わせフォーム」の作り方【サードバーに設置する方法|完全版!】

お問い合わせ

[voice icon=”https://tomiyoshi-blog.com/wp-content/uploads/2020/02/2020y02m21d_225413211.jpg” name=”” type=”l”]

はてなブログ(無料版)に「お問い合わせフォーム」を作りたいけど、何だかよくわかりません。初心者でもわかるように作り方を教えてください。

[/voice]

こんな疑問に答えていきます。

 

お問い合わせフォームは、読者からの質問や意見をもらう為に必要なもの。

ブログ内にメールアドレスや、電話番号をそのまま記載すると危険ですが、お問い合わせフォームを作っておくことで、安全に連絡を受け取ることができます。

 

ここでは、そんな「お問い合わせフォーム」を「はてなブログ(無料)」に設置する方法について、具体的に解説していきます。

このページでわかること

  • はてなブログ用「お問い合わせフォーム」の作り方
  • 「お問い合わせフォーム」をサイドバーに設置する方法

 

このページを参考にすることで、ブログ初心者でも簡単に、はてなブログ(無料)に「お問い合わせフォーム」を作ることができます。

 

今回は、はてなブログ無料版をベースに解説していきますが、「はてなブログPro(有料版)」の場合でもそんなに流れは変わりません。

[voice icon=”https://tomiyoshi-blog.com/wp-content/uploads/2020/04/2a.jpg” name=”管理人Tomi” type=”l”]

ちなみに、つい最近僕の両親(60代)が「はてなブログ」を始めました。ブログ初心者の60代の両親でも理解できるくらい わかりやすく解説していくので、どうぞ参考にしてみてください。

[/voice]

はてなブログ(無料)に「お問い合わせフォーム」を作成する手順

 今回の流れ

  1. Googleフォームで「お問い合わせフォーム」を作成
  2. はてなブログ内に「お問い合わせページ」を作る
  3. はてなブログのサイドバーへ設置する
  4. 問い合わせページの動作確認

 

大まかな流れは上記の4ステップになります。それぞれを掘り下げながら解説していくので少し長くなってしまいますが、手順どうりにやれば大丈夫なので、ゆっくり勧めていってくださいね。

先に「Googleアカウント」を作っておこう

「お問い合わせフォーム」を作成するにあたって、Googleアカウントが必要になります。まだGoogleアカウントの作成が済んでいない方は、先に済ませておいてください。

[voice icon=”https://tomiyoshi-blog.com/wp-content/uploads/2020/04/2a.jpg” name=”管理人Tomi” type=”l”]

Gメールアドレスを持っている場合は、アカウント作成ができていると思います。持っていなくてもアカウント作成はすぐにできるので、安心してください。

[/voice]

 

Googleアカウントを持っていない場合は、以下のアカウント作成方法をクリックしてください。Googleアカウント作成の手順が分かりますよ

>>アカウント作成の方法はここをクリック!!!

■まずはGoogleアカウント申込画面から【Googleアカウントを作成する】をクリック

Googleアカウント

 

■以下の項目を埋めて【次へ】をクリック

Googleアカウント

 

■電話番号を入力して、【次へ】をクリックGoogleアカウント

 

■ケータイに届いた確認コードを入力して【確認】をクリック

Googleアカウント

 

■以下のアカウント情報を入力し、【次へ】をクリック

アカウント

  • 再設定用のメールアドレス【省略可能】
  • 生年月日
  • 性別

■電話番号の活用

Googleアカウント

※ここはスキップでもOKです。

 

■利用規約を確認し、下にある【同意する】をクリック

Googleアカウント

Googleアカウント

 

[voice icon=”https://tomiyoshi-blog.com/wp-content/uploads/2020/04/2a.jpg” name=”管理人Tomi” type=”l”]

ここまで終了すると「Googleアカウント」の作成はOKです。

[/voice]

 

Googleフォームで「お問い合わせフォーム」を作成

まずは、Googleフォームで「お問い合わせフォーム」を作っていきます

 

Googleフォームというのは、Googleが提供している無料のツールで、誰でも利用することができる便利なものです。

完成形はこんな感じ↓

 

これを作って、はてなブログに設置していくという」流れになります。

お問い合わせフォームの作成手順

  1. 「お問い合わせフォーム」を作成する
  2. 「お問い合わせフォーム」の設定
  3. 完成した「フォームのコード」をコピーする

 

①:Googleフォームにアクセスして、「Googleフォームを使ってみる」(紫色)をクリック

Googleフォーム「お問い合わせフォーム」のつくり方

Googleフォーム「お問い合わせフォーム」のつくり方

 

②:新しいフォームを作成から「空白」をクリック

Googleフォーム「お問い合わせフォーム」のつくり方

Googleフォーム「お問い合わせフォーム」のつくり方

 

※以下のページが出るので、紹介への誘導をスキップしてください。

Googleフォーム「お問い合わせフォーム」のつくり方

Googleフォーム「お問い合わせフォーム」のつくり方

 

③:無題のフォームと書かれた部分に「お問い合わせフォーム」と入力

Googleフォーム「お問い合わせフォーム」のつくり方

Googleフォーム「お問い合わせフォーム」のつくり方

 

※フォームの説明には文章を入れなくてもOKです。今回は例として以下の様に入れました。自分のブログ名に変更するなどしてください。

Googleフォーム「お問い合わせフォーム」のつくり方

Googleフォーム「お問い合わせフォーム」のつくり方

 

④:無題の質問の欄に「お名前」と入力し、横の枠をクリック

Googleフォーム「お問い合わせフォーム」のつくり方

Googleフォーム「お問い合わせフォーム」のつくり方

 

⑤:「記述式」を選んでクリック

Googleフォーム「お問い合わせフォーム」のつくり方

Googleフォーム「お問い合わせフォーム」のつくり方

 

⑥:必須の部分を1.のように有効へ切り替えたら、2.の「+」ボタンをクリック

Googleフォーム「お問い合わせフォーム」のつくり方

Googleフォーム「お問い合わせフォーム」のつくり方

 

⑦:次の項目が追加されるので、先ほどと同じ要領で「メールアドレス」と入力。「2.記述式」「3.必須」を確認して、+をクリックして次の項目を追加します。

Googleフォーム「お問い合わせフォーム」のつくり方

Googleフォーム「お問い合わせフォーム」のつくり方

 

⑧:次の項目には「題名(または件名)」と入力。あとは先程と同じ手順ですが、ここは必須項目じゃなくても構いません。

Googleフォーム「お問い合わせフォーム」のつくり方

Googleフォーム「お問い合わせフォーム」のつくり方

 

⑨:最後は「メッセージ(本文)」と入力し、これまで記述式だった部分は「段落」に変更します。(切り替わっていればそのままでOK)

Googleフォーム「お問い合わせフォーム」のつくり方

Googleフォーム「お問い合わせフォーム」のつくり方

 

※②を「段落」にすることで、長文を入力できるようになります。切り替えたら「必須項目」に設定するのもお忘れなく。

Googleフォーム「お問い合わせフォーム」のつくり方

Googleフォーム「お問い合わせフォーム」のつくり方

 

これで、「お問い合わせフォーム」の作成は完了です。次は、設定をしていきます。

「お問い合わせフォーム」の設定

①:画面の上までスクロールして「回答」に切り替える。縦の「・・・」をクリック

「お問い合わせフォーム」の設定

「お問い合わせフォーム」の設定

 

②:「新しい回答についてメール通知を受け取る」をクリックして✔マークを追加します。

「お問い合わせフォーム」の設定

「お問い合わせフォーム」の設定

 

※この設定をしておくと、問い合わせが来た時に、登録しているGメールアドレスに通知が来るようになります。

 

これで、設定は完了です。この他にも色々な設定ができるのですが、今回はこのくらいにしておきます。

完成した「フォームのコード」をコピーする

次は、完成した「お問い合わせフォーム」のコードをコピーしていきます。

 

①:画面上の「送信」をクリック 

問い合わせフォームのコードをコピー

問い合わせフォームのコードをコピー

 

②:フォームを送信の中にある「<>」をクリック

問い合わせフォームのコードをコピー

問い合わせフォームのコードをコピー

 

③:「コピー」をクリック。

問い合わせフォームのコードをコピー

問い合わせフォームのコードをコピー

※画面したのコピーをクリックすれば、赤枠内のコードがコピーされます。

↓こんな感じのコードです

<iframe src=”https://docs.google.com/forms/d/e/1FAIpQLScjApjj7Fyt0odOvmGCg5J1jMrIXmALqGpJfX7OdDxn1K7fDA/viewform?embedded=true” width=”640″ height=”844″ frameborder=”0″ marginheight=”0″ marginwidth=”0″>読み込んでいます…</iframe>

 

以上で、Googleフォームでの「お問い合わせ」の作成は完了です。次は、ここでコピーしたコードをはてなブログへ貼り付けていきます

はてなブログ内に「お問い合わせフォーム」を作る

次は、先ほどコピーしたコードを使って「お問い合わせフォーム」を作成していきますが・・・

 

作成する方法は2つあります

 

  1. 記事の投稿ページで、問い合わせページを作る
  2. aboutページで問い合わせページを作る

 

2つのうち、どちらか好きな方で作成してください。おすすめは②番の方法ですが、簡単なのは①番の方法です。

 

念のため、どちらも紹介しておきますね。

[aside type=”normal”]

通常「問い合わせページ」は、固定ページという記事投稿ページとは別の方法で掲載しますが、はてなブログの無料版にはそれがありません。

[/aside]

1.「記事の投稿」から問い合わせページを作る

 

①:記事の投稿画面へ進み、「HTML編集」に切り替える

はてなブログ・記事ページへ貼り付け

はてなブログ・記事ページ

 

②:先ほど作成したコードを貼り付け

はてなブログ・記事ページへ貼り付け

はてなブログ・記事ページへ貼り付け

 

③「編集見たまま」へ切り替えて、タイトルに「お問い合わせページ」と入力。画面下の「公開」をクリック

はてなブログ・記事ページへ貼り付け

はてなブログ・記事ページへ貼り付け

 

記事投稿ページでの「問い合わせフォーム」作成は完了です。次は、aboutページでの作り方を紹介していきます。

2.「aboutページ」で問い合わせページを作る

aboutページというのは、サイドバーにあるプロフィールのID をクリックすると表示されるページです。

aboutページへ貼り付ける

 

①:ダッシュボード「設定」から「aboutページ編集」をクリック

はてなブログ「about」ページの編集

はてなブログ「about」ページの編集

 

②:自由記述欄に「問い合わせフォーム」のコードを貼り付ける

aboutページへ貼り付ける

aboutページへ貼り付ける

※この時、モードの部分が「HTMLモード」であることを確認して貼り付けてください。

 

③:張り付け終わったら下へスクロールして【変更する】をクリック

aboutページへ貼り付ける

aboutページへ貼り付ける

 

以上で、2つのどちらかの方法で「お問い合わせページ」の作成が完了しました。

 

でも、これだけじゃ読者が見つけづらいので、見つけやすくするために、問い合わせフォームへ繋がるリンクをサイドバーへ設置していきます。

「お問い合わせフォーム」へのリンクをサイドバーへ設置する

次は、作成した「お問い合わせフォーム」へのリンクをサイドバーへ設置していきます。

 

①:ダッシュボードにある「デザイン」をクリック

サイドバーへの設置方法

サイドバーへの設置方法

 

②:スパナマークから「サイドバー」→「+モジュールを追加」をクリック

サイドバーへの設置方法

サイドバーへの設置方法

 

③:「リンク」を選び「問い合わせページ」へのリンクを入れる。

サイドバーへの設置

サイドバーへの設置

  • 画像②は「メニュー」でOK です。
  • 画像③には「お問い合わせフォーム」と入力
  • 画像④先ほど作成した「お問い合わせページ」へ繋がるリンクURLを貼り付け。

 

※aboutページで作った場合、IDをクリックして表示されたページのURLを貼り付けてください。

aboutページへ貼り付ける

aboutページの場合

aboutページの場合

 

④:すべて入力が完了したら「適用」をクリック

サイドバーへの設置

サイドバーへの設置

 

⑤:画面左上の「変更を保存する」をクリック

サイドバーへの設置

サイドバーへの設置

 

以上で、サイドバーへの設置が完了です。ブログトップで確認すると、以下のように表示されています。

サイドバーへの設置

サイドバーへの設置

 

これで設置はすべて完了です。お疲れ様でした!!!!

念のため、正しく動作するか確認しましょう

「問い合わせフォーム」の動作確認

作成した「お問い合わせフォーム」から、実際に送信をして動作確認をします。

 

先ほど作成したフォームに「名前」「メールアドレス」「本文」などを入力して送信をしてみてください。

問い合わせフォーム動作確認

※内容は適当で構いません。

 

すると、Googleアカウントを作成したGメールアドレス宛に、お問い合わせの通知が届きます。「概要を表示」をクリックしてください。

問い合わせフォーム動作確認

 

送信した、テスト内容が届いていればOKです。

問い合わせのテスト

[voice icon=”https://tomiyoshi-blog.com/wp-content/uploads/2020/04/2a.jpg” name=”管理人Tomi” type=”l”]

これで、すべての工程が終わりました。本当にお疲れ様でした。

[/voice]

はてなブログで稼ぐなら「問い合わせフォーム」の作成は必須

はてなブログを使って、アフィリエイトやアドセンス広告の掲載を行う場合、「問い合わせページ」の作成は必須となります。

 

これは、アドセンスの審査がどうとかいう事ではなく、はてなブログの規約として決まっていることです。

ーはてなブログの規約内容ー

営利利用ブログには情報発信の主体を明らかにするため下記のいずれかの方法で運営者の連絡先を明示するものとします。

  • 自身でプライバシーポリシーを設けている場合、プライバシーポリシー内に記載
  • ブログのヘッダ、フッタ、サイドバー、プロフィールなど、どの記事からも確認できる箇所に記載

連絡先として表示する情報は、恒常的に受信できるメールアドレスなど、誰でも直接連絡が取れるものとしてください。

コメント欄やSNSアカウントへのリプライなど公開での投稿、SNSのフォロワーや特定サービスの登録者のみが利用できるダイレクトメールやメッセージ機能などは連絡先とみなしません

引用:「はてなブログ」公式ガイドライン

 

要は「はてなブログを商用利用するなら、どこからでも確認できる位置に”お問い合わせフォーム”へのリンクを載せてね」ってことです。

 

[voice icon=”https://tomiyoshi-blog.com/wp-content/uploads/2020/04/2a.jpg” name=”管理人Tomi” type=”r”]

既に、プライバシーポリシーなどを設置している場合は、同じページ内に「お問い合わせフォーム」を載せても良いそうなので、まだ設置していない方は早めにやっておきましょう。

[/voice]

余談ですが・・アドセンス審査に「問い合わせフォーム」関係ないですよ(笑)

ちなみに、はてなブログ(無料版)で審査に通すために「お問い合わせフォーム」を作成する人が多いですが・・・。審査に全く関係ありません。

 

実際に、「お問い合わせフォーム」を設置しない状態で申し込んでみたら、普通に審査に通りました。

はてなブログ無料でアドセンス通過

 

つい最近、検証サイトでやってみた結果なので、割と信ぴょう性は高いかと思います。

はてなブログ無料アドセンス審査通過

[voice icon=”https://tomiyoshi-blog.com/wp-content/uploads/2020/04/2a.jpg” name=”管理人Tomi” type=”l”]

検証も兼ねてやってみたんですけど、アドセンス審査には関係なかったみたいですね。(※でも、プライバシーポリシーは必要です)

[/voice]

 

ただし、どちらにしろ「はてなブログ」でアドセンスやアフィリエイトをするなら、問い合わせページは必要なので、審査に関係なく設置するようにしましょう。

 

はてなブログ無料版でのアドセンス審査攻略法については、近日公開する予定なので、気になる方はチェックしておいてください。

 

それと、答えられることはすべて答えるので、気軽にどうぞm(_ _)m

 

今回は以上です。最後までお付き合いいただきありがとうございました。

 

関連記事アドセンス審査に通らない人へ【落ちた時こそ確認すべきチェック項目18選】