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 six types of form tags for representing these two types of HTML elements: text; text*; email; email*; textarea; and textarea*. In this article, I will show you detailed information about the usage and semantics of these form tags.
Text and Text*
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 |
|---|---|---|
| (size)/(maxlength) | 40/10020//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 akismet:author_url |
Options for using Akismet. | |
| watermark | Use the value as watermark text instead of as default value. | |
| default:user_login default:user_email default:user_url 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 and Email*
Both email and email* are for single-line input and accept only e-mail addresses. email* is a required field.
| Option | Examples | Description |
|---|---|---|
| (size)/(maxlength) | 40/10020//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. | |
| watermark | Use the value as watermark text instead of as default value. | |
| 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"]Textarea and 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 |
|---|---|---|
| (cols)x(rows) | 40x1080xx4 |
Columns (width) and rows (height) of text area. You can omit one of them. |
| 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. |
| watermark | Use the value as watermark text instead of as default value. |
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.
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"]