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.

OptionExamplesDescription
id:(id)id:fooid attribute value of the input element.
class:(class)class:barclass 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:10The minimum length allowed for this input field.
maxlength:(num)maxlength:90The maximum length allowed for this input field.
size:(num)size:50The 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.

OptionExamplesDescription
id:(id)id:fooid attribute value of the input element.
class:(class)class:barclass 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:10The minimum length allowed for this input field.
maxlength:(num)maxlength:90The maximum length allowed for this input field.
size:(num)size:50The 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.

OptionExamplesDescription
id:(id)id:fooid attribute value of the input element.
class:(class)class:barclass 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:10The minimum length allowed for this input field.
maxlength:(num)maxlength:90The maximum length allowed for this input field.
size:(num)size:50The 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.

OptionExamplesDescription
id:(id)id:fooid attribute value of the input element.
class:(class)class:barclass 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:10The minimum length allowed for this input field.
maxlength:(num)maxlength:90The maximum length allowed for this input field.
size:(num)size:50The 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.

OptionExamplesDescription
id:(id)id:fooid attribute value of the textarea element.
class:(class)class:barclass 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:10The minimum length allowed for this input field.
maxlength:(num)maxlength:90The 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

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

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

%d bloggers like this: