[submit]

You can add a value like this:

[submit "Send Mail"]

Did you notice that the submit tag’s syntax is bit different than other form tags? The submit tag does not have name part, which other form tags have.

In addition to this, you can add several options to submit tag.

Example:

[submit class:button id:form-submit "Send Mail"]

[A] Basic header fields (To, From and Subject):

These are basic and necessary message header fields; and you can embed mail tags anywhere in these fields.

[B] Message body:

This is the message body; you can embed mail tags anywhere in this field.

[C] Additional headers:

You can insert additional message header fields here, such as Cc and Bcc. There should be one field per line. You can embed mail tags anywhere in these fields.

[D] File attachments:

If you attach uploaded files to this mail, put mail tags for the uploaded files into this field.

[E] Use of HTML:

By default, plain text is used for the message body. To use HTML, check this box.

[F] Mail (2):

Mail (2) is yet another mail section, except that this is an optional section. Mail (2) works in completely the same manner as Mail. To activate Mail (2), check the Use mail (2) box.

First, you need to activate the Akismet. Akismet is comes automatically installed out-of-the-box so you just need to activate it and set up a WordPress.com API key.

Next, add the following Akismet-related options into the appropriate fields in your form.

• akismet:author
  Add this option to the field that accepts the name of the sender.
  Example: [text* your-name akismet:author]
• akismet:author_email
  Add this option to the field that accepts the email address of the sender.
  Example: [email* your-email akismet:author_email]
• akismet:author_url
  Add this option to the field that accepts the URL of the sender.
  Example: [text your-url akismet:author_url]

When at least one of those options are set (remember, it’s recommended to set all of the options for accurate judgment), Contact Form 7 will send Akismet all of the sender’s input and the information relating to the submitting activity. Akismet will then judge whether this submission is likely to be spam.

If Akismet judges the submission as spam, Contact Form 7 cancels the sending of mails and shows a message that says, “it failed to send the message.” You’ll see an orange border around the response message when it has been judged as spam.

Finally, to make sure it works, you can test it by sending “viagra-test-123″ as name of the sender. This test case will always be judged as spam.

The process is simple. Just insert an acceptance tag into your form like this:

[acceptance accept-this] Check here if you accept these terms.

Due to JavaScript magic, users won’t be able to press the submit button without first checking the box to accept your terms. In addition, you can invert it with an invert option, i.e. allowing users to submit only if they uncheck the checkbox.

Demo

Note: This is a demo. This form doesn’t send a mail practically.

View source of above form:

1) Default
[acceptance accept-this-1] Check here if you accept these terms.

2) Inverted
[acceptance accept-this-2 invert] Uncheck here if you accept these terms.

3) Checked by default + Inverted
[acceptance accept-this-3 invert default:on] Uncheck here if you accept these terms.

[submit "Send"]

In some cases, a simpler approach is more suitable. With this quiz feature, you can do it by using question/answer testing with simple text that you have the flexibility to create.

For example, when you insert this tag into your form:

[quiz capital-quiz "The capital of Japan?|Tokyo"]

The content before the pipe (‘|’) character (The capital of Japan?) will be used as the question. The content after the pipe (Tokyo) will be used as the expected answer.

If your senders prefer math, change the tag to look something like:

[quiz math-quiz "12+48=?|60"]

You can use any question and answer. To submit the form, the sender has to input the correct answer.

When you put multiple question/answer pairs in a tag, one of the pairs will be selected at random.

[quiz random-capital-quiz "The capital of Japan?|Tokyo"
                        "The capital of France?|Paris"
                        "The capital of Madagascar?|Antananarivo"]

Example:

[quiz capital-quiz 10/20 id:qatest "The capital of Japan?|Tokyo"]

In the tag generator for the quiz tag, make sure to enter one pair per line.

The rest of this article will explain how to use CAPTCHA with Contact Form 7, based on the assumption that you have already installed Really Simple CAPTCHA.

Before using CAPTCHA

