Author 詩語

管理員畫面

 

此聯繫表的標題 (❶) 。此標題只是聯繫表格的標籤，僅用於管理目的。您可以使用任何您喜歡的標題，例如 「求職申請表」 、 「2014/02/14 活動表格」 等。

此聯繫表格的簡碼 (❷) 。複製此代碼並將其粘貼到您要放置此聯繫表單的帖子、頁面或文本小部件內容中。

您可以在此處保存、複製或刪除此聯繫表格 (❸) 。

表格選項卡

 

表格編輯欄 （❷） 。您可以在此處使用 HTML 和 form-tags 自定義表單內容。此字段中的換行符和空行會自動使用<br /> 和<p>HTML 標記進行格式化。

標籤生成器 (❶) 。通過使用這些標籤生成器，您可以在不瞭解它們的情況下生成表單標籤。

有關表單標籤的更多信息，請參閲編輯表單模板和標籤的工作原理。

郵件標籤

 

您可以編輯作為表單提交結果發送的郵件的郵件模板。您可以在這些字段中使用郵件標籤。

Mail(2) 模板是一個附加的郵件模板，它可以具有與主郵件模板不同的內容，也可用。

有關更多信息，請參閲設置郵件。

消息選項卡

 

您可以編輯用於各種情況的消息，包括 「發生驗證錯誤」 、 「請填寫必填字段」 等。

請注意，此處僅提供純文本。不允許在消息字段中使用 HTML 標記和實體。

有關更多信息，請參閲編輯消息。

附加設置選項卡

 

您可以在此處添加自定義代碼片段。有關詳細信息，請參閲其他設置。

Acceptance checkbox

An acceptance checkbox is a simple checkbox dedicated to confirming the submitter』s consent for a specific condition. Contact Form 7 provides the acceptance form-tag type to represent acceptance checkboxes.

To use an acceptance checkbox in your contact form, simply insert an [acceptance] form-tag into the Form tab panel field like this:

[acceptance your-consent] I consent to the conditions. [/acceptance]

Notice that, unlike other form-tag types, the [acceptance] tag has a closing tag ([/acceptance]) at the tail. The part between the opening and closing tags is the content of the form-tag. When you set content to an acceptance checkbox form-tag, it is interpreted as the condition for consent.

If you use Flamingo to store submission data to the database, the information about submitters』 consent will also be stored, and Flamingo allows you to do future reference.

By default, an acceptance checkbox works as a required field, so you can』t submit the form without selecting the checkbox. If you set the optional option explicitly, the checkbox works as an optional field. If you set the invert option, it will invert the behavior so, in this case, you can』t submit the form without clearing the checkbox.

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 [acceptance accept-this class:y2008 class:m01 class:d01].optional The acceptance checkbox works as an optional field.invert Allow users to submit only if they clear the checkbox.default:on The checkbox is selected by default.

Demo

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

1) Default
Check here if you accept these terms.
2) Inverted
Uncheck here if you accept these terms.
3) Selected by default + Inverted
Uncheck here if you accept these terms.

Δ

View source of the preceding form:

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

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

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

[submit "Send"]

Acceptance as validation#Acceptance as validation

By default, an acceptance checkbox is a different mechanism than general input validation, and it runs after all validation succeeds. You might want to change this behavior to make it work like other validation because you think it』s less confusing for submitters than the default behavior. In such cases, add this line to the Additional Settings section:

acceptance_as_validation: on

This setting makes all acceptance checkboxes in the form work like validation, and shows the usual validation error message next to the checkbox if the submitter doesn』t check the box.

See also

How to make privacy-friendly contact forms

Share this:FacebookTwitterLike this:Like Loading...

文本字段

文本輸入字段是聯繫表單中最常見的因素。您可能知道，HTML 有兩種類型的文本輸入字段元素：<input type="text"> 用於單行輸入；和<textarea> 多行輸入。

Contact Form 7 提供了幾種類型的表單標籤來表示這兩種類型的 HTML 元素：文本字段（text 和 text*）；電子郵件字段（email 和 email*）；電話號碼字段（tel 和 tel*）；URL 字段（url 和 url*）；和文本區域（textarea 和 textarea*） 。在本文中，我將向您展示有關這些表單標籤的用法和語義的詳細信息。

文本域

