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

はてなブログ_お問い合わせフォームの設置方法 はてなブログ

 

こんにちは。まつたろうです。

 

はてなブログでGoogleアドセンスを利用したり、アフィリエイト広告を載せる場合には、お問い合わせフォームの設置が必要って知っていますか?

どうしてお問い合わせフォームが必要なの?

 

はてなブログのガイドラインを見てみると、営利利用のブログには『連絡先を明示してください』って書いてあります。

blog.hatenablog.com

はてなブログでGoogleアドセンスを利用したり、アフィリエイト広告を載せる場合には、
『どの記事から見ても分かる場所に、誰でもあなたと連絡が取れる方法を載せておいてください』
っていうことなんです。

 

僕もGoogleアドセンスなどの利用にあたり、最近お問い合わせフォームを設置しました。

 

今回ご紹介するのは、

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

方法です。

 

また、この記事は

自分のブログに、お問い合わせフォームを設置したい初心者の方

向けに書かせていただきました。

 

1.『Googleフォーム』でお問い合わせフォームをつくる

最初に『Googleフォーム』を利用して、お問い合わせフォームをつくります。
『Googleフォーム』とは、お問い合わせフォームなどを簡単につくれるGoogleのサービスです。

それでは、下のような『お問い合わせフォーム』を一緒につくっていきましょう!

お問い合わせフォームの完成画面

 

 Googleフォームへのアクセス方法

まず下のリンク先からGoogleフォームのページへアクセスしてください。

www.google.com

Googleアカウントでログイン後、トップ画面の左側のパーソナルの枠内の、【Googleフォームを使ってみる】をクリックします。

Googleフォームのトップ画面

 

フォームを作成する

それでは実際にフォームを作っていきます

新しいフォームを作成⇒『空白』を選ぶ

最初に『新しいフォームを作成』の画面で、左側の『空白』をクリックします。

Googleフォーム 新規作成の選択

 

フォームのタイトル部分をつくる

フォームの作成画面では、まず下の画面の四角で囲んだ部分(フォームのタイトル)を変更します。

  • ①に『お問い合わせ』
  • ②に『お問い合わせはこちらからお願いします』と入力します。

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

 

お名前の記入欄をつくる

続いてお名前の記入欄をつくります。問い合わせをする人が、名前を記入する項目です。

最初につくった「お問い合わせ」の枠の下、『無題の質問』と書いてある枠をクリックします。

フォームの作成画面2

 

ここでは

  • ①に【お名前】と入力
  • ②「ラジオボタン」と書いてある右の 「▼」 をクリックして、『記述式』を選択します。

フォームの作成画面3

 

メールアドレスの記入欄をつくる

次に、メールアドレスの記入欄をつくります。問い合わせをする人が、連絡先のメールアドレスを入力する項目です。

まず右側にある 質問を追加のアイコン をクリックして、項目の枠を追加します。

フォームの作成画面3

 

追加した枠に、先ほどと同じように

  • ①に『メールアドレス』と入力
  • ②『記述式』を選択
  • ③右下の『必須』の横のボタンをクリックして、オンにします。

フォームの作成画面5

メールアドレスやお問い合わせ内容など、返信の際に必要な情報の項目は、「必須」にしておきましょう。

 

続いて、

  • ①「必須」の右側の 三点 をクリックして、『回答の検証』を選択します。
  • ②で ▼ をクリックして『テキスト』を選択
  • ③で ▼ をクリックして『メールアドレス』を選択します。

フォームの作成画面7

上記の設定をしておくと、問い合わせの際、メールアドレスと判断されない文字列が入力されると、エラーが出るようになります。
「問い合わせがあったけど、返信先が分からない!」
こんなトラブルを回避するためにも、設定しておいた方が良いと思います。

 

『回答の検証』を設定しておくと、こんなかんじでエラーが出ます。

エラー表示画面

 

お問い合わせ内容の項目をつくる

続いて『お問い合わせ内容』の項目をつくります。問い合わせする人が、内容を記入する項目です。

メールアドレスの項目を作ったときと同じように、右側にある質問を追加のアイコン をクリックして、枠を追加してください。

 

この項目では、

  • ①に『お問い合わせ内容』と入力
  • 『段落』を選択
  • ③『必須』の横のボタンをクリックして、オンにします。

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

上記②を『段落』にすることで、問い合わせをする人が、長い文章を入力できるようになります。

 

詳細を設定する

とりあえず必要な項目が作れました。続いてフォームの詳細を設定していきます。

まず画面真ん中の上にある

  • 『回答』をクリック
  • ②右側の 三点 をクリックします。

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

 

つぎに『新しい回答についてのメール通知を受け取る』をクリックして、チェックを入れます。

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

ここにチェックを入れておけば、問い合わせがあったとき、登録したアカウントのGmailに、通知が届くようになります。

 

続いて、画面右上の歯車の形のアイコン(設定)をクリックします。

設定

 

設定の画面では、

  • プレゼンテーションをクリック
  • ②「別の回答を送信するためのリンクを表示」のチェックを外します。※初期設定ではチェックが入っているので、クリックして外してください。
  • 確認メッセージには、『お問い合わせありがとうございます』などと入力します。
  • ④ ①~③まで終わったら、忘れずに『保存』をクリックして、設定を保存してください。

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

 

