WordPressのプラグイン「Contact Form 7」で出力されたフォームをちょっとカスタマイズ──その④
- 2019-12-11
- 2019-12-11
- コーディング
- WordPress, HTML & CSS & JavaScript
チェックボックスとラジオボタンのテキスト部分を含めてボタン化
メールフォームのカスタマイズ内容は以下のとおりで、今回は下記4番目の項目の解説を。
- テキストフォーム、テキストエリアに表示される入力見本の文字色を統一
- 住所の一部を郵便番号を元に自動入力
- セレクト項目の文字色をテキストインプット部分、テキストエリアの色の変化に合わせる
- チェックボックス、及びラジオボタンのON/OFFを分かりやすく＆スマホでもタップしやすく
- ラジオボタンとテキスト入力の組み合わせ項目をできる限り分かりやすく
- ファイルの添付のボタンをカスタマイズ
- 利用規約に同意することで送信ボタンを活性化
サンプルページ
チャックボックス、ラジオボタンのブラウザデフォルトのデザインは、各選択肢の文字列の先頭、もしくは後ろに四角いチェックボックスや丸いボタンが表示される。そしてコーダーの資質（やシステム上の制約）によって、アイコン部分だけしか選択領域として機能しない残念なUIの場合と、labelタグを使い選択肢の文字列も含めて選択領域となっているUIのふたとおりある。しかし、ブラウザの表示上の見た目では区別がつかない。よって、選択肢の文字列も含めて「ボタン化」することでより分かりやすく、スマホでもタップしやすいデザインに変更する。
ちなみに、サンプルページ・ソースの800行目～858行目までをWordPressの「Contact Form 7」にぶち込んでもらえれば、サンプルページと同じ内容のフォームが作成できる。
各選択肢をlabelタグで囲むためuse_label_elementを忘れずに
今回のサンプルページはWordPressのプラグインContact Form 7を使って出力されたhtmlなので、まずはContact Form 7にフォームを登録する際のコードの書き方（作り方）から。
とはいえ、そんなに難しい事では無く、サンプルページ・ソースの817行目からはじまるcheckbox、radio部分の書き方（作り方）で必ずuse_label_elementを入れる事を忘れずに！というだけである。そうしないと、非常に残念なUIになってしまう。
<li class="checkbox-field cf"><span class="field-name">好きな色 (複数回答可)</span><span class="field-item">[checkbox your-color id:id-color class:class-color use_label_element "今様色" "露草色" "木蘭色" "群青色" "老竹色" "肉桂色" "烏羽色" "千草色"]</span></li>
<li class="radio-field cf"><span class="field-name">血液型</span><span class="field-item">[radio your-blood id:id-blood use_label_element "A型" "B型" "AB型" "O型" "不明" "教えない"]</span></li>
これで、下記サンプルページ・ソースの664行目～のように各選択肢がlabelタグで囲まれたhtmlが出力される。
<li class="checkbox-field cf"><span class="field-name">好きな色 (複数回答可)</span><span class="field-item"><span class="wpcf7-form-control-wrap your-color"><span class="wpcf7-form-control wpcf7-checkbox class-color" id="id-color"><span class="wpcf7-list-item first"><label><input type="checkbox" name="your-color[]" value="今様色" /><span class="wpcf7-list-item-label">今様色</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="your-color[]" value="露草色" /><span class="wpcf7-list-item-label">露草色</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="your-color[]" value="木蘭色" /><span class="wpcf7-list-item-label">木蘭色</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="your-color[]" value="群青色" /><span class="wpcf7-list-item-label">群青色</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="your-color[]" value="老竹色" /><span class="wpcf7-list-item-label">老竹色</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="your-color[]" value="肉桂色" /><span class="wpcf7-list-item-label">肉桂色</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="your-color[]" value="烏羽色" /><span class="wpcf7-list-item-label">烏羽色</span></label></span><span class="wpcf7-list-item last"><label><input type="checkbox" name="your-color[]" value="千草色" /><span class="wpcf7-list-item-label">千草色</span></label></span></span></span></span></li>
<li class="radio-field cf"><span class="field-name">血液型</span><span class="field-item"><span class="wpcf7-form-control-wrap your-blood"><span class="wpcf7-form-control wpcf7-radio" id="id-blood"><span class="wpcf7-list-item first"><label><input type="radio" name="your-blood" value="A型" /><span class="wpcf7-list-item-label">A型</span></label></span><span class="wpcf7-list-item"><label><input type="radio" name="your-blood" value="B型" /><span class="wpcf7-list-item-label">B型</span></label></span><span class="wpcf7-list-item"><label><input type="radio" name="your-blood" value="AB型" /><span class="wpcf7-list-item-label">AB型</span></label></span><span class="wpcf7-list-item"><label><input type="radio" name="your-blood" value="O型" /><span class="wpcf7-list-item-label">O型</span></label></span><span class="wpcf7-list-item"><label><input type="radio" name="your-blood" value="不明" /><span class="wpcf7-list-item-label">不明</span></label></span><span class="wpcf7-list-item last"><label><input type="radio" name="your-blood" value="教えない" /><span class="wpcf7-list-item-label">教えない</span></label></span></span></span></span></li>
各checkbox、radioに付随する<span class="wpcf7-list-item-label">タグで囲まれた文字列が重要になるので、手書き(？)でフォームを作成する場合は、付けるクラスは任意でかまわないがspanタグで忘れずに選択肢の文字列を囲んでおこう。
inout部分は消してlabelタグに対して色々と指定
ここからが、コーダーの腕の見せどころ。まずは、各ブラウザが持っているデフォルトのチャックボックスやラジオボタンのアイコンを表示させないために、input[type="checkbox"]とinput[type="radio"]にdisplay: none;を指定してアイコンを消し去ろう。display: none;でチャックボックスやラジオボタンのinput部分を消し去っても、labelタグで選択領域を拡張しているため項目がクリックされた事実はブラウザが認識してくれる。
サンプルページ・ソースでいえば404行目～の設定がそれである。ちなみに、CSS上はinput[type="file"]についても一緒に色々と設定しているが、そのあたりは（いつになるか分からないが）6回目の記事で解説するため、ここでは敢えて無視する。
/* form - checkbox | radio | file */
input[type="checkbox"],
input[type="radio"],
input[type="file"] {
display: none;
}
.checkbox-field .wpcf7-list-item-label,
.radio-field .wpcf7-list-item-label,
.file-field .attached-file {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
color: #272727;
font-size: 1.071428em;
line-height: 1.47;
display: block;
padding: .51em .7em .57em 1.25em;
position: relative;
cursor: pointer;
}
.radio-field .wpcf7-list-item-label {
border-top-left-radius: .75em;
}
.file-field .attached-file {
display: inline-block;
padding-left: .7em;
margin-right: .63em;
}
.checkbox-field .wpcf7-list-item-label:hover,
.radio-field .wpcf7-list-item-label:hover,
.file-field .attached-file:hover {
background-color: #858585;
color: #fff;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label,
input[type="radio"]:checked + .wpcf7-list-item-label {
background-color: #545454;
border: 1px solid #272727;
color: #fff;
}
input[type="radio"]:checked + .wpcf7-list-item-label {
cursor: default;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:hover,
input[type="radio"]:checked + .wpcf7-list-item-label:hover {
}
要は、チェックボックスやラジオボタンの文字列が選択されたら「隣の要素」のspanタグ（ここでは、.wpcf7-list-item-label）を変化させる、という事。
サンプルページ・ソースの410行目～の部分で、文字列が選択されていない状態を設定している。サンプルページではチェックボックスとラジオボタンの見た目が分かりやすいよう、角を丸めた四角形と円の矩形をボタン内に表示し、ラジオボタンについてはボタンの左上部をより丸めた。このあたりは画像などを作って配置してもいいだろう。
続けて432行目～は、カーソル:hover時の挙動を設定している。
438行目～が、チェックボックスやラジオボタンの選択領域がクリックされ、項目が選択された場合の設定である。キモは、input[type="checkbox"]:checkedやinput[type="radio"]:checkedの:checked部分。文字どおり「項目が選択された場合」という意味で、これに「+」を付けて「.wpcf7-list-item-label」と記述する事で、チェックされた要素の直後にくる要素をセレクタとして規定しているわけである。
尚、444行目～のcursor: default;の指定がラジオボタンだけなのは、チェックボックスは一度項目を選択しても、再度同じ項目をクリックすれば選択が解除される仕様のため、422行目で指定しているcursor: pointer;を変更する必要がないからだ。
447～449行目は、なんとなく項目としてセレクタは書いてみたものの──という感じで、単なる削除し忘れw
あとは、それぞれの選択肢をどう装飾するかで、そちらは547行目～の部分に当たる。
/* ------------------------------------------------------- *
---- * form */
/* form - fig */
.checkbox-field .wpcf7-list-item-label::before,
.radio-field .wpcf7-list-item-label::before {
background-color: #ccc;
content: '';
font-size: 1.25em;
display: block;
width: .59em;
height: .59em;
position: absolute;
top: .2em;
left: .2em;
}
.checkbox-field .wpcf7-list-item-label::before {
border-radius: 3px;
}
.radio-field .wpcf7-list-item-label::before {
border-radius: 50%;
width: .63em;
height: .63em;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::before,
input[type="radio"]:checked + .wpcf7-list-item-label::before {
background-color: #fff;
border-color: rgba(69, 69, 69, .43);
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
color: #fff;
content: '\f00c';
font-family: 'FontAwesome';
font-size: 1.9em;
line-height: 1;
text-align: left;
text-shadow: 0 0 1px #000, 0 0 2px #000;
width: 1em;
position: absolute;
top: -.27em;
left: -.15em;
}
input[type="radio"]:checked + .wpcf7-list-item-label::after {
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 1px #000, 0 0 2px #000;
content: '';
line-height: 1;
font-size: 1.25em;
display: block;
width: calc( .63em + .5em );
height: calc( .63em + .5em );
position: absolute;
top: -.05em;
left: -.05em;
}
「チェック」のアイコンを今回は既存のものに頼ったが、自作してもいいだろう。