兩個 text 和 text*用於單行輸入和接受任何形式的文字。它們之間的區別在於表示 text*必填字段。在聯繫表格 7 的約定中，所有類型的帶有星號 「*」 的標籤表示這些都是必填字段。

選項	例子	描述
id:（ID）	id:foo	idinput 元素的屬性值。
class:（班級）	class:bar	classinput 元素的屬性值。要設置兩個或更多類，您可以使用多個 class: 選項，例如 [text your-text class:y2008 class:m01 class:d01].
minlength:(數量)	minlength:10	此輸入字段允許的最小長度。
maxlength:(數量)	maxlength:90	此輸入字段允許的最大長度。
size:(數量)	size:50	size 此輸入字段的 HTML 屬性值。
akismet:author		使用 Akismet 的選項。
placeholder watermark		將該值用作佔位符文本而不是默認值。 watermark 作為 的別名工作 placeholder 。
default:user_login default:user_first_name default:user_last_name default:user_nickname default:user_display_name		用於檢索登錄用户信息作為字段默認值的選項。

這些字段的值可以為零或一，該值將用作輸入字段的默認值。

例子：

[text* your-name class:required "John Smith"]

電子郵件字段

這兩個 email 和 email*是單行輸入，只接受電子郵件地址。 email*是必填字段。

選項	例子	描述
id:（ID）	id:foo	idinput 元素的屬性值。
class:（班級）	class:bar	classinput 元素的屬性值。要設置兩個或更多類，您可以使用多個 class: 選項，例如 [email your-email class:y2008 class:m01 class:d01].
minlength:(數量)	minlength:10	此輸入字段允許的最小長度。
maxlength:(數量)	maxlength:90	此輸入字段允許的最大長度。
size:(數量)	size:50	size 此輸入字段的 HTML 屬性值。
akismet:author_email		使用 Akismet 的選項。
placeholder watermark		將該值用作佔位符文本而不是默認值。 watermark 作為 的別名工作 placeholder 。
default:user_email		用於檢索登錄用户信息作為字段默認值的選項。

這些字段的值可以為零或一，該值將用作輸入字段的默認值。

例子：

[email your-email "[email protected]"]

網址字段

這兩個 url 和 url*是單行輸入，只接受 URL 。 url*是必填字段。

選項	例子	描述
id:（ID）	id:foo	idinput 元素的屬性值。
class:（班級）	class:bar	classinput 元素的屬性值。要設置兩個或更多類，您可以使用多個 class: 選項，例如 [url your-url class:y2008 class:m01 class:d01].
minlength:(數量)	minlength:10	此輸入字段允許的最小長度。
maxlength:(數量)	maxlength:90	此輸入字段允許的最大長度。
size:(數量)	size:50	size 此輸入字段的 HTML 屬性值。
akismet:author_url		使用 Akismet 的選項。
placeholder watermark		將該值用作佔位符文本而不是默認值。 watermark 作為 的別名工作 placeholder 。
default:user_url		用於檢索登錄用户信息作為字段默認值的選項。

這些字段的值可以為零或一，該值將用作輸入字段的默認值。

例子：

[url your-url "http://example.com"]

電話號碼字段

這兩個 tel 和 tel*是單行輸入，只接受電話號碼。 tel*是必填字段。

選項	例子	描述
id:（ID）	id:foo	idinput 元素的屬性值。
class:（班級）	class:bar	classinput 元素的屬性值。要設置兩個或更多類，您可以使用多個 class: 選項，例如 [url your-url class:y2008 class:m01 class:d01].
minlength:(數量)	minlength:10	此輸入字段允許的最小長度。
maxlength:(數量)	maxlength:90	此輸入字段允許的最大長度。
size:(數量)	size:50	size 此輸入字段的 HTML 屬性值。
placeholder watermark		將該值用作佔位符文本而不是默認值。 watermark 作為 的別名工作 placeholder 。

這些字段的值可以為零或一，該值將用作輸入字段的默認值。

例子：

[tel your-tel "123-456-7890"]

文本區

這兩個 textarea 和 textarea*是一個多行輸入和接受任何形式的文本。 textarea*是必填字段。

選項	例子	描述
id:（ID）	id:foo	idtextarea 元素的屬性值。
class:（班級）	class:bar	classtextarea 元素的屬性值。要設置兩個或更多類，您可以使用多個 class: 選項，例如 [textarea your-text class:y2008 class:m01 class:d01].
minlength:(數量)	minlength:10	此輸入字段允許的最小長度。
maxlength:(數量)	maxlength:90	此輸入字段允許的最大長度。
placeholder watermark		將該值用作佔位符文本而不是默認值。 watermark 作為 的別名工作 placeholder 。

