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; text*; email; email*; tel; tel*; url; url*; 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 |
|---|---|---|
| (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 | 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 20/40 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 |
|---|---|---|
| (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. | |
| 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 40/100 "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 |
|---|---|---|
| (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 [url your-url class:y2008 class:m01 class:d01]. |
| tabindex:(num) | tabindex:10 |
tabindex attribute value of the input element. |
| 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 40/100 "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 |
|---|---|---|
| (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 [url your-url class:y2008 class:m01 class:d01]. |
| tabindex:(num) | tabindex:10 |
tabindex attribute value of the input element. |
| 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 40/100 "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 |
|---|---|---|
| (cols)x(rows) | 40x1080xx4 |
Columns (width) and rows (height) of text area. You can omit one of them. |
| /(maxlength) | /144 |
Represents the maxlength attribute value of the textarea element. The number of characters user can input. |
| 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. |
| 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.
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"]
