Text Fields

Text input fields are the most common factors of a contact form. As you may know, HTML has two types of elements for text input fields: <input type="text"> for a single-line input; and <textarea> for multi-line input.

Contact Form 7 provides several types of form tags for representing these two types of HTML elements: text; text*; email; email*; tel; tel*; url; url*; textarea; and textarea*. In this article, I will show you detailed information about the usage and semantics of these form tags.

Text field

Both text and text* are used for single-line input and accept any form of text. The difference between them is that text* connotes a required field. In Contact Form 7′s convention, all types of tags with an asterisk ‘*’ mean that these are required fields.

Available options for text and text*
Option Examples Description
(size)/(maxlength) 40/100
20/
/50
Field size and max length. You can omit one of them.
id:(id) id:foo id attribute value of the input element.
class:(class) class:bar class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [text your-text class:y2008 class:m01 class:d01].
tabindex:(num) tabindex:10 tabindex attribute value of the input element.
akismet:author Options for using Akismet.
placeholder
watermark
Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder
default:user_login
default:user_first_name
default:user_last_name
default:user_nickname
default:user_display_name
Options for retrieving logged-in user info as default value of field.

These fields can have a zero or one value, and the value will be used as the default value of the input field.

Example:

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

Email field

Both email and email* are for single-line input and accept only e-mail addresses. email* is a required field.

Available options for email and email*
Option Examples Description
(size)/(maxlength) 40/100
20/
/50
Field size and max length. You can omit one of them.
id:(id) id:foo id attribute value of the input element.
class:(class) class:bar class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [email your-email class:y2008 class:m01 class:d01].
tabindex:(num) tabindex:10 tabindex attribute value of the input element.
akismet:author_email Option for using Akismet.
placeholder
watermark
Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder
default:user_email Options for retrieving logged-in user info as default value of field.

These fields can have a zero or one value, and the value will be used as the default value of the input field.

Example:

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

URL field

Both url and url* are for single-line input and accept only URL. url* is a required field.

Available options for url and url*
Option Examples Description
(size)/(maxlength) 40/100
20/
/50
Field size and max length. You can omit one of them.
id:(id) id:foo id attribute value of the input element.
class:(class) class:bar class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [url your-url class:y2008 class:m01 class:d01].
tabindex:(num) tabindex:10 tabindex attribute value of the input element.
akismet:author_url Options for using Akismet.
placeholder
watermark
Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder
default:user_url Options for retrieving logged-in user info as default value of field.

These fields can have a zero or one value, and the value will be used as the default value of the input field.

Example:

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

Telephone number field

Both tel and tel* are for single-line input and accept only telephone number. tel* is a required field.

Available options for tel and tel*
Option Examples Description
(size)/(maxlength) 40/100
20/
/50
Field size and max length. You can omit one of them.
id:(id) id:foo id attribute value of the input element.
class:(class) class:bar class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [url your-url class:y2008 class:m01 class:d01].
tabindex:(num) tabindex:10 tabindex attribute value of the input element.
placeholder
watermark
Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder

These fields can have a zero or one value, and the value will be used as the default value of the input field.

Example:

[tel your-tel 40/100 "123-456-7890"]

Textarea

Both textarea and textarea* are for a multi-line input and accept any form of text. textarea* is a required field.

Available options for textarea and textarea*
Option Examples Description
(cols)x(rows) 40x10
80x
x4
Columns (width) and rows (height) of text area. You can omit one of them.
/(maxlength) /144 Represents the maxlength attribute value of the textarea element. The number of characters user can input.
id:(id) id:foo id attribute value of the textarea element.
class:(class) class:bar class attribute value of the textarea element. To set two or more classes, you can use multiple class: option, like [textarea your-text class:y2008 class:m01 class:d01].
tabindex:(num) tabindex:10 tabindex attribute value of the textarea element.
placeholder
watermark
Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder

These fields can have zero or one value, and the value will be used as the default value of the input field.

Example:

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

In addition to this, below is another way to set the default value:

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

In this manner, you can set a mutli-line default value.

Demo

Note: This is a demo. This form doesn’t send a mail practically.

Your Name (required)

Your Email (required)

Your Message

View source of above form:

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

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