在2022年，與觀眾保持聯絡非常重要。使用MailChimp等服務建立電子郵件列表可幫助您將內容直接傳送給訂閱者。
電子郵件列表很棒，但如果讀者或潛在客戶想直接與您聯絡怎麼辦？這就是聯絡表格的來源！在本文中，我們將介紹如何為您的WordPress網站配置流行的Contact Form 7外掛。
- 如何安裝Contact Form 7
- 擁有聯絡表的利弊
- Contact Form 7設定概述
- 如何建立WordPress聯絡表
- 如何使用表單標籤構建聯絡表單
- 在Contact Form 7中配置郵件設定
- Contact Form 7郵件遞送問題
- Contact Form 7表格提交訊息
- 如何保護您的聯絡表
如何安裝Contact Form 7
Contact Form 7自2009年以來一直存在，在過去十年中獲得了超過500萬次下載。Contact Form 7可以直接從WordPress外掛庫安裝。如果您搜尋“Contact Form 7”，您將能夠找到該外掛以及各種附加元件。
安裝Contact Form 7外掛
安裝外掛後，您會在WordPress儀表盤的側邊欄中看到一個標有“Contact”的選單項。在這裡可以配置Contact Form 7的所有設定。
自定義Contact Form 7設定
聯絡表單的利弊
在我們深入研究如何為您的WordPress網站配置Contact Form 7之前，讓我們快速瞭解一下向您的網站新增聯絡表格的一些利弊。
擁有聯絡表的優點
- 聯絡表格允許讀者、客戶和粉絲直接與您聯絡。根據您的WordPress網站的目的，訪問者與您交流的能力可能非常重要。例如，不向電子商務網站新增聯絡表格可能會對您的業務造成經濟損失，因為如果相關方對您的產品有疑問，他們將無法與您聯絡。
- 聯絡表格為您的WordPress網站或業務增加了合法性。許多人將聯絡表格的存在視為某種信任因素。能夠與網站所有者聯絡的想法使您的內容更值得信賴。
有聯絡表的缺點
- 對於評論框和聯絡表等公共表單，垃圾郵件可能是一個問題。幸運的是，使用Contact Form 7，您可以使用reCAPTCHA過濾掉垃圾郵件。您甚至可以配置Cloudflare頁面規則來進一步保護自己。我們將在本文後面詳細介紹如何在Contact Form 7中設定垃圾郵件保護。
- 向您的站點新增聯絡表單後，您可能需要花時間回覆訊息。這不一定是一件壞事，這取決於你如何看待它。有些人害怕回覆電子郵件的過程，而另一些人則真正享受它。根據我們的經驗，在您的網站上擁有聯絡表格所體現的關係通常超過了稽覈成本，因此我們建議您通過它來提供動力！
Contact Form 7設定概述
使用Contact Form 7外掛建立聯絡表單非常簡單。要開始使用，請單擊WordPress側欄中的Contact > Contact Forms。在此頁面上，您可以檢視所有聯絡表單及其相關後設資料詳細資訊。
Contact Form 7中的聯絡表格
首次安裝Contact Form 7時，它也會建立一個示例表單。在我們瞭解如何建立自定義聯絡表單之前，讓我們先看一下示例表單，以更好地瞭解Contact Form 7的工作原理。單擊Contact Form 1以檢視錶格設定。
配置您的WordPress聯絡表格
“編輯聯絡表”頁面分為四個部分。
- Form –使用“文字”、“電子郵件”、“覈取方塊”等各種欄位選項自定義您的HTML聯絡人表單模板。您還可以在表單自定義框中編寫自定義HTML。
- Mail –自定義用於通知電子郵件的電子郵件模板和設定。
- Message –自定義在特定操作後顯示的訊息。例如，您可以設定在某人提交聯絡表單後顯示的唯一訊息。
- Additional Setting –指定片段以啟用附加功能，如僅限訂閱者模式、演示模式和郵件跳過。
現在讓我們仔細看看每個部分並建立一個自定義聯絡表單！
如何建立WordPress聯絡表單
要建立新的聯絡表格，請單擊“聯絡表格”旁邊的Add New。
在Contact Form 7中建立一個新的聯絡表
為新的聯絡表格命名，然後單擊“儲存”。
儲存新的WordPress聯絡表
在“Form”部分，為您的聯絡表單新增必要的HTML。您可以使用各種預設按鈕為流行的表單標籤生成簡碼。為方便起見，請檢視以下說明，瞭解Contact Form 7附帶的預設表單標籤。
- Text –為單行文字建立表單標籤。文字欄位對於名字、姓氏和其他不需要多行的基於文字的片段很有用。
- Email –為電子郵件地址建立表單標籤。
- URL –為URL建立一個表單標籤。
- Tel –為電話號碼建立表單標籤。
- Number –為數字建立表單標籤。與“文字”或“文字區域”輸入欄位不同，“數字”欄位僅允許數字。
- Date –為日期建立表單標籤。
- Text area –為文字區域建立表單標籤。與普通的“文字”輸入欄位不同，“文字區域”欄位允許多行文字。它們是輸入訊息正文的理想選擇。
- Drop-down menu – 為下拉選單建立表單標籤。
- Checkboxes——為覈取方塊建立一個表單標籤。
- Radio buttons——為單選按鈕建立一個表單標籤。
- Acceptance –為接受覈取方塊建立一個表單標籤。
- Quiz –為問答對建立表單標籤。
- File –為檔案上傳欄位建立表單標籤。
- Submit –為提交按鈕建立一個表單標籤。
現在讓我們繼續自定義聯絡表單。為了完整起見，我們將建立一個使用Contact Form 7中所有預設表單標籤的聯絡表單。
“Text”表單標籤
當您單擊Contact Form 7中的預設表單標籤時，您將看到如下所示的彈出選單。在此選單中，您可以配置表單標籤的設定。在底部，您會看到一個可以嵌入到您的聯絡表單模板中的簡碼。
Contact Form 7中的“文字”表單標籤
對於“Text”表單標籤，我們使用下面的設定來建立名稱的輸入欄位。
- Field Type –必填欄位
- Name – text-711（自動生成）
- Default Value – 您的姓名（用作預設佔位符文字）
- Akismet –未選中
- ID Attribute (CSS) – cf7-your-name
- Class Attribute (CSS) – cf7-your-name
這些設定生成下面的簡碼。
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]
現在，只需單擊“Insert Tag”按鈕即可將表單標籤新增到聯絡人表單模板中。稍後我們將新增更多HTML標記來構建表單。
“email”表單標籤
接下來，我們將建立一個電子郵件表單標籤，它允許我們的聯絡表單收集電子郵件地址。
Contact Form 7中的“電子郵件”表單標籤
對於“email”表單標籤，我們配置了以下設定。
- Field Type –必填欄位
- Name- email-632（自動生成）
- Default Value– 您的電子郵件
- Akismet –未選中。
- ID Attribute (CSS) –您的電子郵件
- Class Attribute (CSS) –您的電子郵件
這些設定生成下面的簡碼。
[email* email-632 id:email class:email placeholder "Your Email"]
“URL”表單標籤
在某些情況下，您可能希望在您的聯絡表單上有一個輸入欄位來收集某人的網站。雖然從技術上講，您可以在Contact Form 7中為此使用普通的“文字”表單標籤，但我們建議改用“URL”表單標籤。“URL”表單標籤將生成一個驗證URL的輸入欄位，以確保它們的格式正確。
Contact Form 7中的“URL”表單標籤
對於“url”表單標籤，我們配置了以下設定。
- Name – url-601（自動生成）
- Default Value – 您的網站
- Akismet –未選中。
- ID Attribute (CSS) – cf7-your-website
- Class Attribute (CSS) – cf7-your-website
這些設定生成下面的簡碼。
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]
“tel”表單標籤
與URL類似，您也可以使用標準的“text”表單標籤來收集電話號碼。但是，最好使用“tel”表單標籤來確保電話號碼有效。
Contact Form 7中的“電話”表格標籤
對於“tel”表單標籤，我們配置了以下設定。
- Name – tel-842（自動生成）
- Default Value – 您的電話號碼
- ID Attribute (CSS) – cf7-your-phone-number
- Class Attribute (CSS) – cf7-your-phone-number
這些設定生成下面的簡碼。
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]
“date”表單標籤
Contact Form 7的“date”表單標籤可讓您生成日曆樣式的日期選擇器。此“date”輸入欄位對於在聯絡表單中指定約會日期很有用。
Contact Form 7中的“日期”表格標籤
對於“date”表單標籤，我們配置了以下設定。
- Name – date-389（自動生成）
- Default Value – 您的預約日期
- Range –我們的自定義日期範圍。
- ID Attribute (CSS) – cf7-appointment-date
- Class Attribute (CSS) – cf7-appointment-date
這些設定生成下面的簡碼。
[date* date-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-appointment-date placeholder "Your Appointment Date"]
“Textarea”表單標籤
“textarea”表單標籤讓您可以建立一個多行文字框，讓訪問者提交更長的訊息。文字區域對於捕獲訊息正文最有用。
Contact Form 7中的“textarea”表單標籤
對於“textarea”表單標籤，我們配置了以下設定。
- Name –textarea-795（自動生成）
- Default Value -您的訊息
- ID Attribute (CSS) – cf7-your-message
- Class Attribute (CSS) – cf7-your-message
這些設定生成下面的簡碼。
[textarea* textarea-795 id:cf7-your-message class:cf7-your-message placeholder "Your Message"]
“Drop-Down Menu”表單標籤
Contact Form 7的“下拉選單”表單標籤可讓您建立具有多個選項的下拉選單。下拉選單對於您希望訪問者選擇特定選項以與表單一起提交的情況很有用。例如，如果您經營一家WordPress維護公司，您可以配置一個下拉選單，讓訪問者在您提供的服務之間進行選擇。
Contact Form 7中的“下拉選單”表單標籤
對於“下拉選單”表單標籤，我們配置了以下設定。
- Name – menu-24（自動生成）
- Options –選項 1、選項 2、選項 3、選項 4
- Allow Multiple Selections –選中
- Insert a Blank Item as the First Option –選中
- ID Attribute – cf7-drop-down-menu
- Class Attribute – cf7-drop-down-menu
這些設定生成下面的簡碼。
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]
“Checkbox”表單標籤
覈取方塊表單標籤允許您建立HTML覈取方塊。與下拉選單類似，覈取方塊也可用於選擇預定義選項。根據您的聯絡表單的性質，覈取方塊可能比下拉選單更有效。例如，如果您有少量選項可供選擇，則覈取方塊可減少進行選擇所需的點選次數。另一方面，如果您的聯絡表單有很多選項，下拉選單可能會更好，因為它佔用的垂直空間更少。
Contact Form 7中的“覈取方塊”表單標籤
對於“覈取方塊”表單標籤，我們配置了以下設定。
- Name – checkbox-948（自動生成）
- Options –選項 1、選項 2、選項 3
- Wrap Each Item with Label Element –選中
- ID Attribute – cf7-checkbox
- Class Attribute – cf7-checkbox
這些設定生成下面的簡碼。
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]
“Radio Buttons”表單標籤
“單選按鈕”表單標籤可讓您建立具有多個選項的單選按鈕。與覈取方塊和下拉選單不同，單選按鈕只允許您選擇一個選項。
Contact Form 7中的“單選按鈕”表單標籤
對於“單選按鈕”表單標籤，我們配置了以下設定。
- Name – radio-708（自動生成）
- Options –選項 1、選項 2、選項 3
- Wrap Each Item with Label Element –選中
- ID Attribute – cf7-radio
- Class Attribute – cf7-radio
這些設定生成下面的簡碼。
[radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Option 1" "Option 2" "Option 3"]
“Acceptance”表單標籤
Contact Form 7的“接受”表單標籤可用於生成單個覈取方塊，以用於接受條款和條件。使用接受表單標籤設定，您可以指定要顯示的訊息。
Contact Form 7中的“接受”表格標籤
對於“acceptance”表單標籤，我們配置了以下設定。
- Name – acceptance-545（自動生成）
- Condition –選中此框以接受條款。
- ID Attribute – cf7-acceptance
- Class Attribute – cf7-acceptance
這些設定生成下面的簡碼。
[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]
“Quiz”表單標籤
“Quiz”表單標籤可用於在您的聯絡表單中建立基本問答測驗。要建立測驗問題，請使用以下格式分隔問題和答案 – 問題|答案。在下面的截圖中，我們的問題是“ WordPress是哪一年釋出的？”，答案（由“|”字元分隔）是2003。
Contact Form 7中的“Quiz”表格標籤
對於“Quiz”表單標籤，我們配置了以下設定。
- Name – quiz-461（自動生成）
- Condition –選中此框以接受條款。
- ID Attribute – cf7-quiz
- Class Attribute – cf7-quiz
這些設定生成下面的簡碼。
[quiz quiz-461 id:cf7-quiz class:cf7-quiz "What year was WordPress released?|2003"]
“File”表單標籤
Contact Form 7的“file”表單標籤讓您可以將檔案上傳功能新增到聯絡表單。這對於您希望訪問者能夠上傳影象或PDF檔案以與表單一起提交的情況很有用。例如，如果您執行一個攝影部落格，其中包含釋出來賓提交的照片庫，您可以新增檔案上傳功能供人們上傳影象。
在表單標籤設定中，您可以指定各種設定來保護您的表單。我們建議始終設定檔案大小限制，以防止惡意使用者上傳大檔案。同樣，指定“可接受的檔案型別”可以幫助您將表單鎖定為您想要和期望的檔案格式。考慮到攝影部落格示例，您可能希望將檔案大小限制為1MB (1024 KB)，並將可接受的檔案型別限制為僅JPG和PNG等已知影象格式。
Contact Form 7中的“file”表格標籤
對於“File”表單標籤，我們配置了以下設定。
- Name –檔案 658（自動生成）
- File Size Limit – 1024kb
- Acceptable File Types – jpg|png|gif
- ID Attribute – cf7 檔案
- Class Attribute – cf7-file
這些設定生成下面的簡碼。
[file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]
“Submit”表單標籤
最後但同樣重要的是Contact Form 7的“Submit”表單標籤。您可能已經猜到了，此表單標籤可讓您為聯絡表單生成提交按鈕。
Contact Form 7中的“Submit”表格標籤
對於“Submit”表單標籤，我們配置了以下設定。
- Label– 提交
- ID Attribute – cf7-submit
- Class Attribute – cf7-submit
這些設定生成下面的簡碼。
[submit id:cf7-submit class:cf7-submit "Submit"]
如何使用表單標籤構建聯絡表單
現在我們已經設定了所有表單標籤，是時候建立聯絡表單了。此時，您的聯絡表單設定應如下面的螢幕截圖所示。記下我們在上面建立的所有表單標籤。有了表單標籤，您可以使用[contact-form-7] 簡碼將表單嵌入到WordPress文章或頁面中。
使用contact-form-7短程式碼嵌入聯絡表格
在WordPress編輯器中，將短程式碼貼上到一個空區塊中。
將Contact Form 7短程式碼新增到文章或頁面
如果您使用的是WordPress經典編輯器，您可以將短程式碼貼上到內容編輯器的任何位置。
將Contact Form 7與WordPress經典編輯器一起使用
您現在應該能夠在新增Contact Form 7短程式碼的頁面上看到聯絡表。這是我們的聯絡表格與上述設定的樣子。如您所見，Contact Form 7自動將表單標籤轉換為有效的HTML，HTML使用WordPress主題中包含的預設CSS樣式呈現。
使用Contact Form 7建立的聯絡表格
我們當前狀態的聯絡表是一個很好的起點，但它缺少一個關鍵功能。“text”、“email”和“URL”等表單標籤支援佔位符，但“checkboxes”和“radio buttons”等其他元素不支援。如果沒有適當的標籤，覈取方塊和單選按鈕對訪問者來說不會很有用，因為它們沒有任何上下文。幸運的是，在Contact Form 7中新增標籤非常簡單！
如何在Contact Form 7中新增表單標記標籤
有兩種方法可以將標籤新增到Contact Form 7表單標籤。對於下面的表單標籤，您可以簡單地用標籤包裹表單標籤。
- Text
- URL
- Tel
- Number
- Date
- Text Area
- Acceptance
- Quiz
- File
看看下面的示例“Text”表單標籤。
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]
要為這個表單標籤新增標籤，我們可以用下面的程式碼片段替換表單標籤。請注意在<label>開始標記之後的“Your Name”的附加例項。
<label> Your Name [text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"] </label>
這是我們聯絡表格上的變化。在這種情況下，新建立的標籤與佔位符的作用相同。但是，如果我們不想在表單標籤中指定佔位符，那麼標籤將有助於識別特定輸入框的用途。
在Contact Form 7中為表單標籤新增標籤
對於呈現多個表單控制元件（如覈取方塊、單選按鈕和下拉選單）的表單標籤，將表單標籤包裝在標籤內會導致錯誤。發生這種情況是因為<label>標籤只應與單個表單控制元件一起使用。覈取方塊、單選按鈕和下拉選單選項的性質涉及多個表單控制元件，因此它們與預設標籤解決方案不相容。
對於覈取方塊、單選按鈕和下拉選單，您必須在短程式碼中新增一個use_label_element引數。看看下面的覈取方塊表單標記示例，其中use_label_element以粗體顯示。
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]
新增use_label_element引數後，您可以直接在聯絡表單編輯器中的表單標記上方新增標籤。
為Contact Form 7中的覈取方塊、單選按鈕和下拉選單新增標籤
為了完整起見，我們在聯絡表單中的所有表單標籤中新增了標籤。您可能不需要為生產站點執行此操作，因為某些表單標籤已經包含佔位符。無論如何，我們想展示標籤是如何工作的。
這是我們的聯絡表格的樣子：
帶有標籤的聯絡表格
在Contact Form 7中配置郵件設定
現在我們已經配置了聯絡表單的結構，是時候檢視Contact Form 7中的電子郵件遞送設定了。雖然預設的郵件遞送設定對於大多數網站應該都可以正常工作，但瞭解各種不同的設定仍然很重要設定以防您的站點或用例需要特殊配置。
要訪問郵件傳遞設定，請轉到聯絡表單編輯器並選擇“Mail”選項卡。
Contact Form 7中的郵件遞送設定
Contact Form 7的郵件傳遞設定允許您自定義模板和引數，用於在有人提交表單後生成通知並向您傳送通知。如果您使用不正確的設定，您可能不會收到有關表單提交的通知。因此，在建立聯絡表單和更改設定後測試表單交付非常重要。
Contact Form 7允許您配置以下郵件傳遞設定。
- To –傳送通知的電子郵件地址。
- From –傳送通知的電子郵件地址。
- Subject –通知電子郵件的主題。
- Additional Headers –指定附加的電子郵件標頭，例如“回覆”。
- Message Body –通知電子郵件的正文。
- File Attachments –指定要包含在通知電子郵件中的任何附件。
現在，讓我們瀏覽每個設定，以更好地瞭解它們如何影響Contact Form 7中的郵件傳遞。
“To”欄位
請務必為“To”設定指定一個真實的電子郵件地址。預設情況下，Contact Form 7會將與您的WordPress使用者帳戶關聯的電子郵件地址分配給“To”設定。如果您的WordPress電子郵件地址無效，請務必在您的個人資料設定中更新它，並在Contact Form 7中更改電子郵件地址。
“From”欄位
“From”設定應使用以下格式 – Your Name. 對於我們的聯絡表單郵件設定，我們使用wbolt<wordpress@wbolt.com>.
預設情況下，Contact Form 7將使用 填寫此欄位wordpress@your-domain.com。您需要確保此電子郵件地址是有效的，因為某些WordPress主機會阻止向無效地址傳送電子郵件。有多種方法可以使此電子郵件地址有效。您可以為wordpress@your-domain.com設定一個專用電子郵件帳戶，也可以在您的電子郵件服務提供商處啟用包羅永珍的功能。如果您無法設定此電子郵件地址，我們建議您將其更改為有效的電子郵件地址以避免送達率問題。
“Subject ”欄位
“Subject ”設定可用於指定通知郵件的主題行。預設情況下，Contact Form 7將主題設定為Site Name “[your-subject]”– Contact Form 7預設表單模板中的主題名稱。
如果您的表單中沒有名為“[your-subject]”的表單標籤，請務必將其更改為其他內容。例如，如果您只有一個表單標籤來捕獲訪問者的姓名（例如 [your-name]），您可以將主題行更改為You’ve Received a Message from [your-name].
“Additional Headers”欄位
在“Additional Headers”下，您可以指定電子郵件標頭，例如回覆、抄送和密件抄送。預設情況下，Contact Form 7新增以下標題 – Reply-To: [your-email]. 此標題允許您回覆在提交的聯絡表單中指定的電子郵件地址。
如果您使用的是Contact Form 7的預設電子郵件表單標籤，則預設回覆標題很好。如果不是，請務必更改它以匹配您的電子郵件表單標籤的名稱。對於我們的聯絡表單，電子郵件表單標籤的名稱是“email-632”，因此必須將回復表單標籤更改為Reply-To: [email-632].
“Message Body”
接下來是“Message Body”，它決定了通知電子郵件的正文內容。Contact Form 7的預設模板使用 [your-name]、[your-email]、[your-subject] 和 [your-message] 表單標籤，如下所示：
From: [your-name] Subject: [your-subject] Message Body: [your-message] -- This e-mail was sent from a contact form on wbolt (https://www.wbolt.com)
如果您沒有在聯絡表單模板中使用它們，請務必更改這些表單標籤。由於我們建立的聯絡表單收集了大量資訊，我們可以使用額外的表單標籤設定訊息正文，如下所示：
Hello Brian, you’ve received a message from [text-711] ([email-632]). Website: [url-601] Phone Number: Tel-842 Appointment Date: date-389 Message: textarea-795
自定義Contact Form 7通知電子郵件的訊息正文
Contact Form 7郵件設定 – File Attachments
如果您的聯絡表單涉及上傳檔案，您可以在通知電子郵件中包含該檔案。在我們的聯絡表單中，我們有一個名為“[file-658]”的檔案上傳表單標籤。因此，我們可以在“File Attachments ”下新增此表單標籤，以確保該檔案將包含在電子郵件通知中。
在Contact Form 7通知電子郵件中包含檔案附件
Contact Form 7郵件遞送問題
如果您發現Contact Form 7沒有傳送電子郵件，您可以在聯絡WordPress開發人員尋求幫助之前檢查一些事項。
- 檢查您的伺服器是否正在傳送其他型別的電子郵件。要對此進行測試，您可以通過在部落格文章上發表測試評論或在 WordPress 登入頁面上提交密碼重置請求來觸發另一個電子郵件傳送操作。如果您在執行這些操作之一後收到電子郵件，則問題可能與Contact Form 7的配置有關。如果您沒有收到電子郵件，請聯絡房東的支援團隊，讓他們知道您遇到了電子郵件遞送問題。
- 確保您的聯絡表單的郵件傳遞設定中的“To”和“From”欄位配置正確。要使Contact Form 7正常工作，這兩個欄位都應填寫真實的電子郵件地址。
Contact Form 7表格提交訊息
Contact Form 7可讓您自定義各種表單提交訊息。這些訊息在滿足特定條件後顯示。例如，如果訪問者忘記填寫必填欄位，Contact Form 7將顯示“該欄位為必填項”訊息。對於大多數用例，預設訊息應該可以正常工作。但是，如果您想自定義訊息，可以通過單擊聯絡表單編輯器中的“訊息”選項卡來實現。
自定義Contact Form 7情境訊息
如何保護您的聯絡表
多年來，隨著自動化機器人變得更加智慧和普及，垃圾郵件已成為聯絡表單的主要問題。由於聯絡表格通常對公共網際網路開放，因此網路抓取工具很容易檢測到它們並將垃圾郵件傳送到您的電子郵件收件箱。幸運的是，有多種方法可以抵禦垃圾郵件傳送者並保護您的聯絡表格。
使用reCAPTCHA保護您的Contact Form 7
如果您曾經在Internet上提交過表單，那麼您可能已經熟悉reCAPTCHA，這是一種由Google開發的用於識別自動機器人行為的技術。舊版本的reCAPTCHA (V2) 要求使用者通過謎題或挑戰。
最新版本的reCAPTCHA (V3) 不需要使用者進行任何互動。相反，它在後臺透明地監控使用者活動，以區分人類和機器人訪問者。由於Contact Form 7支援reCAPTCHA V3，我們建議使用此最新版本，因為它為訪問者提供了更好的使用者體驗。
要設定reCAPTCHA，您首先需要生成一個API金鑰。為此，請登入您的Google帳戶並轉到reCAPTCHA設定頁面。
為reCAPTCHA整合註冊一個新站點
填寫登錄檔以建立您的reCAPTCHA。
- Label –指定您選擇的標籤。
- reCAPTCHA Type – Contact Form 7 支援 reCAPTCHA v3，因此請選擇該版本。
- Domains –如果您的站點使用根域，請新增域的非 www 和 www 版本。如果您的網站使用子域，只需新增子域。
- Owners –預設情況下，與您的 Google 帳戶關聯的電子郵件地址將被新增為所有者。如果需要，請隨意新增其他電子郵件地址。
填寫完所有選項後，單擊Submit。然後，您將看到特定於站點的“site key”和“secret key”。請務必將這些金鑰儲存在安全的地方，因為您需要將它們新增到Contact Form 7。
Google reCAPTCHA網站和金鑰
接下來，單擊WordPress儀表盤側邊欄中的“Contact”，然後單擊“Integration” 。選擇reCAPTCHA選項，然後將您的站點金鑰和金鑰貼上到各自的欄位中。最後，單擊Save Changes以完成reCAPTCHA整合。
在Contact Form 7中配置reCAPTCHA
在Contact Form 7中配置reCAPTCHA後，您將在聯絡表頁面的右下角看到一個reCAPTCHA徽標。這意味著reCAPTCHA處於活動狀態並保護您的聯絡表單免受垃圾郵件提交。
受reCAPTCHA V3保護的WordPress聯絡表格
使用Cloudflare保護您的聯絡表（可選）
如果您使用Cloudflare來保護您的網站，您可以為您的聯絡表單頁面設定一個特殊的頁面規則，以減少垃圾郵件聯絡表單提交。
使用Cloudflare保護您的聯絡表
要新增頁面規則，請單擊“頁面規則”選項卡，並使用以下設定來幫助保護您的聯絡頁面。
- If the URL Matches – *your-domain.com/your-contact-page/*
- Browser Integrity Check –開啟
- Security Level –高
Cloudflare的“瀏覽器完整性檢查”功能分析HTTP標頭。如果它檢測到自動爬蟲程式和垃圾郵件傳送者常用的HTTP標頭，則會拒絕對您網站的請求。將“Security Level”設定為高將挑戰在過去兩週內表現出惡意行為的所有訪客。
通過使用URL匹配規則將這些設定限制在您的聯絡頁面，您網站上的其他頁面將不受這些頁面規則的影響。我們推薦這種配置，因為您網站上的普通“read-only”頁面通常不需要提高安全級別設定。
小結
Contact Form 7是最受歡迎的聯絡表格外掛，這是有充分理由的！它可用於建立從基本聯絡表格、問答測驗到支援檔案附件和下拉選單的複雜表格的所有內容。
最重要的是，它帶有內建的reCAPTCHA支援，可幫助保護您的聯絡表單免受垃圾郵件傳送者的騷擾。
評論留言