2019/05/20

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

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





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

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



2. テーマを編集

(1)テーマのバックアップを取る

(2)テーマを編集する。上部の『ウィジェットへ移動』をクリックし『ContactForm1』をクリックする。この箇所↓が表示されるので・・・
<b:widget id='ContactForm1' locked='false' title='連絡フォーム' type='ContactForm' version='1'>
 「locked='false'」を「locked='true'」へと変更する。

(3)続けて、すぐ下のこの部分↓を確認し、テーマの行番号の右側にある「▶︎」をクリックして隠れている部分を展開して・・・
<b:includable id='main'>


 その下側の以下の部分(↓)を全て削除する。
<b:if cond='data:title != ""'>

  〜〜(中略)〜〜

<b:include name='quickedit'/>


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

Blogger連絡フォームをページで表示する

ページTOPにもどる



3. 新しいページの作成

(1)新しいページを作成し、以下をまるっとコピペする。

<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」となるので、あとでタイトルを「問い合わせ」と変更すればよい。
そういうことが気になるなら・・・という話だけどね。

ページTOPにもどる



4. CSS編集

(1)再びテーマのHTMLを編集する。この記述(↓)を検索して・・・
]]></b:skin>


(2)その上部に以下を挿入する。
/* 連絡フォーム---------------------- */
.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;
}


(3)最後に表示と動作を確認するべし。

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

Blogger連絡フォームをページで表示する



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

Blogger連絡フォームをページで表示する





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



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


- - -《 広 告 》- - -


- - 感想をどうぞ! - - 《 Reaction Buttons

  にほんブログ村 ライフスタイルブログ 一人暮らしへ
Categories: ,

- - - - -《 広 告 》- - - - -


0 コメント: