為什麼要在 WordPress 中創建 AMP 表單？
加速移動頁面（AMP）是一個由 Google 主導的項目，旨在讓網站在移動設備上加載得更快。雖然 AMP 能通過加快頁面加載速度提供出色的移動瀏覽體驗，但它禁用了許多在您的 WordPress 網站上有用的功能。其中之一就是聯絡表單。由於 AMP 使用的 HTML 和 JavaScript 範圍有限，無法在 AMP 頁面上正確加載您的 WordPress 表單。
您也可以使用許多提供卓越桌面和移動性能的響應式 WordPress 主題。這樣，您不必為了提供優秀的移動體驗而犧牲網站的樣式設計。然而，如果您在 WordPress 網站上使用 AMP，那麼可以使用插件來顯示表單。讓我們看看如何向您的網站添加 AMP 表單。
在 WordPress 中添加 AMP 表單（一步步指南）
第 1 步：安裝和啟用 WPForms 插件
在本教程中，我們將使用 WPForms Pro 版，因為它提供了更多的功能、表單模板、附加組件和自訂選項。不過，您也可以使用 WPForms Lite 版開始免費創建基本的 AMP 兼容聯絡表單。
首先，您需要安裝和啟用 WPForms 插件。如果您需要幫助，請參閱我們的有關如何安裝 WordPress 插件的指南。
第 2 步：在您的 WordPress 網站上添加 AMP
在我們創建表單之前，確保已經在您的 WordPress 網站上設置了 AMP。要將 AMP 與 WordPress 一起使用，您需要安裝並啟用官方的 AMP 插件。更多詳情請參閱我們的逐步指南。
啟用後，插件將自動在您的 WordPress 網站上添加 Google AMP 支持。不過，您可以前往 AMP » 設置頁面更改 AMP 的設置。在設置頁面上，您可以啟用或禁用 AMP、選擇 AMP 網站模式及支援模板。有關詳細信息，請參閱我們的指南，了解如何在 WordPress 網站上正確設置 Google AMP。
第 3 步：在 WPForms 中創建一個新的 AMP 表單
前往 WPForms » 添加新頁面來創建新的 WordPress 表單。WPForms 默認兼容 AMP，因此不需要啟用任何特殊設定。在表單設置界面，您可以選擇一個表單模板並在頂部輸入名稱。您可以選擇空白表單或使用預置模板來快速根據您的需求進行編輯。為了本教程，我們選擇「簡單聯絡表單」模板。
接下來，您將看到表單構建器頁面，其中有不同的選項可以自定義模板。從這裡，您可以添加或移除表單字段。要添加新字段，只需從左邊面板點擊一個字段並將其拖到表單模板上。注意：現代樣式下拉選單和數字滑塊字段不兼容 Google AMP。您需要使用數字和經典樣式下拉字段。
然後，您可以配置字段選項。只需點擊字段，左側將顯示字段選項。例如，您可以編輯字段標籤和格式，設為必填字段，設置條件邏輯等。類似地，您可以自定義所有其他字段完成後，點擊「設置」選項卡配置您的表單設置。「一般」設置允許您更改表單名稱、提交按鈕文本、提交處理文本等。接下來，點擊「通知」選項卡設置電子郵件通知，這樣當用戶完成表單時您會收到通知。然後，點擊「確認」選項卡設置當用戶提交表單後顯示的確認消息。WPForms 可以在表單提交後顯示消息、顯示頁面或將用戶重定向到 URL。
設置完成後，保存您的表單。
第 4 步：將您的 AMP 表單添加到頁面
現在，您的 WordPress 表單已經準備好，您可以將其添加到頁面。在 WPForms 表單構建器頂部，您會看到「嵌入」按鈕。點擊此按鈕將表單添加到新頁面或現有頁面。彈出窗口將打開，要求您創建新頁面或選擇現有頁面。為了本教程，我們選擇「創建新頁面」選項。接下來，輸入新表單頁面的名稱。然後，點擊「開始吧」按鈕。
從這裡，您可以在內容編輯器中預覽 AMP 表單。您還可以使用 WPForms 區塊在內容編輯器中添加表單。只需從下拉菜單中選擇您的 AMP 表單。接下來，您可以發布或更新您的頁面。
就是這麼簡單，不需要進行其他設置。WPForms 插件現在會為您的表單添加完整的 AMP 支持。如果您想查看表單效果，可以在手機上打開頁面。或者在桌面瀏覽器中在頁面 URL 的末尾添加 /amp/ 或 /?amp，如：https://www.example.com/contact/?amp。
向您的 AMP 表單添加 Google reCAPTCHA
默認情況下，WPForms 包含反垃圾郵件設置以捕獲和阻止垃圾郵件。此外，您還可以使用 Google reCAPTCHA 減少垃圾提交。要在 AMP 表單中使用 Google reCAPTCHA，您需要註冊您的網站並獲得 Google API 密鑰。首先，前往 Google reCAPTCHA 網站並點擊頁面右上角的「v3 管理控制台」按鈕。然後，使用您的 Google 帳戶登錄。完成後，您會看到「註冊新網站」頁面。接著，在標籤字段中輸入您的網站名稱。Google AMP 僅支持 reCAPTCHA v3，因此必須選擇「基於評分（v3）」類型選項。然後，在域字段中輸入您的域名（不帶 https://www.）。點擊「提交」按鈕。接著，您將看到成功消息，以及添加 reCAPTCHA 到網站的網站密鑰和秘密密鑰。複製這些密鑰。現在，您已經擁有添加 reCAPTCHA 到表單的 Google API 密鑰，但還需要一個設置來確保 AMP 的兼容。首先，點擊「設置」鏈接。然後，您會在 reCAPTCHA 設置中看到「允許此密鑰在 AMP 頁面上使用」的複選框。勾選該框並點擊下方的「保存」按鈕。
現在您擁有 Google API 密鑰來在 AMP 表單中添加 reCAPTCHA，您需要將其輸入 WPForms。在您的 WordPress 儀表板中，打開 WPForms » 設置 » CAPTCHA 頁面。然後，選擇「reCAPTCHA v3」選項。粘貼網站密鑰和秘密密鑰。完成後，點擊「保存設置」按鈕。現在，Google reCAPTCHA 已添加到 WPForms，您可以在需要的表單中啟用它。前往 WPForms » 所有表單並選擇您要啟用 reCAPTCHA 的表單，點擊表單名稱下的「編輯」按鈕。進入表單設置界面後，點擊「設置」選項卡並選擇「垃圾保護和安全」選項卡。在這裡，啟用 Google v3 reCAPTCHA 選項。完工後，點擊右上角的「保存」按鈕保存您的表單。
之後，您可以重新訪問您的聯繫頁面，查看帶有 reCAPTCHA 的 AMP 表單效果。希望這篇文章能幫助您輕鬆學會如何在 WordPress 中創建 AMP 表單。您可能還需要查看我們有關如何在 WordPress 中創建 GDPR 合規性表單以及最佳拖放式頁面構建器的指南。如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取更多 WordPress 視頻教程。您還可以在 Twitter 和 Facebook 上關注我們。
