それは標準のメールフォームを設置できる場所がサイドバーのガジェットだけだということです。
サイドバーだと必然的にお問合せフォームが小さくなってしまってなんかいまいちなんですよね。
そんな理由でいままでお問合せフォームは設置してなかったんですが、最近ちょっといいものを見つけたのでページのほうに設置してみました。
今日はそのやり方をご紹介します。
今回使用させていただいたのは、忍者ツールの「忍者メールフォーム」というやつです。
この前、「忍者おまとめボタン」を設置したときにもお世話になりました。
http://www.ninja.co.jp/
まず、忍者ツールズから「忍者メールフォーム」を選択します。
（ユーザー登録がまだの方は、先にユーザー登録を行ってください。）
次に表示された画面の下のほうにある「無料作成」というボタンを押します。
次に、ツールの名前、利用規約の同意などを行い、「作成する」というボタンを押します。
そうするとこのような画面が表示されるので、いま作成した「お問合せ１」というリンクをクリックします。
するとメールフォーム一覧という画面が表示されます。
画面の下のほうにdefaultというのが出来てますので、まずはその下にある「パーツ選択」をクリックします。
次に、パーツ選択の画面で、メールフォームの名前とかを入力するのですが、ここでスキンの選択を「自作CSSを使用する」にします。これを選ぶことであとから自由にカスタマイズすることができます。
そして画面を下にスクロールして、設置するパーツを選択します。
表示名や必須項目などを設定したら、最後に「上書き保存」ボタンを押します。
次に、同じ並びにある「デザイン」ボタンを押します。
すると、このようなCSSのひな型が表示されますので、これをコピーしてBloggerのテンプレートに貼り付けます。
ちなみに今回、CSSを以下のように設定しました。
/* 自分で追加したdiv */
#mailform_main {
width:100%;
padding:0px 20px 20px 20px;
}
/*メールフォームの説明文を囲っているタグのclass*/
#mailform1_top .explain {
margin: 0px 0px 20px 0px;
}
/*『name』パーツの入力項目のclass（inputなどの部分）*/
#mailform1_top .name_parts {
width:80%;
}
/*『mail』パーツの入力項目のclass（inputなどの部分）*/
#mailform1_top .mail_parts {
width:80%;
}
/*『title』パーツの入力項目のclass（inputなどの部分）*/
#mailform1_top .title_parts {
width:80%;
}
/*『textarea』パーツの入力項目のclass（inputなどの部分）*/
#mailform1_top .textarea_parts {
width:80%;
height:100px;
}
そして最後に、メールフォーム一覧画面に戻って、画面下にある「使用する」をクリックします。
するとこのようなタグが表示されますので、これをBloggerのページに貼り付けます。
今回は、以下のようにdivで囲っています。
<div id="mailform_main"> <!--ninja_style_mailform--> <script type="text/javascript" src="http://mf1.shinobi.jp/call/xxxxxxxxxxxxxxxxxx/mailform1.js" charset="utf-8"></script> <!--ninja_style_mailform--> </div>
実際に設置したところこのような感じになりました。
ほんとは「名前」とか「メールアドレス」の欄をもう少し幅を小さくしたかったのですが、やり方が分からなかったので全部同じ幅にしてしまいました。
興味がある方はぜひ試してみてください。
スポンサーリンク