Contact Form 7

This page is also available in English.

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

Contact Form 7 ではこれら2種類の HTML 要素を表現する数種類のフォームタグを用意しています: テキスト項目 (text と text*)、メールアドレス項目 (email と email*)、URL 項目 (url と url*)、電話番号項目 (tel と tel*)、テキストエリア (textarea と textarea*)。この記事では、これらのフォームタグの詳細な使用方法とセマンティクスについて説明します。

テキスト項目

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

オプション	使用例	説明
id:(id)	id:foo	input 要素の id 属性値。
class:(class)	class:bar	input 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを [text your-text class:y2008 class:m01 class:d01] のようにして並べる。
minlength:(num)	minlength:10	この入力フィールドで許容される最小文字数。
maxlength:(num)	maxlength:90	この入力フィールドで許容される最大文字数。デフォルト: 400
size:(num)	size:50	この入力フィールドの size HTML 属性値。
akismet:author		Akismet を使うためのオプション。
placeholder watermark		値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。
default:user_login default:user_first_name default:user_last_name default:user_nickname default:user_display_name		項目のデフォルト値としてログインユーザーの情報を取得するオプション。
autocomplete:(value)	autocomplete:name	フォーム自動補完のためのオプション
list:(id)	list:foo	list オプション

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

例:

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

メールアドレス項目

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

オプション	使用例	説明
id:(id)	id:foo	input 要素の id 属性値。
class:(class)	class:bar	input 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを [email your-email class:y2008 class:m01 class:d01] のようにして並べる。
minlength:(num)	minlength:10	この入力フィールドで許容される最小文字数。
maxlength:(num)	maxlength:90	この入力フィールドで許容される最大文字数。デフォルト: 400
size:(num)	size:50	この入力フィールドの size HTML 属性値。
akismet:author_email		Akismet を使うためのオプション。
placeholder watermark		値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。
default:user_email		項目のデフォルト値としてログインユーザーの情報を取得するオプション。
autocomplete:(value)	autocomplete:email	フォーム自動補完のためのオプション
list:(id)	list:foo	list オプション

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

例:

[email your-email "example@example.com"]

URL 項目

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

オプション	使用例	説明
id:(id)	id:foo	input 要素の id 属性値。
class:(class)	class:bar	input 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを [url your-url class:y2008 class:m01 class:d01] のようにして並べる。
minlength:(num)	minlength:10	この入力フィールドで許容される最小文字数。
maxlength:(num)	maxlength:90	この入力フィールドで許容される最大文字数。デフォルト: 400
size:(num)	size:50	この入力フィールドの size HTML 属性値。
akismet:author_url		Akismet を使うためのオプション。
placeholder watermark		値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。
default:user_url		項目のデフォルト値としてログインユーザーの情報を取得するオプション。
autocomplete:(value)	autocomplete:url	フォーム自動補完のためのオプション
list:(id)	list:foo	list オプション

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

例:

[url your-url "http://example.com"]

電話番号項目

tel と tel* はどちらも単一行入力のために用いられ、電話番号として適正な文字列のみ受け入れます。tel* は必須項目を示します。

オプション	使用例	説明
id:(id)	id:foo	input 要素の id 属性値。
class:(class)	class:bar	input 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを [tel your-tel class:y2008 class:m01 class:d01] のようにして並べる。
minlength:(num)	minlength:10	この入力フィールドで許容される最小文字数。
maxlength:(num)	maxlength:90	この入力フィールドで許容される最大文字数。デフォルト: 400
size:(num)	size:50	この入力フィールドの size HTML 属性値。
placeholder watermark		値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。
autocomplete:(value)	autocomplete:tel	フォーム自動補完のためのオプション
list:(id)	list:foo	list オプション

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

例:

[tel your-tel "123-456-7890"]

テキストエリア

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

オプション	使用例	説明
id:(id)	id:foo	textarea 要素の id 属性値。
class:(class)	class:bar	textarea 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを [textarea your-text class:y2008 class:m01 class:d01] のようにして並べる。
minlength:(num)	minlength:10	この入力フィールドで許容される最小文字数。
maxlength:(num)	maxlength:90	この入力フィールドで許容される最大文字数。デフォルト: 2,000
placeholder watermark		値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。
autocomplete:(value)	autocomplete:name	フォーム自動補完のためのオプション

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

例:

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

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

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

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

list オプション

単一行テキスト入力項目のためのフォームタグタイプ (text、text*、email、email*、tel、tel*、url、url*) は list オプションをサポートします。このオプションの値は input HTML 要素の list 属性として使われます。同一ドキュメント内に指定された id 属性を持つ datalist 要素がある場合、入力項目はそのデータリストを参照し、データリストに含まれる選択肢が入力案として提示されます。

この機能の典型的なユースケースには電話番号入力項目で国コードを提示するというものがあります。

デモ

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

上のフォームのソース:

Your Name (required)
[text* your-name size:30 maxlength: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"]