"Contact Form"のフィールドとタグ
"Contact Form"で使用するフィールドは[フィールドの種類 オプション]という形式で書きます。
HTMLのタグと同じようなもので、[が開始タグ、]が終了タグ、フィールドの種類は（例えば単一行入力欄であれば"text"といった）名前、半角スペースでオプションの区切りで構成されています。
オプションは項目名:値という指定方法と項目名のみの指定方法、値のみの3種類があります。
フィールドは次の種類があります。
それぞれの使用方法をご覧ください。
- ※ メール側では別の書き方をします。
メールでの書き方については、"Contact Form"のメール設定ページをご覧ください。
"テキスト"フィールド
単一行の入力欄を表示するには、[text オプション]タグを使用します。
通常は任意ですが必須とする場合は、アスタリスクを付与します。（[text* オプション]）
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [text products_name] |
|
| id | id属性の値。 例： [text id:foo] |
|
| class | wpcf7-form-control wpcf7-text | class属性の値。 例： [text class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [text class:foo class:bar] |
| minlength | 入力の最小文字数。 例： [text minlength:4] |
|
| maxlength | 入力の最大文字数。 例： [text maxlength:800] |
|
| size | 40 | size属性の値。 例： [text size:10] |
| 初期値 | 最初に表示しておく文字。 オプションの最後に指定する。 例： [text "山田太郎"] |
|
| placeholder | 初期値の値をplaceholder属性の値とするかどうか。 例： [text placeholder "山田太郎"] |
|
| akismet:author | Akismetのフィルタを有効にする。 入力内容をAkismetプラグインを使用してスパムかどうかをチェックしてくれる。 指定可能な値は"author"のみで送信者の名前としてチェックする。 例： [text akismet:author] |
サンプルコード
次のサンプルコードは識別子を"foo"、id属性の値を"field-foo"、初期値を"bar"で出力します。
"メールアドレス"フィールド
メールアドレスの入力欄を表示するには、[email オプション]タグを使用します。
通常は任意ですが必須とする場合は、アスタリスクを付与します。（[email* オプション]）
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [email mailaddress] |
|
| id | id属性の値。 例： [email id:foo] |
|
| class | wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email | class属性の値。 例： [email class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [email class:foo class:bar] |
| minlength | 入力の最小文字数。 例： [email minlength:4] |
|
| maxlength | 入力の最大文字数。 例： [email maxlength:800] |
|
| size | 40 | size属性の値。 例： [email size:10] |
| 初期値 | 最初に表示しておく文字。 オプションの最後に指定する。 例： [email "foo@example.co.jp"] |
|
| placeholder | 初期値の値をplaceholder属性の値とするかどうか。 例： [email placeholder "foo@example.co.jp"] |
|
| akismet:user_email | Akismetのフィルタを有効にする。 入力内容をAkismetプラグインを使用してスパムかどうかをチェックしてくれる。 指定可能な値は"user_email"のみで送信者の名前としてチェックする。 例： [email akismet:user_email] |
サンプルコード
"URL"フィールド
URLの入力欄を表示するには、[url オプション]タグを使用します。
通常は任意ですが必須とする場合は、アスタリスクを付与します。（[url* オプション]）
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [url products_name] |
|
| id | id属性の値。 例： [url id:foo] |
|
| class | wpcf7-form-control wpcf7-text wpcf7-url wpcf7-validates-as-url | class属性の値。 例： [url class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [url class:foo class:bar] |
| minlength | 入力の最小文字数。 例： [url minlength:6] |
|
| maxlength | 入力の最大文字数。 例： [url maxlength:255] |
|
| size | 40 | size属性の値。 例： [url size:255] |
| 初期値 | 最初に表示しておく文字。 オプションの最後に指定する。 例： [url "https://example.co.jp/"] |
|
| placeholder | 初期値の値をplaceholder属性の値とするかどうか。 例： [url placeholder "https://example.co.jp/"] |
|
| akismet:author_url | Akismetのフィルタを有効にする。 入力内容をAkismetプラグインを使用してスパムかどうかをチェックしてくれる。 指定可能な値は"author_url"のみで送信者の名前としてチェックする。 例： [url akismet:author_url] |
サンプルコード
"電話番号"フィールド
電話番号の入力欄を表示するには、[tel オプション]タグを使用します。
通常は任意ですが必須とする場合は、アスタリスクを付与します。（[tel* オプション]）
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [tel telephone] |
|
| id | id属性の値。 例： [tel id:foo] |
|
| class | wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel | class属性の値。 例： [tel class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [tel class:foo class:bar] |
| minlength | 入力の最小文字数。 例： [tel minlength:4] |
|
| maxlength | 入力の最大文字数。 例： [tel maxlength:4] |
|
| size | 40 | size属性の値。 例： [tel size:4] |
| 初期値 | 最初に表示しておく文字。 オプションの最後に指定する。 例： [tel "11-2222-3333"] |
|
| placeholder | 初期値の値をplaceholder属性の値とするかどうか。 例： [tel placeholder "11-2222-3333"] |
サンプルコード
"数値"フィールド
数値の入力欄を表示するには、[number オプション]タグを使用します。
通常は任意ですが必須とする場合は、アスタリスクを付与します。（[number* オプション]）
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [number evaluate] |
|
| id | id属性の値。 例： [number id:foo] |
|
| class | wpcf7-form-control wpcf7-number wpcf7-validates-as-number | class属性の値。 例： [number class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [number class:foo class:bar] |
| min | 最小値。 min属性の値。 例： [number min:-10] |
|
| max | 最大値。 max属性の値。 例： [number max:10] |
|
| step | 1 | 1回に増加、増減する数。 step属性の値。 例： [number step:3] |
| 初期値 | 最初に表示しておく文字。 オプションの最後に指定する。 例： [number "あいうえお"] |
|
| placeholder | 初期値の値をplaceholder属性の値とするかどうか。 例： [number placeholder "あいうえお"] |
サンプルコード
"日付"フィールド
日付の入力欄を表示するには、[date オプション]タグを使用します。
通常は任意ですが必須とする場合は、アスタリスクを付与します。（[date* オプション]）
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [date birthday] |
|
| id | id属性の値。 例： [date id:foo] |
|
| class | wpcf7-form-control wpcf7-date wpcf7-validates-as-date | class属性の値。 例： [date class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [date class:foo class:bar] |
| min | 最小の日付。 min属性の値。 例： [date min:1970-01-01] |
|
| max | 最大の日付。 max属性の値。 例： [date max:2007-12-31] |
|
| step | 1 | 1回に増加、増減する日。 step属性の値。 例： [date step:3] |
| 初期値 | 最初に表示しておく文字。 オプションの最後に指定する。 例： [date "2005-08-17"] |
|
| placeholder | 初期値の値をplaceholder属性の値とするかどうか。 例： [date placeholder "0000-00-00"] |
サンプルコード
"テキストエリア"フィールド
複数行入力欄表示するには、[textarea オプション]タグを使用します。
通常は任意ですが必須とする場合は、アスタリスクを付与します。（[textarea* オプション]）
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [textarea message] |
|
| id | id属性の値。 例： [textarea id:foo] |
|
| class | wpcf7-form-control wpcf7-textarea | class属性の値。 例： [textarea class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [textarea class:foo class:bar] |
| minlength | 入力の最小文字数。 例： [textarea minlength:100] |
|
| maxlength | 入力の最大文字数。 例： [textarea maxlength:800] |
|
| size | 40 | size属性の値。 例： [textarea size:4] |
| 初期値 | 最初に表示しておく文字。 オプションの最後に指定する。 例： [textarea "あいうえお"] |
|
| placeholder | 初期値の値をplaceholder属性の値とするかどうか。 例： [textarea placeholder "あいうえお"] |
|
| 行列数 | 10x40 | 行数と列数。行数x列数で指定し、行数、列数それぞれ片方省略することもできる。例： [textarea 50x4] [textarea 50x] [textarea x4] |
サンプルコード
"ドロップダウンメニュー"フィールド
ドロップダウンメニューを表示するには、[select オプション]タグを使用します。
通常は任意ですが必須とする場合は、アスタリスクを付与します。（[select* オプション]）
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [select prefectures] |
|
| id | id属性の値。 例： [select id:foo] |
|
| class | wpcf7-form-control wpcf7-select | class属性の値。 例： [select class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [select class:foo class:bar] |
| default | 最初に選択しておく選択肢の位置。 例： [select default:2]multipleで複数選択が有効時に、複数選択したい場合はアンダースコアで繋げる。 例： [select default:2_5_6] |
|
| multiple | 複数選択することができるようにする。 例： [select multiple] |
|
| 選択肢 | 複数選択することができるようにする。 オプションの最後に指定する。 例： [select "foo" "bar" "baz"] |
|
| include_blank | 最初に空の選択肢を追加する。 テキストは"---"で追加される。 例： [select include_blank "foo" "bar" "baz"] |
|
| first_as_label | 最初の選択肢を空として扱う。 例： [select first_as_label "--選択してください--" "foo" "bar" "baz"] |
|
| data | Listoプラグインのデータ。 例： [select Listo:countries] |
サンプルコード
"チェックボックス"フィールド
複数選択を表示するには、[checkbox オプション]タグを使用します。
通常は任意ですが必須とする場合は、アスタリスクを付与します。（[checkbox* オプション]）
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [checkbox know] |
|
| id | id属性の値。 例： [checkbox id:foo] |
|
| class | wpcf7-form-control wpcf7-checkbox | class属性の値。 例： [checkbox class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [checkbox class:foo class:bar] |
| default | 最初に選択しておく選択肢の位置。 例： [checkbox default:2]複数選択したい場合はアンダースコアで繋げる。 例： [checkbox default:2_5_6] |
|
| use_label_element | テキストをlabel要素で表示しinput要素を内包する。 例： [checkbox use_label_element "foo" "bar" "baz"] |
|
| 選択肢 | 複数選択することができるようにする。 オプションの最後に指定する。 例： [checkbox "foo" "bar" "baz"] |
|
| exclusive | 同一グループのチェックボックスで1つだけチェックできる状態にする。 チェックすると同一グループのチェックボックスでチェックされているものは外れる。 例： [checkbox exclusive] |
|
| free_text | 最後のチェックボックスの次に単一行入力（自由入力）欄を設置する。 例： [checkbox free_text] |
サンプルコード
"ラジオボタン"フィールド
単一選択を表示するには、[radio オプション]タグを使用します。
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [radio gender] |
|
| id | id属性の値。 例： [radio id:foo] |
|
| class | wpcf7-form-control wpcf7-radio | class属性の値。 例： [radio class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [radio class:foo class:bar] |
| default | 最初に選択しておく選択肢の位置。 例： [radio default:2]複数選択したい場合はアンダースコアで繋げる。 例： [radio default:2_5_6] |
|
| use_label_element | テキストをlabel要素で表示しinput要素を内包する。 例： [radio use_label_element "foo" "bar" "baz"] |
|
| 選択肢 | 複数選択することができるようにする。 オプションの最後に指定する。 例： [radio "foo" "bar" "baz"] |
|
| free_text | 最後のラジオボタンの次に単一行入力（自由入力）欄を設置する。 例： [radio free_text] |
サンプルコード
"承諾確認"フィールド
承諾確認の選択項目を表示するには、[acceptance オプション]タグを使用します。
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [acceptance accept] |
|
| id | id属性の値。 例： [acceptance id:foo] |
|
| class | wpcf7-form-control wpcf7-acceptance | class属性の値。 例： [acceptance class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [acceptance class:foo class:bar] |
| ラベル | 表示するラベルのテキスト。 オプションの最後に指定する。 例： [acceptance "同意する"] |
|
| optional | 任意にする。 通常は必須扱い。 例： [acceptance optional] |
|
| default:on | 初期状態でチェック済みとする。 例： [acceptance default:on] |
サンプルコード
"クイズ"フィールド
クイズを表示するには、[quiz オプション]タグを表示します。
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [quiz quiz] |
|
| id | id属性の値。 例： [quiz id:foo] |
|
| class | wpcf7-form-control wpcf7-quiz | class属性の値。 例： [quiz class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [quiz class:foo class:bar] |
| 内容 | クイズの内容。 質問と答えをパイプで区切って指定（ "質問|答え"）する。例： [quiz "foo|123"]複数指定すると、ランダムで1つのクイズが表示される。 例： [quiz "foo|123" "bar|456" "baz|789"] |
|
| minlength | 入力の最小文字数。 例： [tel minlength:4] |
|
| maxlength | 入力の最大文字数。 例： [tel maxlength:4] |
|
| size | 40 | size属性の値。 例： [tel size:4] |
サンプルコード
"ファイル"フィールド
ファイルを添付する項目を表示するには、[file オプション]タグを使用します。
通常は任意ですが必須とする場合は、アスタリスクを付与します。（[file* オプション]）
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [file document] |
|
| id | id属性の値。 例： [file id:foo] |
|
| class | wpcf7-form-control wpcf7-file | class属性の値。 例： [file class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [file class:foo class:bar] |
| filetypes | 添付可能なファイルの形式の拡張子。 パイプで複数指定することができる。 例： [file filetypes:xls|xlsx|doc|docx|pdf] |
|
| limit | 添付するファイルの許容する最大容量。 バイト数で指定するか単位付きで指定する。 例： [file limit:2000000]例： [file limit:2mb] |
サンプルコード
"送信ボタン"フィールド
送信するためのボタンを表示するには、[submit オプション]タグを表示します。
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| id | id属性の値。 例： [submit id:foo] |
|
| class | wpcf7-form-control wpcf7-submit | class属性の値。 例： [submit class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [submit class:foo class:bar] |
| ラベル | 表示するラベルのテキスト。 オプションの最後に指定する。 例： [submit "送信する"] |
サンプルコード
"隠し"フィールド
隠し項目を出力するには、[hidden オプション]タグを使用します。
オプション
| 項目名 | 初期値 | 説明 |
|---|---|---|
| 識別子 必須 |
name属性の値。 例： [hidden code] |
|
| id | id属性の値。 例： [hidden id:foo] |
|
| class | wpcf7-form-control wpcf7-hidden | class属性の値。 例： [hidden class:foo]複数指定したい場合はclassオプションを複数指定する。 例： [hidden class:foo class:bar] |
| 初期値 | 最初に設定しておく値。 オプションの最後に指定する。 例： [hidden "あいうえお"] |