Blogger テンプレート

お問い合わせページを作ってみました

私的な備忘録ブログですが、お問い合わせページを作ってみました。

お問い合わせページを作る

参考にしたのはトーマスイッチさんのこの記事です。

Bloggerの連絡フォーム機能を使ってお問い合わせページを作る方法
Bloggerの長所は、何といっても「本当に無料ブログかよ」と突っ込みたくなるぐらい、充実した機能とカスタマイズ性にあります。
その高機能っぷりを示しているのが、「連絡フォーム」と言うコンタクトフォームを気軽にブログに設置できる、と言うことではないでしょうか？

自分でやってみたことの確認です。

お問い合わせページをサイドバーに作ってみる

サイドバーに入れてみました。その結果が下の画像です。

かなりバランスの悪い配置になりました。

お問い合わせページをメインカラムで作ってみる

メインカラムに移してみました。

バランスも良く、見た目もスッキリしたと思います。

赤線で囲ったバーはサイドバーのときにはありません。

これはメッセージ送信時、上のバーには送信失敗のエラーメッセージが、下のバーには送信に成功した場合のメッセージが表示されます。

失敗した場合のメッセージを確認しておりませんのでわかりませんが、送信に成功した場合は「メッセージの送信成功」といった内容が表示され、間もなく消えてしまいます。

送信ボタンの表記を変えてみる

トーマスイッチさんの方法そのままでは送信ボタンが「Send」になっています。このままでは何か落ち着かないので「送信」と表示されるようにしてみました。

 <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>

<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='送信'/>

赤い文字のところを「send」から「送信」に変えるだけです。

ここに何か気の利いたメッセージがあればなお良いのでしょうが、しばらくはこのままになりそうです。

この記事の続き

お問い合わせページその2：お問い合わせページにメッセージを付けてみました
お問い合わせページその3：お問い合わせページに背景色を足しました