開発情報・ナレッジ

投稿者:SPIRERS ナレッジ向上チーム 2021年11月8日 (月)

[フォームカスタマイズ vol.2]“その他”の項目に入力欄を追加する

  • カスタマイズ後のソースにエラーメッセージ出力用のタグを追加

ラジオボタン形式のセレクトフォームを設定して、“その他”の項目を設けた時に記述式の入力フォームを追加する方法をご案内します。
DEMOは、こちら ※Q2を参照ください。

分けたフォームを同じdl要素内に設置する

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

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 class="$errorInputColor:●●●$" name="●●●" rows="4" wrap="soft" >$●●●$</textarea><br>
<span class="msg">$error:●●●$</span>
</dd>
</dl>
カスタマイズ後

フォームカスタマイズ 関連リンク

Vol.1 姓名の記述を分けて横並びにする
★ Vol.2 “その他”の項目に入力欄を追加する
Vol.3 マトリクス形式の回答欄を作成する
Vol.4 星型のレーティング形式の回答欄を作成する
Vol.5 JavaScriptで項目の表示非表示を切り替える
Vol.6 タップで回答できるバー形式の回答欄を作成する
Vol.7 同意ボタンのチェックで送信ボタンを有効化させる
解決しない場合はこちら コンテンツに関しての
要望はこちら