先ほど入力した確認メッセージは、お問い合わせフォームからの送信後、下のように表示されます。

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

 

2.はてなブログのサイドバーへお問い合わせフォームを設置する

フォームの詳細も設定できましたので、はてなブログにお問い合わせフォームを設置します。

 

お問い合わせフォームのHTMLコードをコピーする

まずGoogleフォームの先ほど作ったページで、画面右上の 送信ボタン(送信)ボタンをクリックします。

表示された「フォームを送信」の画面で、

  • < > をクリック
  • ②表示されたHTMLコードをクリックして選択
  • 『コピー』をクリックして、HTMLコードをコピーしておきます。

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

 

お問い合わせフォームのページを作る【はてなブログ無料版】

はてなブログ無料版でのページの作り方を説明します。
有料のはてなブログPROのページの作り方はこちらを見てください。

まずいつも通り記事を書きます。

ページの編集画面でタイトルに『お問い合わせフォーム』と入力します。

無料版記事の編集画面

 

タイトル入力後、

  • ①『HTML編集』をクリック
  • ②先ほどGoogleフォームでコピーした、お問い合わせフォームのHTMLコードを貼り付けます。※プレビュー画面でお問い合わせフォームが表示できているか、確認してみてください。
  • ③ 歯車の形のアイコン(編集オプション)をクリック
  • 投稿日時は、過去の日付にしておきます。(今日の日付にすると、新しい記事として載ってしまうので。。)
  • ⑤URLは分かりやすいように、最後に「otoiawase」などと入力
  • ⑥『公開する』をクリックします。

無料版HTML編集画面

 

続いてサイドバーにページを設置します。
説明はこちらからどうぞ

 

お問い合わせフォームのページを作る【はてなブログPRO】

はてなブログPROの機能である、固定ページを利用する方法を説明します。

はてなブログの管理画面から、左サイドバーの『固定ページ』をクリックします。

固定ページをクリックする

 

次にページのURLを決めます。名前は何でもいいのですが、分かりやすいように

  • ①に「otoiawase」と入力
  • 『ページを作る』をクリックします。

固定ページを作る

 

ページの編集画面で

  • タイトルを『お問い合わせフォーム』
  • ②タイトル入力後、『HTML編集』をクリックします。

固定ページの編集画面

 

HTML編集画面では、先ほどGoogleフォームでコピーしたお問い合わせフォームのHTMLコードを貼り付けます。
※プレビュー画面で、お問い合わせフォームが表示できているか、確認してみてください。

HTMLコードの貼り付け

プレビューして問題なければ、編集画面の左下にある『公開する』をクリックします。

 

サイドバーにお問い合わせフォームのページを設置する(無料版・PRO共通)

お問い合わせフォームのページを作ったら、サイドバーにページを設置する作業を行います。

 

管理画面の『デザイン』から

『カスタマイズ(スパナのアイコン)』 > ②『サイドバー』 > ③『モジュールを追加』をクリックします

モジュールの追加画面

 

『モジュールを追加』の画面で、

  • 『リンク』をクリック
  • ②タイトルに『お問い合わせ』と入力
  • ③リンク名を『お問い合わせフォーム』にします。
  • ④先ほど作った、お問い合わせフォームのページ(記事)のURLを貼り付けます。
  • ⑤『適用』をクリックします。

 

お問い合わせフォームのサイドバーへの設置

 

最後に、変更を保存しましょう! 

変更を保存する

 

サイドバーにこんな感じで表示されました。

お問い合わせフォームの例

設置が終わったら、ご自分のお問い合わせフォームからテスト送信をして、問題がないか確認してみてください。

 

 

これで完了です。お疲れ様でした!!

最後に

はてなブログにお問い合わせフォームを設置する方法をご紹介させていただきました。

はてなブログにアフィリエイト広告やGoogleアドセンスを載せる場合、お問い合わせフォームの設置が必要ですので、早めに設定してみてください。

説明が長くなってしまいましたが、この記事がブログを始めたばかりの方のお役に立てればとても嬉しいです。

読みづらい部分もあったと思いますが、ここまでお読みいただき、ありがとうございました。

コメント

  1. mamiko7 より:

    はじめまして!読者登録させていただきました、マミ子と申します。まつたろうさんのブログを参考に、先日Googleアドセンスに合格いたしました。今回のことをまとめた記事を書くのに、まつたろうさんのブログをリンクで貼らせていただけないでしょうか?とてもわかりやすく、パソコンがダメダメの私でも出来たので、是非紹介させて欲しいのです!よろしくお願いします。

  2. yumiko55 より:

    何回も見直しながら設定しました。とても分かりやすかったです、ありがとうございました。

  3. sirasum より:

    はじめまして。
    お問い合わせの設置の仕方を参考にさせていただきました。とても分かりやすく無事に設置することができました。Googleアドセンスにもう一度申請してみます。ありがとうございました。

タイトルとURLをコピーしました