お問い合わせフォーム

当サイトについてのご意見、ご感想などは以下のフォームよりお問い合わせください（できません）。

.c-form

form要素に付与する、フォーム全体を括るクラス。

<form action="" class="c-form"> ︙ </form>

c-formlist

フォームの入力項目一覧を括る、配下に.form_item要素を列挙する。

<ul class="c-formlist"> <li class="form_item"> ︙ </li> ︙ </ul>

.c-radioui

ラジオボタンUIをつくるクラス。ラジオボタンの項目は.itemを付与したlabel要素で列挙する。

<li class="form_item"> <span class="form_label">メルマガ配信</span> <div class="c-radioui"> <label class="item"> <input type="radio" name="info" value="受け取る" checked> <span class="label">受け取る</span> </label> ︙ </div> </li>

.c-checkboxui

チェックボックスUIをつくるクラス。チェックボックスの項目は.itemを付与したlabel要素で列挙する。

<li class="form_item"> <span class="form_label">メルマガ配信</span> <div class="c-checkboxui"> <label class="item"> <input type="checkbox" name="reason" value="Google検索"> <span class="label"><svg width="24" height="24" viewBox="0 0 24 24" class="ico"><path d="M19,5l-10,14-4-6"/></svg>Google検索</span> </label> ︙ </div> </li>

.js-flextextarea

入力した行数に合わせて入力欄の高さを変えるUIをつくるクラス。（後述）

.js-acceptInput

ラジオボタン、チェックボックスへのチェックで、活性・非活性を切り替えるUIをつくるクラス。（後述）

テキスト入力欄のマークアップ。
.form_item配下にlabel要素で括ったinput要素と、その手前に.form_labelを付与したspan要素でラベルテキストを置く。

テキストエリアのマークアップ。
テキスト入力欄とほぼ同じ、input要素がtextarea要素に変わる。入力した行数に合わせて伸縮させる場合はtextarea要素を.js-flextextareaを付与したdiv要素で括る。

活性・非活性を切り替えるラジオボタン、チェックボックスのマークアップ。
ラジオボタン、チェックボックスに.js-acceptInputを付与。ラジオボタン、チェックボックス側にはdata-trigger属性、切り替える対象となる要素にはdata-target属性で、「ユニークな同じ値」を指定し紐付ける。