読者です 読者をやめる 読者になる 読者になる

ブログ運営日記@クロスグリ

web小説紹介ブログ運営にて起きたことや、考えたことをまとめるよ。

Bloggerで固定ページに連絡フォームを設置する方法

気に入った記事 Bloggerカスタマイズ

pointwrite.blogspot.jp

 

メインブログのほうで紹介しました。そちらのほうを参考にしてください。

 

Bloggerで固定ページに連絡フォームを設置したよー」って記事を書いたら、そこそこPVがあったようです。

 みんな困っているんですね。僕はBlogger仲間が増えてほしいので、今回はその解説をしようと思います。

 

www.bloggerplugins.org

 

 と言っても、上の海外ブログの通りにやれば設置出来ます。

 僕が紹介するのは簡単な翻訳+αと、日本語表記する部分やカスタマイズについて。

 それでは、解説していきます。

 

 

1,連絡フォームガジェットを入れて、動作するか確認してね。

 動かないと意味ないからね。実際にテキストを送信しようぜ。

 

2,動いたんなら、連絡フォームガジェットを削除しろ!

 ガジェット入ったまんまだと、そちらの設定が優先されるから、これから入れるコードの一部が反映されなくなるよ。

 

3,自分のBloggerIDをメモしとけ!

https://www.blogger.com/blogger.g?blogID=数字#xxxxx

 

 管理画面のURLは、↑のようになっているはずだ。数字部分をコピーして、メモ帳とかに置いとけ。使うから。

 

4,固定ページを作成しよう

 これからスクリプトコード貼るから、固定ページ作っとこうな。

 タイトルの英数字部分がURLに反映されるから、最初につけるタイトルは英数字のみにしろ。

 タイトルは「contact」とか「mail-form」がオススメだな。一回でも公開したんなら、後は好きなようにタイトルいじってもいいぞ。「お問い合わせ」のが分かりやすいしな。

 

 そんで、HTML編集モードにして、リンク先に書いてあるコードを貼り付けろ。赤字の部分を、さっきメモった数字に置き換えれば、完成だ。

 

5,動作確認をしろ

 固定ページに必要事項とか、色々記入した後は動作確認だ。ちゃんと固定ページの連絡フォームが機能するか確認しろ。できたか、よかったな!

 仕様は連絡フォームガジェットと同じだから、変なことは気にしなくていいぞ。

----------------------------------------

 ここからは、日本語化の話です。

//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ですね。あのままだと見た目がダサすぎるので。

 

icanbuildablog.com

 

 ↑のも固定ページに連絡フォームガジェットを入れる方法が書かれていますが、やり方が違うのでスルー。

 4番のみ解説します。

 

4,テンプレートを編集して、 ]]></b:skin> の真上に以下のCSSをコピペしろ

 .contact-form-button-submit { の部分がボタンの属性。固定ページにボタンを入れると小さく見えるから、widthやmax-widthを40%くらいにすればいいんじゃないかな。

----------------------------------------

 後はテーブルタグ・センタータグ・改行タグで、固定ページに貼った連絡フォームを、綺麗に並べましょう。

 完成したのがこちら!

 

f:id:ribes_nigrum:20160916025057p:plain