詩語，作者 Contact Form 7 文件

Max & min length options and character count

Contact Form 7 4.1 has introduced maxlength and minlength options to some form-tags, and a new type of form-tag for a Twitter-like character count.

Maxlength & minlength options#Maxlength & minlength options

Maxlength and minlength are based on the HTML5 attributes of the same names that specify the maximum and minimum length allowed for input fields.

Form-tag types that support both maxlength and minlength are: text, textarea, email, url, tel, quiz, and captchar (CAPTCHA Response). These form-tags (except quiz and captchar) also support user input validation based on character length.

Example:

[textarea* your-message minlength:10 maxlength:140]

With the textarea form-tag in this example, you will see a validation error message if your input is shorter than 10 characters or longer than 140 characters. However, most browsers block you from typing beyond the maxlength limit.

The old format for maxlength (such as [textarea* your-message 40/140]) is still available, but an explicit maxlength option (if set) will override it.

Character count#Character count

You may want a character count for an input field with the maxlength option, which tells how many characters you have typed, or you can type into the field, up to the limit of the maxlength.

To add a character count, insert a count form-tag into your form. count only works as a placeholder for a character count (integer). Note that the tag has to have the same name as the targeted input field.

For example, if you have this field (name = 「your-message」):

[textarea* your-message minlength:10 maxlength:140]

and want a character count for the field, add [count your-message]:

[textarea* your-message minlength:10 maxlength:140]
[count your-message]

By default, count displays the character count in the targeted field, so its integer value increases as you type.

You can also reverse this to make it display the character count remaining up to the maxlength of the targeted field. To do so, add a down option into the count form-tag:

[textarea* your-message minlength:10 maxlength:140]
[count your-message down]

In this case, count shows 「140」 at first, decreasing as you type; when you have typed 140 characters, it will show 「0」.

Demo#Demo

140
Δ

View source of above form:

[textarea* your-message minlength:10 maxlength:140]
[count your-message]

[textarea* your-message-2 minlength:10 maxlength:140]
[count your-message-2 down]

Share this:FacebookTwitterLike this:Like Loading...

Checkboxes, radio buttons, and menus

Contact Form 7 provides several types of form-tags for representing checkboxes, radio buttons, and drop-down menus. This article explains about the usage and semantics of these form-tags.

Checkboxes and radio buttons#Checkboxes and radio buttons

Both checkbox and checkbox* represent a group of checkboxes ( in HTML). checkbox* requires the user to select at least one of the boxes.

radio represents a group of radio buttons ( in HTML). Because a group of radio buttons is naturally required, a radio form-tag works as a required field. It is advised to preselect an option in a radio button group using the default:1 option.

OptionExamplesDescriptionid:(id)id:fooid attribute value of the wrapper element.class:(class)class:barclass attribute value of the wrapper element. To set two or more classes, you can use multiple class: option.default:(num)default:2default:1_2_3Preselected options. The integer following default: is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with underbar (_), as default:1_2_3.label_first By default, a checkbox or a radio button are put first, and a label last. By adding label_first option, you can reverse them.use_label_element Wrap each checkbox and radio button with tag.exclusive Make checkboxes exclusive. This means, when you select a checkbox in a group, others will be cleared, so the group accepts the zero-selected or one-selected state only. This is a JavaScript gimmick so doesn』t work without JavaScript. radio form-tags don』t support this option.free_text Append a free input text field to the last item.data:(name)data:countriesGet the values from Listo.

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

Drop-down menus#Drop-down menus

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

OptionExamplesDescriptionid:(id)id:fooid attribute value of the select element.class:(class)class:barclass attribute value of the select element. To set two or more classes, you can use multiple class: option.default:(num)default:2default:1_2_3Preselected options. The integer following default: is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with underbar (_), as default:1_2_3.multiple Make the drop-down menu multi-selectable.include_blank Insert a blank item into the top of options of this drop-down menu.first_as_label Use the first value as a label.data:(name)data:countriesGet the values from Listo.

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

Editing messages

You can edit messages used in various situations in the Messages tab panel. Some messages are notifications to the submitter of the status of the contact form, such as:

Thank you for your message. It has been sent.One or more fields have an error. Please check and try again.

Other messages are notifications that there is a validation error in the input field:

