本記事の目的
本記事では、b→dashのフォームページ作成機能で用いられる「質問項目」などのフォームページの機能や構成要素のCSSコードについて紹介します。b→dashで作成したフォームページのデザインをカスタマイズするために、どのようなCSSコードが利用されているかを知りたい場合は、本記事をご参照ください。
フォームのCSS情報
以下では、フォームのCSS情報について、「入力画面」や「確認画面」「完了画面」などの各画面に分けて紹介します。
❶ 入力画面
各要素の説明
フォームの各機能や各質問項目の要素名は共通のものとなっています。各要素の名前の紹介や説明を紹介します。
| 説明 | 要素名 |
| ❶ 質問タイトル | page-item-label |
| ❷ 必須項目 | page-item-required |
| ❸ 回答欄全体 | page-item-info |
| ❹ エラーメッセージ | page-item-message |
| ➎ 備考欄 | page-item-description |
各質問項目のコード例
「入力画面」の作成時に使用する、各質問項目のHTMLコード例を紹介します。
定型質問
| # | コンポーネント名 | HTMLコード例 |
| 1 | 質問項目（姓） |
<dl id="bdash_form_f_8" class="page-item page-item-layout-h "> <dt class="page-item-label"> 質問タイトル </dt> <dd class="page-item-info"> <input type="text" name="bdash_form_data[f_8]" id="bdash_form_data_f_8" value="" placeholder="" maxlength="255" class="form-control"> <div class="page-item-message"></div> <div class="page-item-description"> </div> </dd> </dl> |
| 2 | 質問項目（名） | |
| 3 | 質問項目（氏名） | |
| 4 | 質問項目（電話番号） | |
| 5 | 質問項目（メールアドレス） | |
| 6 | 質問項目（URL） | |
| 7 | 質問項目（カレンダー） |
<dl id=""bdash_form_f_8"" class=""page-item page-item-layout-v "">
<dt class=""page-item-label"">
カレンダー
<span class=""page-item-required"">
<span>
</dt>
<dd class=""page-item-info"">
<input placeholder type=""date"" name=""bdash_form_data[f_8]"" id=""bdash_form_data_f_8"" value=""2022-12-18"" min class=""form-control"">
<div class=""page-item-message""></div>
<div class=""page-item-description"">
</div>
</dd>
</dl>
|
| 8 | 質問項目（都道府県） |
<dl id=""bdash_form_f_8"" class=""page-item page-item-layout-v "">
<dt class=""page-item-label"">
都道府県
<span class=""page-item-required"">
*
<span>
</dt>
<dd class=""page-item-info"">
<select name=""bdash_form_data[f_8]"" id=""bdash_form_data_f_8"" class=""form-control custom-select"">
<option selected = ""selected"" disabled=""disabled"" value>選択して下さい</option>
<option value =""北海道'</option>
<option value =""青森県'</option>
<option value =""岩手県'</option>・・・・・
</select>
<div class=""page-item-message""></div>
<div class=""page-item-description"">
</div>
</dd>
</dl>
|
| 9 | 質問項目（郵便番号） |
<dl id=""bdash_form_f_8"" class=""page-item page-item-layout-v "">
<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_8]"" id=""bdash_form_data_f_8"" size='3' maxlength=""3"" class=""form-control"">
<span class=""mx-2"">-<span>
<input type=""text"" name=""bdash_form_data[f_8]"" id=""bdash_form_data_f_8"" size='4' maxlength=""4"" class=""form-control"">
</select>
<div class=""page-item-message""></div>
<div class=""page-item-description"">
</div>
</dd>
</dl>
|
| 10 | 質問項目（同意書） |
<dl id=""bdash_form_f_8"" class=""page-item page-item-layout-v form -item-agreement "">
<dt class=""page-item-label"">
”同意書”
<span class=""page-item-required"">
*
<span>
</dt>
<dd class='detail-info'> <dd>
<dd class=""page-item-info"">
<div class=""agreement-text-title"">以下の事項に同意の上、お問合せください。 </div>
<div class='agreement-text'>
<p>同意文を入力しましょう。</p>
<p>※フォーム内容に合わせて、個人情報取り扱い方針や、サービス利用規約などへの同意を求める内容を掲載しましょう。</p>
</div>
<label>
<input type=""checkbox"" name=""bdash_form_data[f_8]"" id=""bdash_form_data_f_8"" value=""true"" class=""agree_checkbox mar-1"">
<label for=""bdash_form_data_f_8"""">同意する</label>
</label>
<div class=""page-item-message""></div>
<div class=""page-item-description"">
</div>
</dd>
</dl>
|
カスタム質問
| # | コンポーネント名 | HTMLコード例 |
| 1 | 一行テキスト |
<dl id="bdash_form_f_8" class="page-item page-item-layout-h "> <dt class="page-item-label"> 質問タイトル </dt> <dd class="page-item-info"> <input type="text" name="bdash_form_data[f_8]" id="bdash_form_data_f_8" value="" placeholder="" maxlength="255" class="form-control"> <div class="page-item-message"></div> <div class="page-item-description"> </div> </dd> </dl> |
| 2 | 複数行テキスト | |
| 3 | カスタムプルダウン |
<dl id="bdash_form_f_223" class="page-item page-item-layout-v "> <dt class="page-item-label"> 質問タイトル </dt> <dd class="page-item-info"> <select name="bdash_form_data[f_223][]" id="bdash_form_data_f_223_" class="form-control custom-select"> <option id="bdash_form_f_223_0" value="選択肢0">選択肢0</option> <option id="bdash_form_f_223_1" value="選択肢1">選択肢1</option> <option id="bdash_form_f_223_2" value="選択肢2">選択肢2</option> <option id="bdash_form_f_223_3" value="選択肢3">選択肢3</option> </select> <div class="page-item-message"></div> <div class="page-item-description"> </div> </dd> </dl> |
| 4 | カスタムチェックボックス |
<dl id="bdash_form_f_226" class="page-item page-item-layout-v form-item-checkbox "> <dt class="page-item-label"> 質問タイトル <span class="page-item-required">*</span> </dt> <dd class="page-item-info"> <label> <input type="checkbox" name="bdash_form_data[f_226][]" id="bdash_form_data_f_226_" value="選択肢1">選択肢1 </label> |
| 5 | カスタムラジオボタン |
<dl id="bdash_form_f_7" class="page-item page-item-layout-h form-item-radio "> <dt class="page-item-label"> 質問タイトル <span class="page-item-required">*</span> </dt> <dd class="page-item-info"> <label> <input type="radio" name="bdash_form_data[f_7][]" id="bdash_form_f_7_0" value="選択肢1">選択肢1 </label> <label> <input type="radio" name="bdash_form_data[f_7][]" id="bdash_form_f_7_1" value="選択肢2">選択肢2 </label> <div class="page-item-message"></div> <div class="page-item-description"> </div> </dd> </dl> |
| 6 | カスタムテキスト画像 | 任意のHTML（画面からエディタで設定した画像やテキストの要素が入ります） |
| 7 | マトリクスラジオボタン |
<dl id=""bdash_form_f_3366"""" class=""""page-item page-item-layout-v form-item-matrix"">
<dt class=""""page-item-label"""">
マトリクス＿ラジオボタン
<span class=""""page-item-required"""">*</span>
</dt>
<dd class=""""page-item-info"""">
<table class=""form-item-matrix-table"">
<thead>
<tr>
<th></th>
<th>入力値1</th>
<th>入力値2</th>
</tr>
</thead>
<tbody>
<tr>
<th>入力値1</th>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値1]"""" id=""""bdash_form_data_f_3366____1"""" value>
<td>
<input type=""""radio"""" name=""""bdash_form_data[f_3366][入力値1]"""" id=""""bdash_form_data_f_3366____1____1"""" value=入力値1>
</td>
<td>
<input type=""""radio"""" name=""""bdash_form_data[f_3366][入力値1]"""" id=""""bdash_form_data_f_3366____1____2"""" value=入力値2>
</td>
<tr>
<tr>
<th>入力値2</th>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値2]"""" id=""""bdash_form_data_f_3366____2"""" value>
<td>
<input type=""""radio"""" name=""""bdash_form_data[f_3366][入力値2]"""" id=""""bdash_form_data_f_3366____2____1"""" value=入力値1>
</td>
<td>
<input type=""""radio"""" name=""""bdash_form_data[f_3366][入力値2]"""" id=""""bdash_form_data_f_3366____2____2"""" value=入力値2>
</td>
<tr>
<tr>
<th>入力値3</th>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値3]"""" id=""""bdash_form_data_f_3366____3"""" value>
<td>
<input type=""""radio"""" name=""""bdash_form_data[f_3366][入力値3]"""" id=""""bdash_form_data_f_3366____3____1"""" value=入力値1>
</td>
<td>
<input type=""""radio"""" name=""""bdash_form_data[f_3366][入力値3]"""" id=""""bdash_form_data_f_3366____3____2"""" value=入力値2>
</td>
<tr>
</tbody>
</table>
<div class=""""page-item-message""""></div>
<div class=""""page-item-description"""">
</div>
</dd>
</dl>
|
| 8 | マトリクスチェックボックス |
<dl id=""bdash_form_f_3366"""" class=""""page-item page-item-layout-v form-item-matrix"">
<dt class=""""page-item-label"""">
マトリクス＿チェックボタン
<span class=""""page-item-required"""">*</span>
</dt>
<dd class=""""page-item-info"""">
<table class=""form-item-matrix-table"">
<thead>
<tr>
<th></th>
<th>入力値1</th>
<th>入力値2</th>
</tr>
</thead>
<tbody>
<tr>
<th>入力値1</th>
<td>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値1][入力値1]"""" id=""""bdash_form_data_f_3366____1____1"""" value>
<input type=""""checkbox"""" name=""""bdash_form_data[f_3366][入力値1][入力値1]"""" id=""""bdash_form_data_f_3366____1____1"""" value=入力値1>
</td>
<td>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値1][入力値2]"""" id=""""bdash_form_data_f_3366____1____2"""" value>
<input type=""""checkbox"""" name=""""bdash_form_data[f_3366][入力値1][入力値2]"""" id=""""bdash_form_data_f_3366____1____2"""" value=入力値2>
</td>
</tr>
<tr>
<th>入力値2</th>
<td>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値2][入力値1]"""" id=""""bdash_form_data_f_3366____2____1"""" value>
<input type=""""checkbox"""" name=""""bdash_form_data[f_3366][入力値2][入力値1]"""" id=""""bdash_form_data_f_3366____2____1"""" value=入力値1>
</td>
<td>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値2][入力値2]"""" id=""""bdash_form_data_f_3366____2____2"""" value>
<input type=""""checkbox"""" name=""""bdash_form_data[f_3366][入力値2][入力値2]"""" id=""""bdash_form_data_f_3366____2____2"""" value=入力値2>
</td>
</tr>
<tr>
<th>入力値1</th>
<td>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値3][入力値1]"""" id=""""bdash_form_data_f_3366____3____1"""" value>
<input type=""""checkbox"""" name=""""bdash_form_data[f_3366][入力値3][入力値1]"""" id=""""bdash_form_data_f_3366____3____1"""" value=入力値1>
</td>
<td>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値3][入力値2]"""" id=""""bdash_form_data_f_3366____3____2"""" value>
<input type=""""checkbox"""" name=""""bdash_form_data[f_3366][入力値3][入力値2]"""" id=""""bdash_form_data_f_3366____3____2"""" value=入力値2>
</td>
</tr>
</tbody>
</table>
<div class=""""page-item-message""""></div>
<div class=""""page-item-description"""">
</div>
</dd>
</dl>
|
| 9 | スコア |
<dl id=""bdash_form_f_3366"""" class=""""page-item page-item-layout-v form-item-score"">
<dt class=""""page-item-label"""">
スコア
<span class=""""page-item-required"""">*</span>
</dt>
<dd class=""""page-item-info"""">
<div class=""""form-item-score-label"""">
<div class=""""form-item-score-label-low"""">
<label for=""_______"">非常に悪かった</label>
</div>
<div class=""""form-item-score-label-high"""">
<label for=""_______"">非常に良かった</label>
</div>
</div>
<div class=""""form-item-score-val"""">
<label class>
<input type=""""radio"""" name=""""bdash_form_data[f_3366]"""" id=""""bdash_form_data_f_3366_1"""" value=1>
""1""
</label>
<label class>
<input type=""""radio"""" name=""""bdash_form_data[f_3366]"""" id=""""bdash_form_data_f_3366_2"""" value=2>
""2""
</label>
<label class>
<input type=""""radio"""" name=""""bdash_form_data[f_3366]"""" id=""""bdash_form_data_f_3366_3"""" value=3>
""3""
</label>
<label class>
<input type=""""radio"""" name=""""bdash_form_data[f_3366]"""" id=""""bdash_form_data_f_3366_4"""" value=4>
""4""
</label>
<label class>
<input type=""""radio"""" name=""""bdash_form_data[f_3366]"""" id=""""bdash_form_data_f_3366_5"""" value=5>
""5""
</label>
</div>
<div class=""""page-item-message""""></div>
<div class=""""page-item-description""""> スコアを選択して下さい
</div>
</dd>
</dl>
|
必須項目の設定について
質問項目に対し、必須項目として設定した場合は、「質問タイトル」要素に以下のタグが挿入されます。
<div data-type-content="wpdt-html-content">
<span class="page-item-required">*</span>
</div>その他の部分のCSS情報
| # |
機能名/
コンポーネント名 |
HTMLコード例 |
| 1 | ヘッダー |
<header>～</header> |
| 2 | フッター |
< footer>～</footer > |
| 3 | 送信ボタン |
<div class="bdash_form_button_input"> <input type="submit" name="commit" value="送信" class="bdash_form_commit_button" data-disable-with="送信"> </div> |
❷ 確認画面
「確認画面」は、入力画面において「送信」ボタンをクリックした後に表示されます。「確認画面」に表示される質問項目などのHTMLコードは、「入力画面」における質問項目のHTMLコードと同様のものとなります。
確認画面本文
<div class="bd-pageset-parent">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token" id="authenticity_token" value="+UrnWnGmR44jcxhc24H4BqdNSdmfqog1zWuznB0hkBRgUOF/dsoyOSV4c+Ae43c5gwjoz9WdMKhGxW6hAqhfHg==">
<input type="hidden" name="bdash_form_data[f_6066]" id="bdash_form_data_f_6066">
<input type="hidden" name="bdash_form_data[f_6067]" id="bdash_form_data_f_6067">
<input type="hidden" name="bdash_form_data[f_6068]" id="bdash_form_data_f_6068">
<input type="hidden" name="bdash_form_data[f_6069]" id="bdash_form_data_f_6069">
<input type="hidden" name="bdash_form_data[f_6070]" id="bdash_form_data_f_6070">
<input type="hidden" name="bdash_form_data[f_6071]" id="bdash_form_data_f_6071">
<div>
<p style="line-height: 1.15; text-align: center;"><span style="font-size: 24px;">確認画面</span></p>
</div>
<dl id="bdash_form_f_6074" 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>
<dl id="bdash_form_f_6075" 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>
<p>ページ本文に利用する画像またはテキストを入力しましょう。</p>
<p>※この項目は質問ではありません。画像/テキストをページ本文に追加するために用います。</p>
<div class="bdash_form_button_confirm">
<button name="button" type="button" class="bdash_form_back_button" onclick="location.href="/mc_test?bdlic=&bdmlc=&bdpsc=&bdsmc=&p=1"">
戻る
</button> <input type="submit" name="commit" value="送信" class="bdash_form_commit_button" data-disable-with="送信" disabled="">
</div>
</div>❸ 完了画面
「完了画面」は、「確認画面」において「送信」ボタンをクリックした後に表示されます。以下は、「完了画面」に表示される本文のHTMLコードになります。
編集画面における完了画面本文
<body class="bdash-form-submit">
<!-- b-dash tag manager -->
<script type="text/javascript" src="//cdn.activity.smart-bdash.com/tag-manager/bd-test00/btm.js" charset="UTF-8"></script>
<!-- end b-dash tag manager -->
<div class="container" style="word-break: break-word; max-width: 100%;">
<div class="bdash_form">
<div class="bd-pageset-header">
<script>
// test bd4_inspect_7121
console.log('test')
</script>
</div>
<div class="bd-pageset-body">
<div class="bd-pageset-content-wrap">
<div class="bd-pageset-parent">
<div style="text-align: center;">
<p style="line-height: 1.15;"><span style="font-size: 30px;">セミナー応募フォーム</span></p>
</div>
<div style="text-align: center;"> </div>
<div style="text-align: center;">セミナーにご応募いただき、誠にありがとうございました。
<br>詳細はご指定のメールアドレス宛にお届けさせていただきます。</div>
<div style="text-align: center;">どうぞよろしくお願いいたします。</div>
</div>
</div>
</div>
<div class="bd-pageset-footer">
</div>
</div>
確認画面における完了画面本文
<div class="bd-pageset-content-wrap">
<div class="bd-pageset-parent">
<div style="text-align: center;">
<p style="line-height: 1.15;"><span style="font-size: 30px;">セミナー応募フォーム</span></p>
</div>
<div style="text-align: center;"> </div>
<div style="text-align: center;">セミナーにご応募いただき、誠にありがとうございました。
<br>詳細はご指定のメールアドレス宛にお届けさせていただきます。</div>
<div style="text-align: center;">どうぞよろしくお願いいたします。</div>
</div>
</div>❹ 非公開画面
「非公開画面」は、閲覧上限に達した場合などに表示されます。以下は、「非公開画面」に表示される本文のHTMLコードになります。
編集画面における非公開画面本文
<body class="bdash-form-submit">
<!-- b-dash tag manager -->
<script type="text/javascript" src="//cdn.activity.smart-bdash.com/tag-manager/bd-test00/btm.js" charset="UTF-8"></script>
<!-- end b-dash tag manager -->
<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;">
<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>
</div>
<div class="bd-pageset-footer">
</div>
</div>
</div>
</body>
確認画面における非公開画面本文
<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>➎ エラー画面
「エラー画面」は、公開期間が終了した場合などに表示されます。以下は、「エラー画面」に表示される本文のHTMLコードになります。
編集画面におけるエラー画面本文
<div class="bd-pageset-body">
<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>
</div>確認画面におけるエラー画面本文
<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>