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.
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. | |
autocomplete :(value) | autocomplete:name | Options for form autocompletion |
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.
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. | |
autocomplete: (value) | autocomplete:email | Options for form autocompletion |
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.
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. | |
autocomplete: (value) | autocomplete:url | Options for form autocompletion |
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.
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 . | |
autocomplete: (value) | autocomplete:tel | Options for form autocompletion |
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.
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 . | |
autocomplete: (value) | autocomplete:name | Options for form autocompletion |
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.
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"]