This field is required.This telephone number is invalid.

HTML tags or entities cannot be used in a message, so use plain text only. You』ll see a warning when you insert HTML into a message.

On the other hand, you can use Contact Form 7』s mail-tags in a message. This may be useful when you want to embed a user input into a message, like the following example:

Thanks [your-name], your message has been sent!

This [your-name] is a mail-tag that will be replaced with an actual user input through the your-name field.

Setting placeholder text

Placeholder text is descriptive text displayed inside an input field until the field is filled. It disappears when you start typing in the field. Placeholder text is commonly used in current user interfaces so you have probably seen it before.

To set placeholder text in a field in your form, you only need to add a placeholder option and a text value to the form-tag representing the field.

[text your-name placeholder "Your name here"]
Δ

You can use the placeholder option in the following types of form tags: text, email, url, tel, textarea, number, range, date, and captchar.

The placeholder text you set in the form tag is output into HTML as the value of the placeholder attribute in the input field. For legacy browsers that don』t support HTML5』s placeholder attribute, Contact Form 7 also provides JavaScript-based placeholder implementation.

The placeholder option is available on Contact Form 7 3.4 and higher. Users of older versions can still use watermark instead of placeholder. In Contact Form 7 3.4 and higher, watermark is treated as an alias of placeholder so you don』t need to change watermark to placeholder when you update the plugin.
Share this:FacebookTwitterLike this:Like Loading...

File uploading and attachment

In this post, I will explain the file uploading and attachment feature of Contact Form 7. With this feature, you can allow your users to upload their files via your form, and then an email with attachments of the files is sent to you.

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#Adding file uploading fields in your form

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

OptionExamplesDescriptionid:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [file your-file class:y2008 class:m01 class:d01].filetypes:(filetypes)filetypes:gif|png|jpg|jpegAcceptable file types. List the file extensions after filetypes:, and separate them with 『|』 (pipe) character when you set multiple file types.limit:(num)limit:1048576limit:1024kblimit:1mbLimit the max file size acceptable. You can use kb (kilo byte) or mb (mega byte) suffix optionally. If you omit suffix, the number means bytes. Note that you can』t use a decimal point in it (i.e., like this: [file your-file limit:1.5mb]) and it will be ignored if it exists.

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 an email#Setting up file attachments with an email

To attach the uploaded files to the mail, put mail-tags corresponding to form-tags for file uploading fields into File attachments field in the Mail tab panel like shown below:

Screenshot of File Attachment field

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 put in the File attachments field is [your-file] (mail-tag), not [file your-file filetypes:pdf] (this is not a mail-tag but a form-tag).

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

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

How tags work

Local file attachment#Local file attachment

Contact Form 7 supports local file attachment. You can put local file paths in the File attachments field and those files will be attached to the email as well as uploaded files.

Put a file path per line. When the path is not an absolute path, it will be treated as a relative path to the wp-content directory.

For security reasons, specifying files outside of the wp-content directory for email attachments is not allowed, so place the files in the wp-content or its subdirectory.

Example:

[your-file][your-another-file]
uploads/2013/08/08/boringguide.pdf

How your uploaded files are managed#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 is wp-content/uploads/wpcf7_uploads by default. It may differ if you have changed upload path setting from wp-content/uploads.

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 customize this directory path by defining the WPCF7_UPLOADS_TMP_DIR constant like the following:

define( 'WPCF7_UPLOADS_TMP_DIR', 'your-custom-tmp-dir' );

You can set the constant value to an absolute directory path or a relative path to the WordPress content directory (WP_CONTENT_DIR). Be aware that, even in cases where you set it to an absolute directory path, you can only specify a directory that is located under the content directory. Otherwise, the constant will be ignored.
Share this:FacebookTwitterLike this:Like Loading...

其他設定

您可以透過將特定格式的程式碼片段新增到聯絡表單編輯器螢幕的「附加設定」選項卡面板中，為每個聯絡表單新增附加設定。

預設情況下，Contact Form 7 支援以下型別的設定。

僅限訂閱者模式

subscribers_only: true

您可能希望確保只有登入使用者才能提交您的聯絡表單。在這種情況下，請使用僅限訂閱者模式。在此模式下，未登入使用者無法提交聯絡表單，並且會看到一條訊息，通知他們需要登入，而登入使用者可以照常使用。

