Contact Form 7 聯絡表單入門

Contact Form 7 聯絡表單入門

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

顯示錶格

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

聯絡表 7 的管理螢幕截圖

 

安裝 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]

也可以看看

標籤的工作原理

標籤的工作原理

您可以使用各種型別的標籤 (用方括號括起來的字串) 來編輯表單和電子郵件的模板。 Contact Form 7 為表單模板和電子郵件模板提供了兩種不同型別的標籤:form-tagsmail-tags

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

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

表單模板中的標籤 (form-tag) 將被替換為 HTML 程式碼段,該程式碼段在呈現表單時表示輸入欄位。表單標籤的元件可以分為四部分:型別、名稱、選項和值。

表單標籤示例

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

名稱用於標識輸入欄位。大多數表單標籤都有一個名稱,但也有例外。

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

在大多數情況下,值用於指定預設值。這些值也可能用於其他目的;這取決於標籤的型別。值是可選的。

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

表單標籤型別列表

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

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

郵件標籤示例

編輯表單模板

編輯表單模板

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

表單標籤用作 HTML 表單控制元件 (例如文字輸入欄位) 或一組表單控制元件 (例如一組覈取方塊) 的佔位符。呈現表單時,表單標籤被 HTML 替換。

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

「表單」 選項卡面板的螢幕截圖

 

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

設定郵件

設定郵件

您可以非常靈活地編輯電子郵件模板。不僅是郵件正文,您還可以編輯郵件標題欄位。如果需要,您甚至可以在訊息中使用 HTML 。

您可以在 「郵件」 選項卡面板中編輯電子郵件模板。

郵件選項卡的螢幕截圖
郵件標籤面板

欄位到場

在此處設定收件人電子郵件地址。您可以在此欄位中使用郵件標籤

在有效的郵箱語法中指定值,否則您將收到配置錯誤

從欄位來自外地

在此處設定發件人電子郵件地址。您可以在此欄位中使用郵件標籤

此欄位值應該是與網站屬於同一域的電子郵件地址。否則你會得到一個配置錯誤

主題欄位學科領域

在這裡設定訊息的主題。您可以在此欄位中使用郵件標籤

附加標題附加標題

您可以在此處插入其他訊息頭欄位,例如 Cc 和 Bcc 。每行應該有一個欄位。您可以在這些欄位中的任何位置嵌入郵件標籤

訊息正文郵件正文

這是訊息體;您可以在該欄位的任何位置嵌入郵件標籤

如果您選中從輸出中排除帶有空白郵件標籤的行復選框,則包含具有空值的郵件標籤的行將從實際電子郵件輸出的郵件正文中排除。

預設情況下,純文字用於訊息正文。要使用 HTML,請選中使用 HTML 內容型別覈取方塊。

檔案附件檔案附件

如果您將上傳的檔案附加到此電子郵件,請將上傳檔案的郵件標籤放入檔案附件欄位。您還可以從伺服器附加檔案 (本地檔案附件) 。

郵件 (2) 郵件 (2)

郵件 (2) 是一個附加的郵件模板。它通常用作自動回覆器,但您可以將其用於任何目的。僅當主郵件已成功傳送時才傳送郵件 (2) 。

也可以看看

Editing messages

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.

See also

Contact form in your language explains how you can get the messages localized.
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_okon_submit已從聯絡表 7 5.0 中正式刪除。您可以使用 DOM 事件代替這些設定。

與外部 API 整合

與外部 API 整合

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

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

文字欄位

文字欄位

文字輸入欄位是聯絡表單中最常見的因素。您可能知道,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 "发送"]

Number fields

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

Date field

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