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 field (text and text*); email field (email and email*); telephone number field (tel and tel*); URL field (url and url*); and textarea (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
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].
minlength:(num) minlength:10 The minimum length allowed for this input field.
maxlength:(num) maxlength:90 The maximum length allowed for this input field.
size:(num) size:50 The value of size HTML attribute of this input field.
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 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
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].
minlength:(num) minlength:10 The minimum length allowed for this input field.
maxlength:(num) maxlength:90 The maximum length allowed for this input field.
size:(num) size:50 The value of size HTML attribute of this input field.
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 "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
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].
minlength:(num) minlength:10 The minimum length allowed for this input field.
maxlength:(num) maxlength:90 The maximum length allowed for this input field.
size:(num) size:50 The value of size HTML attribute of this input field.
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 "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
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].
minlength:(num) minlength:10 The minimum length allowed for this input field.
maxlength:(num) maxlength:90 The maximum length allowed for this input field.
size:(num) size:50 The value of size HTML attribute of this input field.
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 "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
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].
minlength:(num) minlength:10 The minimum length allowed for this input field.
maxlength:(num) maxlength:90 The maximum length allowed for this input field.
(cols)x(rows) 40x10
80x
x4
Columns (width) and rows (height) of text area. You can omit one of them.
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 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.