在僅限訂閱者模式下，不會為聯絡表單提供反垃圾郵件驗證，因為只有受歡迎的人才能使用它們。如果此假設不適用於您的站點，則僅限訂閱者模式可能不是您的好選擇。

演示模式

demo_mode: on

如果您 demo_mode: on 在「附加設定」欄位中進行設定，則聯絡表單將處於演示模式。在這種模式下，聯絡表單將跳過傳送郵件的過程，只顯示「成功完成」作為響應訊息。

跳過郵件

skip_mail: on

該 skip_mail 設定的工作方式與幾乎相同 demo_mode，但 skip_mail 僅跳過郵件傳送。與不同 demo_mode，skip_mail 不會影響其他活動，例如使用 Flamingo 儲存訊息。

驗收作為驗證

acceptance_as_validation: on

預設情況下，接受覈取方塊的行為與其他型別的欄位不同；即使未選中該框，它也不會顯示驗證錯誤訊息。如果您 acceptance_as_validation: on 在「其他設定」欄位中進行設定，則聯絡表單中的接受覈取方塊的行為方式與其他表單欄位相同。

有關詳細資訊，請參閱接受覈取方塊。

火烈鳥設定

您可以自定義 Flamingo 管理螢幕中顯示的主題和發件人欄位值。有關更多詳細資訊，請參閱使用 Flamingo 儲存提交的訊息。

抑制訊息儲存

do_not_store: true

此設定告訴訊息儲存模組，例如 Flamingo，不要透過此聯絡表單儲存訊息。

JavaScript 程式碼

on_sent_ok: "alert('sent ok');"  on_submit: "alert('submit');"

如果設定 on_sent_ok: 後跟一行 JavaScript 程式碼，則可以告訴聯絡表單郵件傳送成功時應執行的程式碼。同樣，使用 on_submit:，您可以告訴在提交表單時應該執行的程式碼，而不管結果如何。

另請參閱：使用 Google Analytics 跟蹤表單提交並在提交後重定向到另一個 URL

注意： on_sent_ok並on_submit已從聯絡表 7 5.0 中正式刪除。您可以使用 DOM 事件代替這些設定。

Getting default values from the context

The default value of an input field is usually derived from the form-tag』s value part. It is, however, possible to get the default values from the context within which the form is placed.

To do this, add default:{source} option to the form-tag from which you want to derive the default value. Available data sources are: get (HTTP GET variables), post (HTTP POST variables), and post_meta (custom fields). Logged-in user information is also available.

For example, you have a field with a name 「your-name」:

[text* your-name]

To get the default value from HTTP GET variables, add default:get option to the form-tag:

[text* your-name default:get]

The field will obtain its default value from the GET variable with the same name (「your-name」). Try this by accessing the URL of the page of the form with an additional query string:

http://example.com/contact/?your-name=John+Smith

If it works correctly, you should see 「John Smith」 in the field.

Using the same logic, the custom field value is used for the default value of the field if: you have default:post_meta option in the form-tag; and the page containing the form has a custom field named 「your-name」.

But what if you have two or more default options in a single form-tag? Let』s consider this form-tag』s case:

[text* your-name default:get default:post_meta "Your Name"]

This form-tag has two default options and a value 「Your Name」. The options are evaluated from the first to the last. In this example, default:get is evaluated first. If the 「your-name」 GET variable has a value, it will be used for the default value. If that value is empty, default:post_meta will be evaluated next. If both of these options do not have values, 「Your Name」 will be used.
Share this:FacebookTwitterLike this:Like Loading...

Contact Form 7 聯絡表單入門

本指南介紹了 WordPress 的 Contact Form 7 外掛。需要 WordPress 管理的基本知識。本教程透過各種示例說明了如何在頁面上顯示錶單，以及如何自定義表單和郵件。

顯示錶格

讓我們從在您的頁面上顯示一個表單開始。首先，開啟 WordPress 管理螢幕上的聯絡 > 聯絡表單選單。您可以在那裡管理多個聯絡表格。

安裝 Contact Form 7 外掛後，您將看到一個名為「Contact form 1」的預設表單，以及如下程式碼：