這些字段可以有零個或一個值，該值將用作輸入字段的默認值。

例子：

[textarea your-message "your message here …"]

還有另一種方法可以為 textarea 字段設置默認值：

[textarea your-message]   foo   bar  [/textarea]

通過這種方式，您可以設置多行默認值。

演示

注意：這是一個演示。這種形式實際上不發送郵件。

 

查看上述表格的來源：

您的姓名 （必填）[text* your-name size:30 maxlength:60]    您的邮箱 （必填）[email* your-email "[email protected]"]    您的留言  [textarea your-message]  default value for a textarea  can be multi-line  like this  [/textarea]    [submit "发送"]

標籤的工作原理

您可以使用各種類型的標籤 （用方括號括起來的字符串） 來編輯表單和電子郵件的模板。 Contact Form 7 為表單模板和電子郵件模板提供了兩種不同類型的標籤：form-tags 和 mail-tags 。

這兩種類型的語法完全不同。例如，您[text* your-name]在表單模板和[your-name]電子郵件模板中使用。

表單標籤語法#表單標籤語法

表單模板中的標籤 (form-tag) 將被替換為 HTML 代碼段，該代碼段在呈現表單時表示輸入字段。表單標籤的組件可以分為四部分：類型、名稱、選項和值。

類型是最重要的因素，因為它定義了將替換自己的 HTML 元素的類型，以及期望通過它的輸入類型。

名稱用於標識輸入字段。大多數表單標籤都有一個名稱，但也有例外。

選項指定行為和外觀的細節。選項是可選的。

在大多數情況下，值用於指定默認值。這些值也可能用於其他目的；這取決於標籤的類型。值是可選的。

請注意，這些部分的順序很重要。選項不能在名稱之前，值不能在選項之前。

表單標籤類型列表

• 文本字段（text，text*，email，email*，tel，tel*，url，url*，textarea和textarea*）
• 數字字段（number，number*，range和range*）
• 日期字段（date和date*）
• 複選框，單選按鈕，和菜單（checkbox，checkbox*，radio，select和select*）
• 文件上傳字段（file和file*）
• 測驗( quiz)
• 接受複選框( acceptance)
• 提交按鈕( submit)

郵件標籤語法#郵件標籤語法

郵件模板 (mail-tag) 中的標籤要簡單得多。郵件標籤中只有一個詞。在大多數情況下，這個詞對應一個表單標籤的名稱，它會被通過它輸入的表單替換。

Hidden field

A hidden field is a special input field whose value is sent with a form submission like other fields, but the field itself is not rendered and invisible on the front end.

Contact Form 7 supports the hidden form-tag type to represent hidden fields.

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 [hidden your-text class:y2008 class:m01 class:d01].default:(source)  Getting default values from the context Setting default values to the logged-in user Getting default values from shortcode attributes

Example:

[hidden your-email default:user_email "[email protected]"]
Share this:FacebookTwitterLike this:Like Loading...

Number fields

A number field is a field for numeric value input. Contact Form 7 3.4 and higher provides two types of form-tag for number fields: number and range. These work the same except that they provide different types of user interface.

The new form-tag types, number and range, correspond with the HTML5 input types number and range, respectively. Currently, only some modern browsers support these input types.

Even among modern browsers, there may be differences in how those input fields are rendered on screen. In most cases, a number input is rendered as a spinner control while a range input is rendered as a slider control.

Older browsers and some modern browsers don』t support these input types and just render them as traditional text input fields.

Number field#Number field

Both number and number* are used for number input and accept numeric value. number* is a required field.

