連絡フォームの組込み

業務外

サイドバーの表示／非表示制御の試験で、暫定で連絡フォームのガジェットを組み込みましたが、これ良いね。今までは記事のコメント欄ぐらいしか、通信手段がありませんでした。記事に直接関連しないことを問い合わせる方法が無かったんですよね。

でも、ガジェットの連絡フォームは常時表示されているのが気に入らないです。特にモバイルバージョンは軽くしたいので、必要な時に連絡フォームを表示できるようにしたい。

連絡フォームを組み込むと
常時表示されるのが難点です

ページに連絡フォームを組み込んで、サイドバーにリンクを表示すれば良いはずです。Google先生に確認すると参考記事が見つかりました。

今回、半月ほどテーマのXMLをカストマイズし続けたことで、XMLの内容をある程度理解することができました。XML自体、３kStep程しかありませんので、上から下まで何回も眺めています。
参考記事はある程度、カストマイズの経験がある方向けの内容です。メインセクションの役割とか判らないと理解が苦しいはず。自分だと今回のカストマイズを始める前にこの参考記事を読んでも、たぶん意味が判らなかったでしょう。

手順は以下の6Stepです。詳細は参考記事をご覧ください。

1. レイアウト画面のメインセクションにガジェット追加ボタンを追加する。
2. メインセクションに連絡フォームガジェットを追加する。
3. 連絡フォーム用の静的ページを用意する。
4. 連絡フォーム呼び出し用のリンクガジェットを用意する。
5. 連絡フォームガジェットを連絡フォーム用静的ページのみ表示するように条件を追加する。
6. 連絡フォームの画面レイアウトを調整する。

因みにStep1は実は不要です。サイドバー等の他のセクションに連絡フォームを追加して、その後にメインセクションにドラッグ＆ドロップすることで代用できます。


Step5
連絡フォームのガジェットのソースです。3行目と30行目に条件文を加え、連絡フォーム用の静的ページの場合のみに連絡フォームを表示させています。
リテラルもデフォルトは「名前」、「メール」、「メッセージ」と味気ないので修正しています。

             <b:widget id='ContactForm2' locked='false' mobile='yes' title='お問い合わせ' type='ContactForm' version='1'>
              <b:includable id='main'>
<b:if cond='data:blog.url == &quot;https://nsfarmer.blogspot.com/p/blog-page_4.html&quot; or data:blog.url == &quot;https://nsfarmer.blogspot.com/p/blog-page_4.html?m=0&quot; or data:blog.url == &quot;https://nsfarmer.blogspot.com/p/blog-page_4.html?m=1&quot;'>
 <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        お名前 : <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        メールアドレス(必須) : <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        内容(必須) : <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <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 + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
            </b:widget>

Step6
画面レイアウトはデフォルトだと狭いので、幅を広げています。全体的に硬いデザインなので柔らかく変更しています。

<script> 
.ContactForm h2.title{
  font-weight: bold !important;
  font-family: arial, helvetica, sans-serif !important;
  font-size: large !important;
  color:white !important;
  background: dodgerblue;
  text-align: center;
  padding-top: 0.3em;
  padding-bottom: 0.2em;
  border-radius: 3px
}

.form{
  font-size:16px !important;
  margin-left:1em;
}

.contact-form-widget{
  max-width:initial !important;
}

.contact-form-name,
.contact-form-email,
.form textarea {
  max-width:initial !important;
  width:90% !important;
  height:initial !important;
  border: 1px solid #ddd;
  font-size:16px !important;
  padding:6px 8px !important;
  border-radius: 4px;
  box-shadow: 1px 1px 2px rgba(0,0,0,.1) inset;
}
</style>

こちらが出来上がったメールフォームです。
メールフォーム下の注意事項は、連絡フォーム用の静的ページに実装しています。

サイドバーにはメールフォームの
リンクのみが表示されます 

メールフォームのリンクを
クリックすると
メールフォームが表示されます

良い感じです。

感想と構想

連絡フォームの組み込みは、以下の記事を参考にさせていただきました。

Bloggerの連絡フォーム機能を使ってお問い合わせページを作る方法
https://toumaswitch.com/blogger-contact-form/