[contact-form-7 id="1234" title="Contact form 1"]

複製此程式碼。然後，開啟您希望在其中放置聯絡表格的頁面（頁面 > 所有頁面）的編輯選單。一種流行的做法是為聯絡表單頁面建立一個名為「Contact」的頁面。將您複製的程式碼貼上到頁面內容中。

聯絡表格 7 5.3 及更高版本支援塊編輯器的聯絡表格選擇器塊。此塊允許您簡單地從您定義的聯絡表格列表中選擇一個聯絡表格，而不是複製和貼上短程式碼。

聯絡表單短程式碼仍然可用，當您想要新增自定義屬性時，或者當您有太多聯絡表單無法在單個列表中顯示時，您會發現它們非常有用。

現在您的聯絡表格設定已完成。您網站的訪問者現在可以找到該表單並開始向您提交訊息。

接下來，讓我們看看如何自定義表單和郵件內容。

自定義表單

您可能會覺得預設表單對您來說太簡單了，並且想要向其中新增更多欄位。您可以在管理螢幕中編輯表單模板。

要將欄位新增到表單，請為它們製作標籤並將它們插入到「表單」選項卡面板中的表單模板中。您會在表單模板中發現不熟悉的程式碼，例如 [text* your-name]. 這些程式碼在聯絡表 7 的詞彙表中稱為「標籤」。

標籤的語法相當複雜，但別擔心！你不必學習它。您可以使用標籤生成器工具生成任意數量的標籤。

標籤中的第二個字是它的名字。例如，名稱[text* your-name]為「您的姓名」。此名稱很重要，因為它稍後會在您的郵件模板中使用。

自定義郵件

您可以像使用表單模板一樣在「郵件」選項卡面板中編輯郵件模板。您也可以在那裡使用標籤，但請注意郵件標籤與表單標籤不同。

您可以在郵件模板中使用的標籤在括號中僅包含一個單詞，看起來像 [your-name]. 您應該知道這個「您的名字」與前面示例中提到的表單標籤的名稱相同。這兩個標籤具有相同的名稱。

在郵件中，[your-name]將被使用者的輸入值替換，該值透過相應的表單欄位提交，在本例中為[text* your-name]。

也可以看看

Really Simple CAPTCHA

[Edit: 2015-09-17] Contact Form 7 4.3 and later recommend reCAPTCHA instead of Really Simple CAPTCHA. For more details, see Contact Form 7 4.3.

Contact Form 7 allows you to insert a CAPTCHA into your contact form to prevent bots from submitting forms. Contact Form 7 utilizes Really Simple CAPTCHA as its officially-sanctioned CAPTCHA module, so you will need to install the Really Simple CAPTCHA plugin before you use CAPTCHA in your form.

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#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-content/uploads/wpcf7_captcha, but it can be different depending on your settings.

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.

How to use CAPTCHA#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 element for a CAPTCHA image. captchar means CAPTCHA-Response and it represents an 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#CAPTCHA-Challenge

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

OptionExamplesDescriptionid:(id)id:fooid attribute value of the img element.class:(class)class:barclass attribute value of the img element. To set two or more classes, you can use multiple class: option, like [captchac your-captcha class:y2008 class:m01 class:d01].size:(sml)size:sImage size. Only size:s (60×20), size:m (72×24) and size:l (84×28) are available.fg:#(hex)fg:#ff0000Foreground color of the image. Put RGB color code in hex format after fg:#.bg:#(hex)bg:#00ffffBackground color of the image. Put RGB color code in hex format after bg:#.

Example:

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

CAPTCHA-Response#CAPTCHA-Response

captchar means CAPTCHA-Response and it represents a response input field ( in HTML).

Example:

[captchar your-captcha]

Demo#Demo

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

1) Default
Input this code:

2) Small size, inverted
Input this code:

3) Large size, green text
Input this code:

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"]
Share this:FacebookTwitterLike this:Like Loading...

與外部 API 整合

這個聯絡表單外掛的內建功能是有限的，但是，在各種外部服務的幫助下，您的聯絡表單的可能性是無限的。

您可以在聯絡 > 整合中管理與外部 API 的整合。列出了多個類別的服務。如果您對這些服務感興趣，請訪問他們的說明頁面以瞭解更多資訊。