blogger ガジェットの連絡フォームをページで表示する

みんながやっているように、Bloggerの連絡フォームをサイドバーではなくページで表示したいのに、なぜかできなかった。（たぶん私のテーマに問題があるのかも。。）で、あきらめていたんだけど、再度ググって見つけた別の方法でやってみたらできた。どうもありがとう！

---

1. 連絡フォーム ガジェットを追加する
2. テーマ編集
3. 新しいページを作成
4. CSS編集

---

1. 連絡フォーム ガジェットを追加する

Bloggerの管理画面「レイアウト」のページで「ガジェットを追加」をクリックしてリストの中から『連絡フォーム』を選んで追加する。

---

2. テーマを編集

（１）テーマのバックアップを取る

（２）テーマを編集する。上部の『ウィジェットへ移動』をクリックし『ContactForm1』をクリックする。この箇所↓が表示されるので・・・

<b:widget id='ContactForm1' locked='false' title='連絡フォーム' type='ContactForm' version='1'>

 「locked='false'」を「locked='true'」へと変更する。

（３）続けて、すぐ下のこの部分↓を確認し、テーマの行番号の右側にある「▶︎」をクリックして隠れている部分を展開して・・・

<b:includable id='main'>

 その下側の以下の部分（↓）を全て削除する。

<b:if cond='data:title != ""'>

  〜〜（中略）〜〜

<b:include name='quickedit'/>

 こんなふうになる。↓（過程の画像を撮っておくのを忘れた。。）

---

3. 新しいページの作成

（１）新しいページを作成し、以下をまるっとコピペする。

<div class="widget contact-form" id='ContactForm1'>
<div class='contact-form-widget'>
<div class='form'>
<!-- FORM -->
<form name='contact-form'>
<!-- NAME -->
<p style="margin-bottom:3px;">
＊お名前：</p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' placeholder='お名前を入力してください。' value=''/>
<!-- EMAIL -->
<p style="margin-top:10px; margin-bottom:3px;">
＊メールアドレス <span style="color:#ff0000;"> (*必須)</span>：</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' placeholder='メールアドレスを入力してください。' value=''/>
<!-- MESSAGE -->
<p style="margin-top:12px; margin-bottom:3px;">
＊メッセージ <span style="color:#ff0000;"> (*必須)</span>：</p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='10' placeholder='メッセージを入力してください。' value=''></textarea>
<!-- BUTTON -->
<input class='contact-form-button contact-form-button-submit contact-form-reset-button' type='reset' value='消去'/> <input class='contact-form-button contact-form-button-submit contact-form-send-button' id='ContactForm1_contact-form-submit' type='button' value='送信'/>

<!-- VALIDATION -->
<div style='text-align: center; max-width: 250px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'>
</p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'>
</p>
</div>
</form>
</div>
</div>
</div>

＊ページのパーマリンク＊

本来、ページではパーマリンクをカスタマイズすることができない。が、新規にページを作る際、一旦タイトル欄に英語を入れて公開すると、その英語がURLになる。なので、この連絡フォームの場合は、最初タイトルを「contact」として保存すればブログURLは番号ではなく「https://サイトアドレス/contact.html」となるので、あとでタイトルを「問い合わせ」と変更すればよい。
そういうことが気になるなら・・・という話だけどね。

---

4. CSS編集

（１）再びテーマのHTMLを編集する。この記述（↓）を検索して・・・

]]></b:skin>

（２）その上部に以下を挿入する。

/* 連絡フォーム---------------------- */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
/*border-radius: 5px;*/
}

.contact-form-name,
.contact-form-email,
.contact-form-email-message {
max-width: 100%;
margin-bottom: 10px;
margin-left: 5px;
}

.contact-form-name,
.contact-form-email {
width: 50%;
}

.contact-form-email-message {
width: 100%;
}

.contact-form-button-submit {
background-color: rgb(193, 193, 193);
background-image: -moz-linear-gradient(center top , rgb(77, 144, 254), rgb(71, 135, 237));
border-color: rgb(48, 121, 237);
color: rgb(255, 255, 255);
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

.contact-form-button:hover {
text-decoration: none;
}

（３）最後に表示と動作を確認するべし。

 こんなふうに出来あがった。

ところで、レイアウトのページに連絡フォームのガジェットはこんなふうに存在しているけれど、このままにしておけばいいんだと思う。（たぶん、きっと...？）

---

 ＊お世話になったサイトはこちら↓ どうもありがとうございました！
  Saskwave「Bloggerの「連絡フォーム」ガジェットをページの方に移植する」

---

Cat / Infomastern
連絡フォームがサイドバーにあるのはなんだかなぁ..と思ってたけど、多く出回っている方法でやってみてもうまくいかないし...、どうせメールが来ることもないだろうし、まぁいいかとあきらめていた。ところが思いがけずメールが来て...使う人がいるなら見てくれがよい方がいいかもね..と思い、再度ググってやってみたらできた。どーでもいいことと思っていたのに、なんだか嬉しい。