Really Simple CAPTCHA requires that GD and FreeType PHP libraries be installed on your server in order to create CAPTCHA images. If you are not certain if they are installed, ask your server administrator.

Contact Form 7 creates a temporary folder and stores any CAPTCHA files there. In most cases, the location of the temporary folder is wp-contents/uploads/wpcf7_captcha, but it can be different depending on your settings.

Open the Settings > Miscellaneous menu, and check the setting for Store uploads in this folder field. The default is wp-content/uploads. Normally, Contact Form 7 creates a wpcf7_captcha folder in this location and uses it as the temporary folder for any CAPTCHA files.

This folder is created automatically, but sometimes it can fail. A possible cause for this is that the parent folder doesn’t have sufficient writing permissions. In such cases, you can change the permissions or create a folder manually.

You can also change the path of the temporary folder by setting the WPCF7_CAPTCHA_TMP_DIR constant in your wp-config.php like this:

define( 'WPCF7_CAPTCHA_TMP_DIR', '/your/file/path' );

If WPCF7_CAPTCHA_TMP_DIR is defined, this directory is used as the temporary folder instead.

Make certain your temporary folder for CAPTCHA files exists and is writable. Otherwise, CAPTCHA can not be created.

How to use CAPTCHA

To add a CAPTCHA into your contact form, you must utilize captchac and captchar form tags.

captchac means CAPTCHA-Challenge and it represents an <img> element for a CAPTCHA image. captchar means CAPTCHA-Response and it represents an <input type="text"> element for a response input field.

A captchac tag must always be paired with a captchar tag with the same name. For example, tags shown below are valid:

[captchac captcha-1] [captchar captcha-1]

But these are invalid because they have different names. In this case, the CAPTCHA and its response do not match:

[captchac captcha-2] [captchar captcha-3]

CAPTCHA-Challenge

captchac means CAPTCHA-Challenge and it represents a CAPTCHA image (<img> in HTML).

Example:

[captchac your-captcha size:s fg:#ffffff bg:#000000]

CAPTCHA-Response

captchar means CAPTCHA-Response and it represents a response input field (<input type="text"> in HTML).

Example:

[captchar your-captcha 40/100]

Demo

Note: This is a demo. This form doesn’t send a mail practically.

View source of above form:

1) Default
Input this code: [captchac captcha-170]
[captchar captcha-170 4/4]

2) Small size, inverted
Input this code: [captchac captcha-778 size:s fg:#ffffff bg:#000000]
[captchar captcha-778 4/4]

3) Large size, green text
Input this code: [captchac captcha-118 size:l fg:#00ff00 bg:#ffffff]
[captchar captcha-118 4/4]

[submit "Send"]

To set up, two steps are needed: 1) Add file uploading fields in your form, 2) Set up your mail settings to attach the uploaded files. The two steps will be explained in the rest of this post.

Adding file uploading fields in your form

Like for other types of form fields, Contact Form 7 provides form tags for file uploading fields (<input type="file"> in HTML): file and file*. file* is a required field and requires the user to upload a file.

Example:

[file your-file filetypes:pdf|txt limit:2mb]

Contact Form 7 applies default restrictions for file type and file size when you do not set the filetypes: and limit: (file size) options explicitly. Default acceptable file types (extensions) are: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. Default acceptable file size is 1 MB (1048576 bytes).

Setting up file attachments with a mail

To attach the uploaded files to the mail, put mail tags corresponding to form tags for file uploading fields into ‘File attachments’ field as shown below.

In this example, the form tag for the file uploading field is:

[file your-file filetypes:pdf]

Therefore, the corresponding mail tag to this is:

[your-file]

Note that what you’re required to put in the ‘File attachments’ field is [your-file], not [file your-file filetypes:pdf].

If you have multiple files uploaded and want to attach them into an email, simply line them up in the ‘File attachments’ field like this:

[your-file][your-another-file]

How your uploaded files are managed

