“その他”の項目に入力欄を追加する
～ フォームデザインのカスタマイズ Vol.2 ～

1. データベースの設定

データベース設定の際、セレクトフォームとテキストフォーム両方用意しておいてくださいね。
そしてデフォルトのフォームを見てみると、二つの項目として表示されています。

2. HTMLの設定

それでは、デフォルトのHTMLソースを見ていきましょう。

<dl class="cf">
<dt class="title">
Q2.ご来場の目的 <span class="need">＊</span>
</dt>
<dd class="data multi2">
<ul class="cf">
<li><label><input class="input" type="checkbox" value="1" name="●●●" $●●●:1$><span>時期は未定だが購入を考えており、情報収集のため</span></label></li>
<li><label><input class="input" type="checkbox" value="2" name="●●●" $●●●:2$><span>1年以内に購入を検討しているため</span></label></li>
<li><label><input class="input" type="checkbox" value="3" name="●●●" $●●●:3$><span>投資のため</span></label></li>
<li><label><input class="input" type="checkbox" value="4" name="●●●" $●●●:4$><span>賃貸にするか購入するか検討中のため</span></label></li>
<li><label><input class="input" type="checkbox" value="5" name="●●●" $●●●:5$><span>関係者、友人に勧められたため</span></label></li>
<li><label><input class="input" type="checkbox" value="6" name="●●●" $●●●:6$><span>その他</span></label></li>
</ul>
<input type="hidden" value="" name="●●●">
<span class="msg">$error:●●●$</span>
</dd>
</dl>
<dl class="cf">
<dt class="title">
Q2.その他
</dt>
<dd class="data ">
<textarea class="$errorInputColor:●●●$" name="●●●" rows="4" wrap="soft" >$●●●$</textarea><br>
<span class="msg">$error:●●●$</span>
</dd>
</dl>

※●●●には、データベース構築の際、フィールド名ごとに設定した差替キーワードが入ります。また、「$●●●:1$」の“:(コロン)”以降の数値は、セレクトの「ラベルIDナンバー」のことで、これは自動でHTMLに記載されます。

Q2のセレクト項目”その他”の後に入力欄＝textarea要素を移動させます。
ddの終了タグ直前に挿入にさせてください。

 
<dl class="cf">
<dt class="title">
Q2.ご来場の目的 <span class="need">＊</span>
<span class="caution">複数選択可</span>
</dt>
<dd class="data multi2">
<ul class="cf">
<li><label><input class="input" type="checkbox" value="1" name="●●●" $●●●:1$><span>時期は未定だが購入を考えており、情報収集のため</span></label></li>
<li><label><input class="input" type="checkbox" value="2" name="●●●" $●●●:2$><span>1年以内に購入を検討しているため</span></label></li>
<li><label><input class="input" type="checkbox" value="3" name="●●●" $●●●:3$><span>投資のため</span></label></li>
<li><label><input class="input" type="checkbox" value="4" name="●●●" $●●●:4$><span>賃貸にするか購入するか検討中のため</span></label></li>
<li><label><input class="input" type="checkbox" value="5" name="●●●" $●●●:5$><span>関係者、友人に勧められたため</span></label></li>
<li><label><input class="input" type="checkbox" value="6" name="●●●" $●●●:6$><span>その他</span></label></li>
</ul>
<input type="hidden" value="" name="●●●">
<span class="msg">$error:●●●$</span>
<!-- その他に入力欄を追加する -->
<textarea name="f●●●" rows="4" wrap="soft" >$●●●$</textarea><br>
</dd>
</dl>

カスタマイズ後