チェックボックス、ラジオボタン、メニュー

This page is also available in English.

Contact Form 7 はチェックボックス、ラジオボタン、それからドロップダウンメニューを表現するフォームタグをいくつか用意しています。この記事では、それらのフォームタグの詳細な使用方法とセマンティクスについて説明します。

チェックボックスとラジオボタン

checkboxcheckbox* はどちらもチェックボックス (HTML における <input type="checkbox">) のグループを表現します。checkbox* はユーザーに対して、少なくともひとつのチェックボックスを選択することを求めます。

radio はラジオボタン (HTML における <input type="radio">) のグループを表現します。入力必須版の radio (“radio*”) はありません。Contact Form 7 が “radio*” を提供しない理由は、そもそもラジオボタンとは入力必須のものだからです。このあたりのことについては HTML の仕様を見た方が早いでしょう。

オプション使用例説明
id:(id)id:fooラッパー要素の id 属性値。
class:(class)class:barラッパー要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを並べる。
default:(num)default:2
default:1_2_3
デフォルトで選択されたオプション。default: の後の整数が項目の位置を示す。先頭は 1 になる。2個以上の項目を選択したい場合は、それらの整数をアンダーバー (_) で連結して、default:1_2_3 のようにする。
label_first デフォルトではチェックボックス(またはラジオボタン)が先に、そのラベルが後に表示される。label_first オプションの追加によりこの順序を反転することができる。
use_label_element 個々のチェックボックス(またはラジオボタン)を <label> タグで囲む。
exclusive チェックボックスを排他化する。何を言っているかというと、グループ内のチェックボックスのひとつがチェックされると、その他のチェックボックスはチェックが外される。このため、全体として常に 0 または 1個だけがチェックされた状態になる。これは JavaScript のギミックを使っているので JavaScript が使えない状態では機能しない。また、ラジオボタンはこのオプションをサポートしない。
free_text 最後の項目に自由記入のテキスト項目を付加する。
data:(name)data:countriesListo から値を取得する。

これらのタイプのタグは1個以上の値を持つことができ、これらの値はチェックボックス(またはラベル)の値とラベルとして使われます。

例:

[checkbox your-country "China" "India" "San Marino"]

ドロップダウンメニュー

selectselect* はどちらもドロップダウンメニュー (HTML における <select>) を表現します。select* はユーザーに対して少なくともひとつの項目を選択することを求めます。

オプション使用例説明
id:(id)id:fooselect 要素の id 属性値。
class:(class)class:barselect 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを並べる。
default:(num)default:2
default:1_2_3
デフォルトで選択されたオプション。default: の後の整数が項目の位置を示す。先頭は 1 になる。2個以上の項目を選択したい場合は、それらの整数をアンダーバー (_) で連結して、default:1_2_3 のようにする。
multiple ドロップダウンメニューを複数選択可能にする。
include_blank 空の項目をドロップダウンメニューの先頭に追加する。
first_as_label 最初の値をラベルとして使う。
data:(name)data:countriesListo から値を取得する。
autocomplete:(value)autocomplete:country-nameフォーム自動補完のためのオプション

これらのタイプのタグは1個以上の値を持つことができ、これらの値はドロップダウンメニューの項目として使われます。

例:

[select your-country "China" "India" "San Marino"]

関連項目

デモ

注意: これはデモです。このフォームが実際にメールを送信することはありません。

    Select Country (required)

    Select Sports
    FootballTennisPole-vault

    Select Fruit (required)
    AppleBananaGrape

    Select Browser (required)

    Select Ghkdsjdf

    上のフォームのソース:

    Select Country (required)
    [checkbox* your-country use_label_element "China" "India" "San Marino"]
    
    Select Sports
    [radio your-sports label_first default:2 "Football" "Tennis" "Pole-vault"]
    
    Select Fruit (required)
    [checkbox* your-fruit exclusive "Apple" "Banana" "Grape"]
    
    Select Browser (required)
    [select* your-browser include_blank "Firefox" "Safari" "Opera" "Lynx"]
    
    Select Ghkdsjdf
    [select your-ghkdsjdf multiple "fsdfs" "klgjfk" "vdrie"]
    
    [submit "Send"]

      WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。