T.Takahashi bloggerで固定ページにbootstrapでカッコいい問い合わせフォームを設置する 2017-06-23T05:02:29Z
0;ゼロからはじめる!

bloggerで固定ページにbootstrapでカッコいい問い合わせフォームを設置する

1.まずは、準備!レイアウトのメインに「ガジェットの追加」を表示させる。

1-1.初めに①に「ガジェットを追加」項目を表示させるためにカスタマイズを行う
1-2.テーマの「HTMLの編集」を開く
1-3.「ウィジェットへ移動」から「Blog1」を選択する。

編集画面上で

<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>

の箇所へ移動する。

移動したら、すぐ上の


↓↓このコード↓↓
<b:section class='main' id='main' name='Main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>


コードの最後「~ showaddelement='no'」を「yes」に変更する


↓↓このコード↓↓ showaddelement='no'から'yes'に変更
<b:section class='main' id='main' name='Main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>

変更されると下記のように追加される。もし、表示されない場合は、リロードしたりログインしなおすと表示される。

2.「連絡フォーム」を追加する

2-1.テーマのメインの「ガジェットを追加」から「その他のガジェット」→「連絡フォーム」を選択する


「連絡フォームウィジェットを設定」ウィンドが開くのでタイトルを(今回は)「お問い合わせ」とする。

2-2.連絡フォームを追加した状態だと各記事に表示されたままの状態となる

各記事を見てみると下記のように記事ページに追加された状態になっている。項目3と4で固定ページへ表示させるようにする

3.追加した連絡フォームを固定ページに表示させる

3-1.お問い合わせの固定ページを作成する

「ページ」の「新しいページ」を選択し固定ページを作成する。

3-2.コメントを表示させてる場合は非表示にする。

固定ページ編集画面の左メニューから「ページ設定」の「閲覧者のコメント」を「許可しない(既存のバックリンクを表示しない)」にする。これを設定しておかないと、お問い合わせのページにコメントが表示されてしまう。



3-3.作った固定ページのURLを控えておく

後で使うので、控えておこう!

4.「連絡フォームを」固定ページへ表示させる

4-1.1箇所目「]]></b:skin>」以下の変更

「テーマ」の「HTMLの編集」からコードを修正する。


]]></b:skin>

を探します。見つけたら下記のように変更します。


]]></b:skin>

<b:if cond='data:blog.url == "つくった固定ページURLをコピーする"'>
<style>
#Blog1{
display:none;
}
</style>
</b:if>
4-2.2箇所目「ContactForm1」以下にコードを追加

「ウィジェットへ移動」から「ContactForm1」を選択する。



下記の場所へ移動するのでハイライトした2行目、3行目の間11行目と12行目の間に


<b:widget id='ContactForm1' locked='false' title='お問い合わせ' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>


(中略 30行くらいある)


<b:include name='quickedit'/>
</b:includable>
</b:widget>


下記の2箇所にコードを追加する


<b:widget id='ContactForm1' locked='false' title='お問い合わせ' type='ContactForm'>
<b:includable id='main'>
<!-- 追加するコード-->
<b:if cond='data:blog.url == &quot;つくった固定ページURLをコピーする&quot;'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>


(中略 30行くらいある)


<b:include name='quickedit'/>
<!-- 追加するコード-->
</b:if>
</b:includable>
</b:widget>
4-3.固定ページを表示させて確認をする

項目3-3でつくった固定ページを表示させて下記のように表示されえれば良い。

5.固定ページを表示させて確認をする

3-1.お問い合わせの固定ページを作成する

「ページ」の「新しいページ」を選択し固定ページを作成する。

6.bootstrapを使い格好よくする

6-1.bootstrapの導入
6-2.「ContactForm1」連絡フォームの横幅のリセット

リセットするために下記のコードを追加する。

まず、下記のコードを探す。


]]></b:skin>

見つけたら下記のCSSを追加する。


.contact-form-widget {
max-width:initial !important;
}
]]></b:skin>
6-2.bootstrapを使い「連絡フォーム」を修正する

「テーマ」の「ウィジェットへ移動」から「ContactForm1」へ移動



下記の場所が表示されることを確認(項目4-2で修正した場所)


<b:widget id='ContactForm1' locked='false' title='お問い合わせ' type='ContactForm'>
<b:includable id='main'>
<!-- 項目4-2で追加したコード-->
<b:if cond='data:blog.url == &quot;つくった固定ページURLをコピーする&quot;'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>


(中略 30行くらいある)


<b:include name='quickedit'/>
<!-- 項目4-2で追加したコード-->
</b:if>
</b:includable>
</b:widget>


上記の部分を


<b:widget id='ContactForm1' locked='false' title='お問い合わせ' type='ContactForm'>
<b:includable id='main'>
<!-- 変更を忘れずに -->
<b:if cond='data:blog.url == &quot;つくった固定ページURLをコピーする&quot;'>
<b:if cond='data:title != &quot;&quot;'>
<!--タイトル-->
<div class="alert alert-info" role="alert"><h2 class="text-center"><data:title/></h2></div>
</b:if>

<div class='contact-form-widget'>
<div class='form'>
<form class='form-horizontal' name='contact-form'>

<!-- 名前記入欄 -->
<div class='form-group'>
<label class='control-label col-xs-3 col-sm-2' for="InputText"><p class="text-left h4"><data:contactFormNameMsg/></p></label>
<div class='col-xs-9 col-sm-10'>
<input class='form-control' id="InputText" placeholder='名前' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
</div>
</div>

<!-- メール記入欄 -->
<div class='form-group'>
<label class='control-label col-xs-3 col-sm-2' for="InputEmail"><p class="text-left h4"><data:contactFormEmailMsg/><span style='font-weight: bolder;'>*</span></p></label>
<div class='col-xs-9 col-sm-10'>
<input class='form-control' id="InputEmail" placeholder='e-mail' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
</div>
</div>

<!-- メッセージ記入欄 -->
<div class='form-group'>
<label class='control-label col-xs-12 col-sm-12' for="InputTextarea"><p class="text-left h4"><data:contactFormMessageMsg/><span style='font-weight: bolder;'>*</span></p></label>
<div class='col-xs-12 col-sm-12'>
<textarea class='form-control' cols='25' id="InputText" placeholder='メッセージを記入' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='10'/>
</div>
</div>

<!-- 送信ボタン -->
<p/>
<input class='btn btn-primary btn-lg col-xs-offset-4 col-xs-4' id='ContactForm1_contact-form-submit' type='button' value='送信する'/>
<p/>

<!-- システムメッセージ欄 -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message&quot;'/>
</div>
</form>
</div><!-- end class=contact-form-widge -->
</div><!-- end class=form -->
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
6-3.確認をする

固定ページを表示させて下記のように表示されえれば良い。

スポンサーリンク

0 件のコメント :

コメントを投稿