テキスト項目

テキスト入力項目はコンタクトフォームの最も基本的な要素です。もうご存じと思いますが、HTML はテキスト入力項目のための2種類の要素を持っています。単一行入力のための <input type="text"> と複数行入力のための <textarea> です。

Contact Form 7 ではこれら2種類の HTML 要素を表現する6種類のフォームタグを用意しています(text、text*、email、email*、textarea、textarea*)。この記事では、これらのフォームタグの詳細な使用方法とセマンティクスについて説明します。

Text と Text*

text と text* はどちらも単一行入力のために用いられ、任意の形式のテキストを受け入れます。違いは text* が必須項目を示すということだけです。これは Contact Form 7 の慣習で、必須項目になるタグのタイプにはどれもアスタリスク ‘*’ がついています。

text と text* で利用可能なオプション
オプション	使用例	説明
(サイズ)/(最大長)	`40/100` `20/` `/50`	フィールドのサイズと最大長。片方を省略することも可能。
id:(id)	`id:foo`	`input` 要素の `id` 属性値。
class:(class)	`class:bar`	`input` 要素の `class` 属性値。2個以上のクラスを設定する場合は複数の `class:` オプションを `[text your-text class:y2008 class:m01 class:d01]` のようにして並べる。
tabindex:(num)	`tabindex:10`	`input` 要素の `tabindex` 属性値。
akismet:author akismet:author_url		Akismet を使うためのオプション。

これらの項目では1個までの値を持つことができ、この値は入力項目のデフォルト値として使われます。

例:

[text* your-name 20/40 class:required "John Smith"]

Email と Email*

email と email* はどちらも単一行入力のために用いられ、メールアドレスとして適正な文字列のみ受け入れます。email* は必須項目を示します。

email と email* で利用可能なオプション
オプション	使用例	説明
(サイズ)/(最大長)	`40/100` `20/` `/50`	フィールドのサイズと最大長。片方を省略することも可能。
id:(id)	`id:foo`	`input` 要素の `id` 属性値。
class:(class)	`class:bar`	`input` 要素の `class` 属性値。2個以上のクラスを設定する場合は複数の `class:` オプションを `[email your-email class:y2008 class:m01 class:d01]` のようにして並べる。
tabindex:(num)	`tabindex:10`	`input` 要素の `tabindex` 属性値。
akismet:author_email		Akismet を使うためのオプション。

これらの項目では1個までの値を持つことができ、この値は入力項目のデフォルト値として使われます。

例:

[email your-email 40/100 "example@example.com"]

Textarea と Textarea*

textarea と textarea* はどちらも複数行入力のために用いられ、任意の形式のテキストを受け入れます。textarea* は必須項目を示します。

textarea と textarea* で利用可能なオプション
オプション	使用例	説明
(行数)x(列数)	`40x10` `80x` `x4`	テキストエリアの行数(幅)と列数(高さ)。片方を省略することも可能。
id:(id)	`id:foo`	`textarea` 要素の `id` 属性値。
class:(class)	`class:bar`	`textarea` 要素の `class` 属性値。2個以上のクラスを設定する場合は複数の `class:` オプションを `[textarea your-text class:y2008 class:m01 class:d01]` のようにして並べる。
tabindex:(num)	`tabindex:10`	`textarea` 要素の `tabindex` 属性値。

これらの項目では1個までの値を持つことができ、この値は入力項目のデフォルト値として使われます。

例:

[textarea your-message 40x10 "your message here ..."]

これに加えて、デフォルト値を指定するもうひとつの方法を次に示します:

[textarea your-message]
foo
bar
[/textarea]

この方法を使うと、複数行のデフォルト値の設定が可能です。

デモ

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

上のフォームのソース:

Your Name (required)
[text* your-name 30/60]

Your Email (required)
[email* your-email "yourmail@example.com"]

Your Message
[textarea your-message]
default value for a textarea
can be multi-line
like this
[/textarea]

[submit "Send"]