キラッとはてログ

ポヤポヤの主婦ポヤラが本気で取り組むブログ運営

超簡単!はてなブログお問い合わせフォームの設置方法【無料版もOK】

 

f:id:poyara:20211209161812j:plain

ブログの収益化にはお問い合わせフォームの設置が必要だというけれどホントかな?

本当です!
はてなブログの「個人営利利用ガイドライン」にも明記されています。設置していないブログは垢BAN(アカウント停止)されることもあるのよ。

  

お問い合わせフォームを作りたいけどどうやればいいのかわからない…

Googleフォームを使えば初心者でも無料で簡単につくれます。

 

お問い合わせフォームって無料版のはてなブログでも作れるの?

はい!作れます。丁寧にわかりやすく説明しますね。

 

■この記事でわかること■
  • お問い合わせフォーム設置の重要性
  • Googleフォームを使って簡単にお問い合わせフォームを作成する手順
  • お問い合わせフォームをはてなブログのサイドバーに設置する方法

 

あなたのブログにカッコイイお問い合わせフォームを設置しましょう!

 

 

 

お問い合わせフォーム設置の重要性

はてなブログの収益化には「プライバシーポリシー」とともに「お問い合わせフォームの設置」が必要です。

2019年10月1日に施行された「はてなブログ個人営利利用ガイドライン」の「個人営利利用のルール」には「連絡先の明示」について記載されています。

ガイドラインの内容はザックリこんな感じです↓↓

【連絡先の明示】

はてなブログを営利利用する場合は情報発信の主体を明らかにするために運営者の連絡先を明示することが必要。

【連絡先を記載する場所】

運営者の連絡先はプライバシーポリシー内か、ヘッダ、フッタ、サイドバー、プロフィールなど、どの記事からも確認できる場所に記載すること。

【連絡先の形式】

連絡先として表示する情報は、いつでも、誰でも連絡できるメールアドレスのようなものにすること。
ブログのコメント欄やSNSのリプライ欄など公開での投稿、SNSフォロワーのみが利用できるダイレクトメールなどはNG!→お問い合わせフォームが最適

さらに…連絡先を明示せず、訪れた読者に不利益が生じた場合は垢BANの可能性もあるよ!と書かれています。

【公開停止措置】

連絡先の明示がなかったり、連絡先が嘘偽の場合、また問い合わせの内容や個人情報が公開されるなど、ユーザーに不利益が生じる状態の場合は事前の警告なくブログの公開停止措置を取ることがある。

 

お問い合わせフォームの設置はアドセンス審査に有利という話もありますが、それ以前に、きちんと設置しないとブログが公開できなくなる可能性があるのです。

はてなブログで収益化を考えている方は「お問い合わせフォーム」を必ず設置しましょう。

 

さっそく「お問い合わせフォーム」を作成して、はてなブログのサイドバーに設置していきましょう。

 

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

お問い合わせフォームはGoogleフォームで簡単に作れます 。

*Googleフォームを利用するにはGoogleアカウントが必要です。
Googleアカウントをお持ちでない方
はこちらの記事を参考に作成してください。
↓↓

【初心者向け】Googleアカウント作成の手順 - キラッとはてログ

 

フォームの作成

STEP
Googleフォームにアクセス
こちらからGoogleフォームにアクセスしてください
↓↓
Google フォーム - アンケートを作成、分析できる無料サービス
STEP
左側「パーソナル」の「Googleフォームを使ってみる」をクリック
f:id:poyara:20210625132502j:plain
STEP
画面一番左の「空白」を選択

f:id:poyara:20210625132631j:plain

こちらの画面で編集していきます↓↓

f:id:poyara:20210625132858j:plain

STEP
タイトルを編集

f:id:poyara:20210625133047j:plain

①タイトルを記入。わかりやすく「お問い合わせ」がいいですね。
②フォームの内容説明を記入。
「お問い合わせありがとうございます。」
「お問い合わせはこちらからお願いします。」などがオススメ。

③一番上のアイコンをクリック↓↓

f:id:poyara:20210625133144j:plain

これでフォームの外枠ができました。
次はユーザー記入欄を作成します。

ユーザー記入欄の作成

STEP
「お名前」記入欄を作成

f:id:poyara:20210625133333j:plain

