English 
Japanese 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]. |
| akismet:author akismet:author_url |
Options for using Akismet. |
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]. |
| akismet:author_email | Option for using Akismet. |
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]. |
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"]
hey
nice plugin. have you considered adding hidden input type?
e.g. i have lot of pages i want to add one contact form. there is no point making for everyone their own form, so it would be cool if i can put page id or name into hidden value. So then i know from what page i was contacted from.
I don’t have a plan to add hidden field, but some kind of ability you can check from which post the message sent might be added in near future.
I do not understand all of the elements of text area values. How would I limit text length to 100 words? do the values refer to characters or words?
In the example above, I see
40×10
80x
x4
What units do these values represent?
You cannot limit text length.
40x10option just means the text area’s columns (width) = 40 and rows (height) = 10. The unit is width or height of a character in the font.Is it possible to set the default size of the Text Area Box? Changing the column width and height doesn’t seem to change the default size of the box. Similar to how a text field can be changed by setting the field size. Is anything like that available for the Text Area?
You can set styles with CSS stylesheets like this:
Is there a way to add an action to clear the default value of a text field onclick (i.e. using onClick=”this.value=””)?
Thank you very much for this plugin. It is very useful.
I’m trying to customize the text field width to 25 for a form in a text widget. The 40 setting is too wide for the sidebar. I don’t want to change the styles all of the forms on this site though, just that one text widget.
Where do I make this change?
You can use size option like this:
[text* your-name 25/40]Thanks for the nice plugin.
Is it possible to submit a value to a form field by URL?
i.e. by adding ?form-field-name=predefined-value to the URL, after which the specified form field gets the value from the URL?
No. It’s not possible.
Hi Takayuki,
Thankyou so much for making this plugin and releasing it for free. I have tried various form plugins and I’m in love with Contact Form 7. You are awesome!
Recently I setup a new blog where I needed to use the contact form in sidebar. It is such an amazing contact form that will fit almost anywhere. I have a question about quiz (that’s what I like using for validating form). Is there a way to limit the field length of the quiz? I have edited the width of all other fields to 30 but can’t find a way to do the same for quiz.
Would appreciate your help on this. Once again, thankyou so much for putting together such a useful plugin.
Regards,
Dev.
Quiz tag is described here.
Quiz
Is there documentation somewhere on what the valid classes are? Do these come from WordPress or are they standard HTML designations?