Bloggerの連絡フォーム機能を使ってお問い合わせページを作る方法

   

blogger 連絡フォーム

Bloggerの長所は、何といっても「本当に無料ブログかよ」と突っ込みたくなるぐらい、充実した機能とカスタマイズ性にあります。

その高機能っぷりを示しているのが、「連絡フォーム」と言うコンタクトフォームを気軽にブログに設置できる、と言うことではないでしょうか?

 しかし、Bloggerの連絡フォームはサイドバーには設置しやすくなっているものの、サイドバーに付けると「ここじゃない感」がハンパではないのは、決して揺らぐことはない事実です。

ボクも結構このことで悩んでいたのですが、最近Bloggerの機能だけでお問い合わせページを作る方法を思いつき、カスタマイズに成功したので、その全手法をシェアしたいと思います。

では、早速いきましょう。


スポンサーリンク

コンタクトフォーム設置の準備

まずは、コンタクトフォームを設置するための準備をします。

管理画面にログインした後に、左サイドバーの「テンプレート」をクリックし、その後「HTMLの編集」でテンプレート画面に行きましょう。 今度は、「ウィジェットへ移動」をクリックして「Blog1」を選択します。

Blog1を選択する

 

ここまで手順を進めると、「Blog1」のところまでテンプレート画面がジャンプします。そして、ジャンプした位置からちょっと上へスクロールすると、以下の様なコードを発見できます。

上のコードの1行目にある「<b:section class~>」と言うコードの中に、「showaddelement="no"」と言う記述がある場合は、「no」の部分を「yes」に変更しましょう。

また、最初から「showaddelement="yes"」となっていたり、そもそも、そのコード自体がないと言う人は、そのままでOKです。

(showaddelementの記述がなければ、自動的に「yes」に設定されます)

補足:showaddelementとは?

ここで補足ですが、「showaddelement」とは、英語で分かりやすく書くと、「show add element」。つまり、「『ガジェットを追加』ボタンを表示するかどうか」を聞いている要素です。

yesにするとガジェットを追加が表示される

今回の様に「yes」にしてあげると、「レイアウト」画面でウィジェットを追加できるようになります。

 

連絡フォームを追加する

ここで終えると、今度は左サイドバーの「レイアウト」をクリックし、「ガジェットを追加」をしましょう。

ガジェットを追加

「その他のガジェット」の項目の最初の方に「連絡フォーム」があるので、「+ボタン」をクリック。

連絡フォーム

その後、ガジェットのタイトルを変更できるので、「お問い合わせ」とか「コンタクトフォーム」とか、自分がしっくり来るタイトルにしましょう。

連絡フォームを固定ページに表示させるようにする

現段階では、ブログの全記事やカテゴリーページに連絡フォームが設置されていますが、これを連絡フォーム用の固定ページだけに表示させるように、カスタマイズしていきましょう。

まずは、その準備として、左サイドバーの「ページ」をクリックし、さらに「新しいページ」をクリックします。

新しいページをクリック

固定ページの編集画面が表示されたら、タイトルを記入しましょう。また、本文中には何も書かなくて良いです。

また、お問い合わせページにコメントを表示させたくない場合は、右側に「オプション」と言う項目があるので、そこをクリックします。 そして、「閲覧者のコメント」の項目を「許可しない」にすればOKです。

些細なことですが、お問い合わせページにコメントがあったら、何だかカッコ悪いんで。

コメントを許可しない

ここまで行くと、固定ページの完成です。後々のカスタマイズをやりやすくするために、先ほど作った固定ページ(下画像では「お問い合わせ」)にカーソルを近づけます。 すると、「表示」と言う項目が現れるので、それをクリック。

表示をクリック

そしたら、先ほど作った固定ページにジャンプするので、その固定ページのURLをメモ帳か何かに、コピペしておいてメモして下さい。このURLは、後で使います。

固定ページのURLをメモ

 

「連絡フォーム」をお問い合わせページのみに表示させる

まずは、テンプレートの編集画面に行き、「ウィジェットへ移動」→「ContactForm1」をクリックします。

contactform1をクリック

そして、ContactForm1のコードの先頭を見てみると、以下のようになっていることが分かります。

なので、これを以下のように変えてあげます。

先ほど固定ページのURLをメモしましたが、そのURLを「さっきコピペした固定ページのURL」を削除してコピペして下さい。

1つ注意なのが、Bloggerの初期ドメインを使っている場合は、URLの「blogspot.jp」の部分を「blogspot.com」に変更してコピペして下さい。(独自ドメインの場合は、この手順は不要)

例えば、URLが「http://example.blogspot.jp/p/blog-page_27.html」の場合は、「http://example.blogspot.com/p/blog-page_27.html」に変えればOKです。 これで、お問い合わせページの完成です。

お問い合わせページへのリンクを作る

ここまで来たら、今度はお問い合わせページに飛ぶためのリンクを作っておきましょう。

おすすめの方法が、ヘッダーナビを作ってその中に「お問い合わせページ」へのリンクを貼り付ける、と言う方法。

ページを追加

とは言っても設置は簡単で、先ほど連絡フォームを設置したみたいに「レイアウト」から「ページ」と言うガジェットをヘッダー部分に追加するだけです。

「ページ」を追加すると、下の画像の様な編集画面になるので、先ほど作ったお問い合わせページの部分にチェックを入れます。

あとはカテゴリーページのリンクを貼ったりとかできるので、そこはお好みです。

blogger-contact10

 

お問い合わせページのデザインをカスタマイズ

以上の手順を全て終わらせると、一応お問い合わせフォームの完成になりますが、何だかデザインに「これじゃない感」がものすごく漂っているので、カッコよくしていきましょう。

まずは、テンプレートの編集画面に行き、以下のコードを見つけて下さい。

見つけたら、上のコードを削除して、下のコードを元の場所にコピペして下さい。

これも先ほどのコードと同様に、「さっきコピペした固定ページのURL」の部分を固定ページのURLに変更して下さい。 これで、超すっきりとしたお問い合わせページを作る事ができました。

blogger-contact12

 

補足:お問い合わせページから上手くメールが届かない時の対処法

もし、「お問い合わせページを作って試しに「送信」ボタンを押したんだけど、メールが届かない」と言う人は、以下の方法を試して下さい。

Bloggerにログインした時に、画面右上に自分のアカウント名が表示されていますが、そこにカーソルを合わせて、「Bloggerプロフィール」をクリックします。

blogger-contact13

その後、人によっては「プロフィールが表示されません」と言うページが表示されますが、それに構わず「プロフィールを公開」をクリック。

blogger-contact14

ここまで来ると、プロフィールの設定画面にたどり着きますが、その中に「ユーザー情報」と言う項目があります。

blogger-contact15

で、そこの「読者があなたへの連絡に試用するメールアドレス」と言う項目があるのですが、そのメールアドレスにお問い合わせフォームのメールが届いているのです。

なので、ここに書かれているメールアドレスをチェックすると、きちんとお問い合わせメールが届いているはず。

基本的にBloggerを使っている人は、Gmailを頻繁に利用していると思うので、自分のGmailのアドレスに変更することをオススメします。

スポンサーリンク

この記事をシェアする

こちらの記事もおすすめ!