OptionExamplesDescriptionmin:(num)min:10min attribute value of the input element. Allowed minimum value for this field.max:(num)max:99max attribute value of the input element. Allowed maximum value for this field.step:(num)step:3step attribute value of the input element. When minimum number is 10 and step is 3, acceptable inputs are 10, 13, 16, 19, …id:(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 [number your-text class:y2008 class:m01 class:d01].placeholderwatermark 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:

[number* your-number min:10 max:99 step:3 class:required "40"]

Range field#Range field

Both range and range* are used for number input and accept numeric value. range* is a required field.

OptionExamplesDescriptionmin:(num)min:10min attribute value of the input element. Allowed minimum value for this field.max:(num)max:99max attribute value of the input element. Allowed maximum value for this field.step:(num)step:3step attribute value of the input element. When minimum number is 10 and step is 3, acceptable inputs are 10, 13, 16, 19, …id:(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 [number your-text class:y2008 class:m01 class:d01].placeholderwatermark 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:

[range* your-range min:10 max:99 step:3 class:required "40"]
Share this:FacebookTwitterLike this:Like Loading...

編輯表單模板

您可以在 「表單」 選項卡面板中編輯聯繫表單的表單模板。 HTML 和 Contact Form 7 的表單標籤可用於表單模板。

表單標籤用作 HTML 表單控件 （例如文本輸入字段） 或一組表單控件 （例如一組複選框） 的佔位符。呈現表單時，表單標籤被 HTML 替換。

表單標籤必須遵循特定的語法規則。否則，表單標籤將無法正常工作。不過，沒有必要記住語法，因為您可以使用標籤生成器工具來生成正確的表單標籤。

 

請注意，表單模板中的更改不會自動反映在聯繫表單的郵件設置中。因此，如果您已將表單標籤添加到表單模板，則需要在 「郵件」選項卡面板中的郵件設置中手動添加相應的郵件標籤。

Submit button

A submit button is an essential component of a form. As you may know, HTML represents a submit button as an input element with submit type: . You can use this HTML tag in a contact form of Contact Form 7, but you should use Contact Form 7』s own submit form-tag instead.

This is the simplest form of submit tag:

[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.

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 [submit class:y2008 class:m01 class:d01].

Example:

[submit class:button id:form-submit "Send Mail"]
Share this:FacebookTwitterLike this:Like Loading...

Date field

HTML5 has introduced date input type. Browsers supporting this input type render a date field as a calendar-style date picker UI that you choose a date from. Contact Form 7 supports date and date* types of form-tag that correspond with date input type.

Currently, only some modern browsers support this date input type. Older browsers and some modern browsers including Firefox don』t support this input type and just render it as a traditional text input field. Fortunately, Contact Form 7 can provide a fallback for those browsers.

If a value is specified in a date field, the value must be in YYYY-MM-DD format (e.g. 2013-04-08) according to the HTML5 specification. This is in most cases you don』t need to care about because browser』s date picker UI will set a value in the correct format.

OptionExamplesDescriptionmin:(date)min:2013-01-01min attribute value of the input element. Allowed minimum value for this field. You can use a relative date format as well.max:(date)max:2013-12-31max attribute value of the input element. Allowed maximum value for this field. You can use a relative date format as well.step:(num)step:3step attribute value of the input element. When minimum date is 2013-01-01 and step is 3, acceptable inputs are 2013-01-01, 2013-01-04, 2013-01-07, …id:(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 [date your-date class:y2008 class:m01 class:d01].placeholderwatermark 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:

[date* your-date min:2013-01-01 max:2013-12-31 step:7 class:required "2013-04-01"]

Specifying a date with relative date formats#Specifying a date with relative date formats

As well as YYYY-MM-DD format, you can use relative date formats to specify a date used in a date or date* form-tag. Contact Form 7 5.3 and later allows you to use all date formats that the DateTimeImmutable class supports.

Using this technique, you can specify a date with natural expressions—such as 「next Friday」, seen in the following example form-tag:

[date date-123 "next Friday"]

When you use date formats in a form-tag option, be aware that you are not allowed to use a space in an option value (as a space is used as the delimiter for options) and that you need to use an underscore (_) as substitute for a space. For example:

[date date-123 max:next_Friday+7days "next Friday"]

Format date value in mail#Format date value in mail

As previously explained, if a value is specified in a date field, the value must be in YYYY-MM-DD format (e.g. 2013-04-08). When the value is inserted into mail template, the date format keeps by default. To change the format in mail, you can use a variant of mail-tag notation [_format_{field name} "{date format}"].

Example:

[_format_your-date "D, d M y"]

D, d, M, and y in the above example are date format character described in the manual page of PHP date() function. "D, d M y" will format 2013-04-08 as Mon, 08 Apr 13. As the format is affected by localization, with the same "D, d M y" format, 2013-04-08 will become 月, 08 4 月 13 in Japanese-localized WordPress.
Share this:FacebookTwitterLike this:Like Loading...