テキスト項目

This page is also available in English.

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

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

テキスト項目

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

オプション使用例説明
id:(id)id:fooinput 要素の id 属性値。
class:(class)class:barinput 要素の 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
 項目のデフォルト値としてログインユーザーの情報を取得するオプション。
autocomplete:(value)autocomplete:nameフォーム自動補完のためのオプション

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

例:

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

メールアドレス項目

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

オプション使用例説明
id:(id)id:fooinput 要素の id 属性値。
class:(class)class:barinput 要素の 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 項目のデフォルト値としてログインユーザーの情報を取得するオプション。
autocomplete:(value)autocomplete:emailフォーム自動補完のためのオプション

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

例:

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

URL 項目

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

オプション使用例説明
id:(id)id:fooinput 要素の id 属性値。
class:(class)class:barinput 要素の 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 項目のデフォルト値としてログインユーザーの情報を取得するオプション。
autocomplete:(value)autocomplete:urlフォーム自動補完のためのオプション

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

例:

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

電話番号項目

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

オプション使用例説明
id:(id)id:fooinput 要素の id 属性値。
class:(class)class:barinput 要素の 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 のエイリアス。
autocomplete:(value)autocomplete:telフォーム自動補完のためのオプション

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

例:

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

テキストエリア

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

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

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

例:

[textarea your-message "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"]

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