①「質問」の欄に「お名前」と記入
②名前の記入が必須の場合はチェックを入れる
③再びクリック

STEP
「メールアドレス」記入欄を作成

f:id:poyara:20210625133628j:plain

①「メールアドレス」と記入
②「必須」にチェック
*メールアドレスがないとお問い合わせに返信ができませんから、必ずチェックを入れます。
③「必須」の右側の矢印部分をクリック!←ここ大事

すると、すぐ下にこの画面が表示されるので

④「回答の検証」をクリック↓↓

f:id:poyara:20210625133811j:plain

⑤「回答の検証」クリックをすると「メールアドレス」記入欄の下にこの項目が表示される↓↓

f:id:poyara:20210625134153j:plain

⑥左側の▼をクリックして「テキスト」を選択。
⑦同様に右側の▼をクリックして「メールアドレス」を選択。
⑧+をクリック↓↓

f:id:poyara:20210625135133j:plain

この設定をするとメールアドレスの記載がないとエラーが表示されるようになります。ユーザーのメールアドレス記載漏れ防止のために必ず設定しましょう。

ちなみに…メールアドレスを記入ないとこのように表示されます↓↓

f:id:poyara:20210625140838j:plain

 

STEP
「お問い合わせ内容」記入欄を作成

f:id:poyara:20210625141545j:plain

①「お問い合わせ内容」と記入。
②「お問い合わせ内容」と記入すると自動で「段落」に変わります。
*「段落」に設定すると長文が記入できるようになります。(ユーザーにお問い合わせ内容を詳しく書いてもらえる)
③「必須」をチェック。

これで、ユーザー記入欄は完成です。

メール通知を受け取る設定

続けてお問い合わせ時にメールで通知を受け取る設定をします。

STEP
画面の一番上に戻り「回答」をクリック
f:id:poyara:20210625143401j:plain
STEP
画面が変わるのでここをクリック↓↓
f:id:poyara:20210625143458j:plain
STEP
「新しい回答についてのメール通知を受け取る」をクリック
f:id:poyara:20210625143542j:plain

これで完了です!

確認メッセージ  の設定

次は確認メッセージの設定をします。

※2024年2月10日追記
下記のステップ2「プレゼンテーション」の項目名が「表示設定」に更新されました。
具体的には「プレゼンテーション」→「別の回答を送信するためのリンクを表示」が、「表示設定」→「別の回答を送信するためのリンクを表示」に変更になっています。
詳しくは、8ma’s blogさんの記事でご確認ください↓

8ma.hatenablog.com

STEP
画面上の「設定」をクリック
お問合せフォームの作成/確認メッセージ設定
STEP
「プレゼンテーション」をクリック
STEP
「別の回答を送信するためのリンクを表示」のチェックを外す
お問合せフォームの作成/確認メッセージ設定2
STEP
確認メッセージを記入

お問合せフォームの作成/確認メッセージ

確認メッセージの「編集」をクリック↑↑

お問合せフォームの作成/確認メッセージ

①確認メッセージを記入
②「保存」をクリック

これで完了です。
確認メッセージは
「お問い合わせありがとうございました」
「お問い合わせ内容を確認して返信させていただきます」
など、あなたのブログに合った文章を記入してくださいね。

テーマオプションでお好みの色に

「テーマオプション」で自分のブログに合ったカラーに変更できます。

パレットのアイコンをクリック↓↓

f:id:poyara:20210625144334j:plain

テーマの色、背景、フォントを選べます。

これでお問い合わせフォームが完成しました!
次は「お問い合わせフォーム」をはてなブログに設置する準備をします。

HTMLをコピーする

「お問い合わせフォーム」をはてなブログに設置するためにHTMLをコピーしましょう。

STEP
画面上の「送信」をクリック
20211209140541
STEP
HTMLをコピー

f:id:poyara:20210625152924j:plain

①「< >」をクリック
②に表示されるのが作成した「お問い合わせフォーム」のHTMLです。
③をクリックすればコピーできます。

コピーしたHTMLをはてなブログに貼り付けます。 このページは開いたままにしておいてね。

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

いよいよブログのサイドバーに「お問い合わせフォーム」を設置しましょう。

まず、はてなブログに「お問い合わせフォーム」のページを作ります。