After a user uploads a file through your contact form, Contact Form 7 checks to see if: 1.) Any PHP errors have occurred; 2.) the file type and file size are valid; and then, if the check turns out okay, Contact Form 7 moves the uploaded file to a temporary folder. At this point, Contact Form 7 attaches the file to the mail and sends it. After these procedures, Contact Form 7 then removes the file from the temporary folder.

The location of the temporary folder depends upon your settings in WordPress. Open the Settings > Miscellaneous menu, and check the setting for Store uploads in this folder field. The default is wp-content/uploads. Normally, Contact Form 7 creates a wpcf7_uploads folder in this location and uses it as the temporary folder for any uploaded files.

This folder is created automatically, but sometimes it can fail. The most possible reason for this is that the parent folder doesn’t have sufficient writing permissions. In such cases, you can change the permissions or create a folder manually.

You can also change the path of the temporary folder by setting the WPCF7_UPLOADS_TMP_DIR constant in your wp-config.php like this:

define( 'WPCF7_UPLOADS_TMP_DIR', '/your/file/path' );

If WPCF7_UPLOADS_TMP_DIR is defined, this directory is used as the temporary folder instead.

Make certain your temporary folder for uploaded files exists and is writable. Otherwise, all file uploading will fail.

Checkbox, Checkbox* and Radio

Both checkbox and checkbox* represent a group of checkboxes (<input type="checkbox"> in HTML). checkbox* requires the user to check at least one of the boxes.

radio represents a group of radio buttons (<input type="radio"> in HTML). Note that there is no required version of radio (“radio*”). The reason Contact Form 7 doesn’t provide “radio*” is because a radio button is a required field by nature. The HTML spec document explains it more in detail.

These types of tags have one or more values, and the values will be used as the values and labels of the checkboxes or radio buttons.

Example:

[checkbox your-country "China" "India" "San Marino"]

Select and Select*

Both select and select* represent a drop-down menu (<select> in HTML). select* requires the user to select at least one option from the menu.

These types of tags have one or more values, and the values will be used as options in the drop-down menu.

Example:

[select your-country "China" "India" "San Marino"]

See also

• Selectable Recipient with Pipes

Demo

Note: This is a demo. This form doesn’t send a mail practically.

View source of above form:

Select Country (required)
[checkbox* your-country use_label_element "China" "India" "San Marino"]

Select Sports
[radio your-sports label_first default:2 "Football" "Tennis" "Pole-vault"]

Select Fruit (required)
[checkbox* your-fruit exclusive "Apple" "Banana" "Grape"]

Select Browser (required)
[select* your-browser include_blank "Firefox" "Safari" "Opera" "Lynx"]

Select Ghkdsjdf
[select your-ghkdsjdf multiple "fsdfs" "klgjfk" "vdrie"]

[submit "Send"]

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.

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.

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.

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

Tags for forms and tags for mail look different from each other, for example, you can use [text* your-name] in your form and [your-name] in your mail. They each have a different syntax.

Form Tag Syntax

A tag in a form template (“form tag”) will be replaced with an HTML element which represents an input field when it is displayed in an actual form. Components of a form tag are able to be separated into four parts: type, name, options and values.

Type is the most important factor, as it defines what type of HTML element will replace itself, and what kind of input is expected through it.

Name is used for identifying the input field. Most form tags have a name, but there are exceptions.

Options specify details of behavior and appearance. Options are optional.

In most cases, values are used for specifying default values. It is possible that values can be used for other purposes as well; it depends on the type of the tag. Values are optional.

See also

• Text Fields (text, text*, email, email*, textarea and textarea*)
• Checkboxes, Radio Buttons and Menus (checkbox, checkbox*, radio, select and select*)
• File Uploading and Attachment (file and file*)
• CAPTCHA (captchac and captchar)
• Quiz (quiz)
• Acceptance Checkbox (acceptance)
• Submit Button (submit)

Mail Tag Syntax

A tag in a mail template (“mail tag”) is much simpler. A mail tag has only one word in it. In most cases, the word corresponds to the name of a form tag, and it will be replaced with the form input through it.