テキスト項目

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

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

テキスト項目

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

text と text* で利用可能なオプション
オプション 使用例 説明
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 この入力フィールドで許容される最大文字数
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
項目のデフォルト値としてログインユーザーの情報を取得するオプション。

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

例:

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

メールアドレス項目

emailemail* はどちらも単一行入力のために用いられ、メールアドレスとして適正な文字列のみ受け入れます。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 この入力フィールドで許容される最大文字数
size:(num) size:50 この入力フィールドの size HTML 属性値。
akismet:author_email Akismet を使うためのオプション。
placeholder
watermark
値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。
default:user_email 項目のデフォルト値としてログインユーザーの情報を取得するオプション。

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

例:

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

URL 項目

urlurl* はどちらも単一行入力のために用いられ、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 この入力フィールドで許容される最大文字数
size:(num) size:50 この入力フィールドの size HTML 属性値。
akismet:author_url Akismet を使うためのオプション。
placeholder
watermark
値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。
default:user_url 項目のデフォルト値としてログインユーザーの情報を取得するオプション。

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

例:

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

電話番号項目

teltel* はどちらも単一行入力のために用いられ、電話番号として適正な文字列のみ受け入れます。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 この入力フィールドで許容される最大文字数
size:(num) size:50 この入力フィールドの size HTML 属性値。
placeholder
watermark
値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。

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

例:

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

テキストエリア

textareatextarea* はどちらも複数行入力のために用いられ、任意の形式のテキストを受け入れます。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 この入力フィールドで許容される最大文字数
(行数)x(列数) 40x10
80x
x4
テキストエリアの行数(幅)と列数(高さ)。片方を省略することも可能。
placeholder
watermark
値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。

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

例:

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

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

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

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

デモ

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

Your Name (required)

Your Email (required)

Your Message

上のフォームのソース:

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"]

Just another contact form plugin for WordPress. Simple but flexible.