表示制御クラス
本ページでは、表示制御クラスについて解説します。
問い合わせフォームには、
- 入力画面でのみ表示をしたいメッセージ
- 確認画面だけに表示をしたいメッセージ
があるものです。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> タグが使われていますが、表示制限クラスの指定ができるタグに制限はなく、任意のタグが使用できます。