フォームのCSS情報を知りたい
回答
本記事では、b→dashのフォームページ作成機能で使われている、画面別のCSS情報とHTML構造について紹介しています。フォームのデザインをカスタマイズする際の参照情報としてご活用ください。
フォームには下記の5種類の画面があり、それぞれの構成要素のクラス名やHTML構造を確認できます。
1. 入力画面(主画面)
2. 確認画面
3. 完了画面
4. 非公開画面
5. エラー画面
各画面の詳細は、以下をご参照ください。
1. 入力画面
「入力画面」は、フォームでユーザーが質問項目に回答するメイン画面です。各質問項目や機能には共通のクラス名が割り当てられており、フォームのデザインカスタマイズ時にCSSセレクタとして利用できます。
各要素のクラス名一覧
フォームの各機能や各質問項目の要素名は共通です。下記の画像の❶〜❺に対応する要素のクラス名と説明は、画像の下の表をご参照ください。
# |
説明 |
要素名(クラス名) |
役割 |
❶ |
質問タイトル | page-item-label |
フォーム項目の見出し(<dt>) |
❷ |
必須項目 | page-item-required |
必須を示すアスタリスク(*) |
❸ |
回答欄全体 | page-item-info |
入力フィールドを包含(<dd>) |
❹ |
エラーメッセージ | page-item-message |
検証エラー表示 |
❺ |
備考欄 | page-item-description |
補足説明テキスト |
※「必須項目」として設定した質問は、「質問タイトル」要素に下記のタグが挿入されます
<span class="page-item-required">*</span>※ 上記の主要5要素以外に、下記の補助的なクラス名も利用されています
要素 |
クラス名 |
質問項目全体(1問分の<dl>) |
page-item |
| レイアウト(縦並び/横並び) | page-item-layout-v / page-item-layout-h |
| チェックボックス形式の質問 | form-item-checkbox |
| ラジオボタン形式の質問 | form-item-radio |
定型質問のHTMLコード例
「定型質問」(姓/名/氏名/電話番号/メールアドレスなど、b→dashが事前に用意しているプリセット項目)は、共通のHTML構造でレンダリングされます。下記は基本パターンの例です。
<dl id="bdash_form_f_XXXX" class="page-item page-item-layout-h">
<dt class="page-item-label">
質問タイトル
<span class="page-item-required">*</span>
</dt>
<dd class="page-item-info">
<input type="text" name="bdash_form_data[f_XXXX]" class="form-control">
<div class="page-item-message"></div>
<div class="page-item-description"></div>
</dd>
</dl>※「カレンダー」「都道府県」「郵便番号」「同意書」など一部のプリセット項目は個別の実装(独自タグ/属性)を持ちます
カスタム質問のHTMLコード例
「カスタム質問」(1行テキスト/カスタムラジオボタン/マトリクスなど、自由に質問内容を設定できる質問)は、質問形式によってHTML構造が異なります。下記の構造で出力されます。
カスタム質問の形式 |
使用される代表的なタグ/クラス |
| 1行テキスト / 複数行テキスト | <input type="text"> / <textarea> |
| カスタムプルダウン | <select> + <option> |
| カスタムチェックボックス | <input type="checkbox"> + form-item-checkbox |
| カスタムラジオボタン | <input type="radio"> + form-item-radio |
| マトリクス(ラジオ/チェックボックス) | <table>構造 + form-item-matrix |
| スコア | form-item-score |
その他の部分のCSS情報
フォームの「ヘッダー」「フッター」「送信ボタン」など、質問項目以外の構成要素のCSS情報は下記の通りです。
機能 |
HTMLタグ / クラス |
| ヘッダー | <header>〜</header> |
| フッター | <footer>〜</footer> |
| フォーム本体ラッパー | <div class="bd-pageset-parent"> |
| 送信ボタンの親要素 | <div class="bdash_form_button_input"> |
| 戻るボタン | <button class="bdash_form_back_button"> |
| 送信ボタン | <input type="submit" class="bdash_form_commit_button"> |
2. 確認画面
「確認画面」は、入力画面で「送信」ボタンをクリックした後に表示される画面です。確認画面の質問項目のHTMLコードは、入力画面と同じ構造です(クラス名: page-item / page-item-label / page-item-infoなど)。
入力画面と異なるのは、回答欄が編集不可で表示専用になっている点と、「戻る」ボタン+「送信」ボタンが追加される点です。
<div class="bd-pageset-parent">
<dl id="bdash_form_f_XXXX" class="page-item page-item-layout-v">
<dt class="page-item-label">
質問タイトル
<span class="page-item-required">*</span>
</dt>
<dd class="page-item-info">
回答内容
<div class="page-item-description">備考欄入力内容</div>
</dd>
</dl>
<!-- 質問項目が続く -->
<div class="bdash_form_button_confirm">
<button class="bdash_form_back_button">戻る</button>
<input type="submit" value="送信" class="bdash_form_commit_button">
</div>
</div>※ 質問数に応じて<dl>要素が繰り返されます
チェックボックス選択時は<dl class="page-item page-item-layout-v form-item-checkbox">、ラジオボタン選択時はform-item-radioが付与されます
3. 完了画面
「完了画面」は、確認画面で「送信」ボタンをクリックした後に表示される画面です。フォーム完了の感謝メッセージや次のアクションへの案内を表示します。
<body class="bdash-form-submit">
<div class="container" style="word-break: break-word; max-width: 100%;">
<div class="bdash_form">
<div class="bd-pageset-header"></div>
<div class="bd-pageset-body">
<div class="bd-pageset-content-wrap">
<div class="bd-pageset-parent">
<div style="text-align: center;">
<p><span style="font-size: 30px;">セミナー応募フォーム</span></p>
</div>
<div style="text-align: center;">
セミナーにご応募いただき、誠にありがとうございました。<br>
詳細はご指定のメールアドレス宛にお届けさせていただきます。
</div>
</div>
</div>
</div>
<div class="bd-pageset-footer"></div>
</div>
</div>
</body>※ <body class="bdash-form-submit">で完了画面であることを表現します
CMS編集画面では、本文の<div class="bd-pageset-content-wrap">内のテキスト/スタイルを編集できます
4. 非公開画面
「非公開画面」は、フォームの閲覧上限に達した場合や公開停止中などに表示される画面です。非公開である旨のメッセージを表示します。
<div class="bd-pageset-content-wrap">
<div class="bd-pageset-parent">
<div style="text-align: center;">
<span style="color: #666666;">
ご覧いただいているフォーム入力画面は、現在非公開となっております。
</span>
<br>
<span style="color: #666666;">
誠に恐れ入りますが、本フォーム作成者様に直接お問い合わせいただきますよう、
</span>
</div>
<div style="text-align: center;">
<span style="color: #666666;">よろしくお願い申し上げます。</span>
</div>
</div>
</div>※ 文字色は#666666(グレー)で表示され、目立たないトーンになっています
5. エラー画面
「エラー画面」は、フォームの公開期間が終了した場合や、削除済みフォームのURLにアクセスした場合に表示される画面です。アクセスできない旨のメッセージを表示します。
<div class="bd-pageset-content-wrap">
<div class="bd-pageset-parent">
<div style="text-align: center;">
<span style="color: #666666;">
アクセスしようとしたページは削除、変更されたか、
</span>
</div>
<div style="text-align: center;">
<span style="color: #666666;">現在利用できない可能性があります。</span>
<br>
<span style="color: #666666;">
お手数ですが、ホームページのトップまたは下記のリンクよりお探しください。
</span>
</div>
</div>
</div>