応用編2 - 表示制御クラス

本ページでは、表示制御クラスについて解説します。

問い合わせフォームには、

• 入力画面でのみ表示をしたいメッセージ
• 確認画面だけに表示をしたいメッセージ

があるものです。espar form では、画面ごとのメッセージ表示・非表示の切り替えにも対応しています。

 

表示制御クラスの指定

入力画面でのみ表示したいのか、確認画面が表示された時に表示したいのか、にあわせてクラス指定を行います。

<p class="[フォームID]-m-input">お問い合せ事項は以下のフォームから御連絡下さい。担当の者が24時間以内にご連絡差し上げます。</p>
<p class="[フォームID]-m-confirm">内容に問題がないかどうか確認し、送信ボタンを押して下さい。</p>

例えば管理画面上でのフォームIDが espf である場合、以下のようになります。

<p class="espf-m-input">お問い合せ事項は以下のフォームから御連絡下さい。担当の者が24時間以内にご連絡差し上げます。</p>
<p class="espf-m-confirm">内容に問題がないかどうか確認し、送信ボタンを押して下さい。</p>

前者は入力画面でのみ、後者は確認画面でのみ表示されます。入力画面では後者は表示されず、確認画面では前者は表示されません。メッセージの表示/非表示の制御を espar form が自動的に行います。

クラス	必須	説明
[フォームID]-m-input		入力画面でのみ表示する項目。確認画面では非表示となる
[フォームID]-m-confirm		確認画面でのみ表示する項目。入力画面では非表示となる

入力画面でも確認画面でも表示しておきたい要素には、表示制御クラスを指定しないで下さい。なお、例では <p> タグが使われていますが、表示制限クラスの指定ができるタグに制限はなく、任意のタグが使用できます。