Bloggerで固定ページに連絡フォームを設置する方法
メインブログのほうで紹介しました。そちらのほうを参考にしてください。
「Bloggerで固定ページに連絡フォームを設置したよー」って記事を書いたら、そこそこPVがあったようです。
みんな困っているんですね。僕はBlogger仲間が増えてほしいので、今回はその解説をしようと思います。
と言っても、上の海外ブログの通りにやれば設置出来ます。
僕が紹介するのは簡単な翻訳＋αと、日本語表記する部分やカスタマイズについて。
それでは、解説していきます。
１，連絡フォームガジェットを入れて、動作するか確認してね。
動かないと意味ないからね。実際にテキストを送信しようぜ。
２，動いたんなら、連絡フォームガジェットを削除しろ！
ガジェット入ったまんまだと、そちらの設定が優先されるから、これから入れるコードの一部が反映されなくなるよ。
３，自分のBloggerIDをメモしとけ！
https://www.blogger.com/blogger.g?blogID=数字#xxxxx
管理画面のURLは、↑のようになっているはずだ。数字部分をコピーして、メモ帳とかに置いとけ。使うから。
４，固定ページを作成しよう
これからスクリプトコード貼るから、固定ページ作っとこうな。
タイトルの英数字部分がURLに反映されるから、最初につけるタイトルは英数字のみにしろ。
タイトルは「contact」とか「mail-form」がオススメだな。一回でも公開したんなら、後は好きなようにタイトルいじってもいいぞ。「お問い合わせ」のが分かりやすいしな。
そんで、HTML編集モードにして、リンク先に書いてあるコードを貼り付けろ。赤字の部分を、さっきメモった数字に置き換えれば、完成だ。
５，動作確認をしろ
固定ページに必要事項とか、色々記入した後は動作確認だ。ちゃんと固定ページの連絡フォームが機能するか確認しろ。できたか、よかったな！
仕様は連絡フォームガジェットと同じだから、変なことは気にしなくていいぞ。
----------------------------------------
ここからは、日本語化の話です。
//The below message 5 Strings can also be edited
の下にある
var contactFormxxxxxxxxMsg ='○○○○';
という文字列たちは、エラーや送信状況をお知らせしてくれるものです。日本語にしないと意味がわからないので、直しましょう。
ちなみに、文章の意味は……
'Sending...' → 「送信中...」
'Your message has been sent.' → 「メッセージを送信しました」
'Message could not be sent. Please try again later.' → 「メッセージを送信できませんでした」
'Message field cannot be empty.' → 「内容がありません」
'A valid email is required. → 「メールアドレスが正しくありません」
これを直した後は、テキストボックス周辺の日本語化。
こんなもん。
Your Name → 「お名前」
Your Email → 「メールアドレス」
(required) → 「必須」
Your Message → 「内容」
Send → 「送信」
Sendはボタンタグなので、value='Send'を探して修正しましょう。
----------------------------------------
次はCSSですね。あのままだと見た目がダサすぎるので。
↑のも固定ページに連絡フォームガジェットを入れる方法が書かれていますが、やり方が違うのでスルー。
4番のみ解説します。
４，テンプレートを編集して、 ]]></b:skin> の真上に以下のCSSをコピペしろ
.contact-form-button-submit { の部分がボタンの属性。固定ページにボタンを入れると小さく見えるから、widthやmax-widthを40%くらいにすればいいんじゃないかな。
----------------------------------------
後はテーブルタグ・センタータグ・改行タグで、固定ページに貼った連絡フォームを、綺麗に並べましょう。
完成したのがこちら！
