8. Text fields

Created by Danny Wong, Modified on Sun, 09 Aug 2020 at 03:37 PM by Danny Wong

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#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.

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#Email field

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

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#URL field

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

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#Telephone number field

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

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#Textarea

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

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.
`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 "your message here …"]

There is another way to set the default value for a textarea field:

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

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

Demo#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 the preceding 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"]