【はてなブログ】アドセンスで使うお問い合わせフォームの作成(作り方)

f:id:marakayan72:20190929090934p:plain

 

グーグルアドセンスを申請する際にあると良いのがお問い合わせフォームです。

というのも、読者の方から指摘や希望をもらう際にコンタクトが取れるものってコメント欄かこのお問い合わせフォームなんですよね。

今回はそのお問い合わせフォームを「簡単」で「無料」に作れる方法をご紹介します。

 

 

アドセンス用お問い合わせフォームの作り方

お問い合わせフォームを作成するためにはGoogleが提供しているサービスを利用します。勿論、無料で利用できます。

大まかな流れは下記の通りとなります。

  1. リンクから開く
  2. 「フォーム」をテンプレートから選び、修正する
  3. 完成したらはてなブログに設置する
  4. メールが届くか確認する

早速順番に見ていきましょう。

リンクから開く

www.google.com

 

上記がGoogleフォームです。このリンクから先画面に飛んでいきましょう。

 

f:id:marakayan72:20190929093130p:plain

 

そうするとこの画面が表示されます。
個人で使用するため、左の「パーソナル」からGoogleフォームを使ってみるボタンを押してください。

フォームをテンプレートから選び、修正する

 

f:id:marakayan72:20190929093444p:plain

新しいフォームを作成という中に幾つかのテンプレートが並んでいますね。

この中から好きなフォームを選択してみましょう。個人的には「連絡先情報」がブログで利用したい情報と近いと思います。

そのため、「連絡先情報」を例として挙げていきますね。

f:id:marakayan72:20190929093725p:plain

 

名前・メールアドレス・住所・・・色々な質問が載っていますね。

これを修正していきます。

と言っても、ほぼ完成されているので個人的に修正する箇所は少ししか無いと思います。

1点修正するなら「住所」でしょうか。インターネットを利用して、住所まで相手に伝えることはなかなかありません。

今回のお問い合わせについて、こちらからその住所を利用して何かを送るなんてことはしないはずです。

だから、住所欄は消してしまうか、必須入力を消してしまいましょう。

任意項目とする(必須入力を消す)方法

非常に簡単です。まず消したいエリアをクリックしてください。そうすると以下のようにそのエリアが展開されます。

f:id:marakayan72:20190929094449p:plain

 

その後、青枠で囲った「必須」の箇所をぽちっと押してください。

最初緑となっていますが、グレーとなります。これで必須項目ではなくなります。

必須項目でなくなるということは、入れても入れなくてもどっちでもいいよ!という項目になるんですね。

エリアを消す場合

こちらも非常に簡単です。

下記画像の通り、ごみ箱の(青枠で囲ってある箇所)を押すだけです!

ね、簡単でしょう?間違えて押しても左下に元に戻すというボタンが出てくるので押せば良いです。

 

f:id:marakayan72:20190929095240p:plain

 

これだけで最低限のお問い合わせフォームが出来上がります。

後はそれぞれの見出しをお好みで修正したり、追加してみても良いですね。

件名欄を増やしてみるのもありです!

フォームを送信する

ここまで来たらこのフォームを送信しましょう。

右上にある送信ボタンを押してください。

 

f:id:marakayan72:20190929100250p:plain

 

上記の通りの画面が出てきます。

送信方法で<>を選択してください。そうするとHTMLを埋め込むというところのタグが表示されますね。コピーボタンを押してください。

これではてなブログに貼るための準備が出来ました。

 

アドセンス用お問い合わせフォームの設置方法

お問い合わせフォームをはてなブログに貼る際は以下の手順となります。

  1. はてなブログの管理画面に飛び、固定ページを押して編集
  2. HTML編集で先ほどコピーしたタグを貼り付ける
  3. デザインから固定ページをサイドバーに配置する

順番に見ていきましょう。

はてなブログの管理画面に飛び、固定ページを押して編集

まず、はてなブログの管理画面に行きます。

 

f:id:marakayan72:20190929100709p:plain

 

上記の通り固定ページのタブを押してください。

すると、ページを作るという画面が下記の通り表示されていますね。

f:id:marakayan72:20190929100930p:plain

テキストボックスに自分が作りたいURLを入力してください。

今回はサンプルとして「contact」と入力してページを作成することにします。

入力し終わったらページを作るボタンを押してください。

出来ればここでメモ帳か何かに今回作ったURLを控えておくと便利です。

HTML編集で先ほどコピーしたタグを貼り付ける

いつもの見慣れた編集画面が出てきましたね。

 

f:id:marakayan72:20190929101317p:plain

 

いつもと異なるのは左上に「固定ページ」と出ているところでしょう。

編集画面に来たらHTML編集タブを押し、先ほどコピーしたタグをそのまま貼り付けてください。

出来ましたか?そしたらプレビューを押し、そのお問い合わせフォームがきちんと表示されているか試してみてください。

表示されていればOKです!

それでは、今回作ったお問い合わせフォームをサイドバーに設置していきましょう。

また管理画面を開き、「デザイン」を押し、「スパナ」のボタンを押してください。

 

f:id:marakayan72:20190929101843p:plain

 

そうすると上記の通り一覧が左側に出てくるはずです。

そこからサイドバーボタンを押してください。

 

f:id:marakayan72:20190929102002p:plain

 

「当ブログについて」が以前作ったお問い合わせフォームに当たります。

今回は新規で作成するため、「モジュールを追加」を押します。

 

f:id:marakayan72:20190929102257p:plain

 

そしたら「リンク」を押しましょう。

事前に僕が入力しておきましたが、上記を参考にして入力してみてください。

【タイトル】・・・サイドバーに表示される際の名前

【リンクにあるタイトル】・・・リンクとして表示される名前

という形です。結構前にメモ帳に作成したURLを控えておいて、と書いたのですがこのためですね。作ったページURLを入力してください。

ここまで終わったら適用ボタンを押してください!

表示されているか、実際に届くか確認する

今までの手順でやればひとまず設置は大丈夫ですが、ミスはだれしもあるもの。最終確認をしましょう。

  1. 自分のブログのを開き、サイドバーにお問合せが表示されていますか?
  2. サイドバーのお問合せを押して、作ったページが表示されますか?
  3. お問合せの入力が思った通りになっていますか?
  4. 実際にお問合せを送信して自分に届きましたか?

上記を試してようやく完成です!実際に配置して終わりではなく、きちんと届くことを確認して終わりですからね!

 

いかがだったでしょうか。

これでお問い合わせフォームがあなたのページにも作られました。

もしかしたら業界の人からメールが届いたり・・・?

そうなるときが楽しみですね。

 

柿生スタジオのまらえもんでした。