と言っても…記事作成ページに先ほどコピーしたHTMLを張りつけるだけ!めちゃくちゃ簡単です!

はてなPRO(有料プラン)の場合

有料プランのはてなPROユーザーは固定ページにお問い合わせフォームを作りましょう。

STEP
ダッシュボード→固定ページを選択
f:id:poyara:20210625154833j:plain
STEP
「お問合せフォーム」のページを作る

f:id:poyara:20210625155027j:plain

①お問い合わせフォームのURLを記入
私はわかりやすく「otoiawase」(オトイアワセ)にしました。
*URLは必ず半角英数字を使ってね!
②「ページを作る」をクリック

STEP
固定ページ編集画面にHTMLコードを貼る

f:id:poyara:20210625155258j:plain

無料版はてなブログの場合

無料版はてなブログは固定ページが使えません。お問い合わせフォームは通常ページに作成しましょう。

ダッシュボード→「記事を書く」で記事作成画面を開きます。

STEP
「お問い合わせフォーム」記事を作成

f:id:poyara:20210625161226j:plain

①「HTML編集」を選択←ここ大事
②タイトル「お問い合わせフォーム」
③本文にGoogleフォームでコピーした「お問い合わせフォーム」のHTMLを貼る
④画面右側の歯車のアイコンをクリック

STEP
編集オプションの設定

f:id:poyara:20210625161546j:plain

⑤カスタムURLを記入。
「otoiawase」(オトイアワセ)などがわかりやすいですね。
*URLは必ず半角英数字を使ってね!
「投稿日時」をあなたのブログ記事の中で1番古くなるように書き入れます。
*この設定をしないと「お問い合わせフォーム」が新着記事で表示されてしまいます

STEP
公開する

f:id:poyara:20210625161908j:plain

プレビューを確認して問題なければ「公開」をクリック!

サイドバーに設置する

いよいよ仕上げです!出来上がった「お問い合わせフォーム」をはてなブログのサイドバーに表示させましょう。

STEP
ダッシュボード→デザインをクリック
f:id:poyara:20210625162406j:plain
STEP
サイドバーを選択
f:id:poyara:20210625162500j:plain
①カスタマイズ(レンチのアイコン)をクリック
②サイドバーを選択
STEP
「モジュールを追加」をクリック
f:id:poyara:20210625162545j:plain
STEP
リンクを編集

f:id:poyara:20210625162837j:plain

①「リンク」を選択

②リンクのタイトルを記入
*お好みですが…「サイト情報」などとして、プロフィール、プライバシーポリシー、お問い合わせフォームをまとめるとお洒落です。

③記事のタイトルを記入
「お問い合わせフォーム」でOK!

④記事のURL
先ほどはてなブログ記事作成画面で決めた「お問い合わせフォーム」のURLを記入します。(「otoiawase」のやつです)

⑤「適用」をクリック

はい!これで完成です!

 サイドバーには、このように表示されています↓↓

f:id:poyara:20210625163248p:plain

 

私のブログでは現在このようにカスタマイズしています↓↓

キラッとはてログ/サイドバー

初心者でもカンタンにできますよ!
このカスタマイズのやり方はこちらの記事に記載しています↓↓

poyaran.com

 

■合わせて読みたい■

 

【追記】一見、自分のメアドが公開されているように見える件

あれっ!?私のメールアドレスが表示されている!

そうなんです。完成したお問い合わせフォームをパソコンで開いてみると、タイトルの下にこのように自分のメールアドレスが表示されています↓↓

自分のPCからみたお問い合わせフォーム

自分のメアドが公開されている⁉とあせりますが、ご安心ください。

実際にはこのように表示され、メアドは公開されていませ↓↓

実際に表示されるお問い合わせフォーム

*ご自分のブログをシークレットウインドウで検索してお問い合わせフォームを開くと、実際の表示が確認できます。

 

まとめ/お問合せフォームを作ろう!

「お問い合わせフォーム」は「プライバシーポリシー」と同様にブログ収益化のためにはなくてはならないページです。

きちんと設置することによって読者からの信頼を得られますが、設置しなければペナルティを受けることもあります。

「お問い合わせフォーム」はGoogleフォームで簡単に作ることができます。

はてなブログにはコピーしたHTMLを貼るだけで設置できますから、ぜひやってみてくださいね。

 

フォローお願いします♪