如何為 WordPress 創建 AMP 友好的聯繫表單

您想創建一個 AMP 友好的聯繫表單嗎？ AMP 或 Accelerated Mobile Pages 是 Google 的一項技術，可在移動設備上快速加載您的網頁。

在本文中，我們將向您展示如何創建可輕鬆加載到 AMP 頁面的聯繫表單。 我們還將解釋如何將 reCAPTCHA 添加到您的 AMP 聯繫表單以保護它免受垃圾郵件發送者的侵害。

在 WordPress 中創建一個 AMP 友好的聯繫表單

AMP（加速移動頁面）為互聯網連接速度較慢的人提供最佳體驗。 它可以在移動設備上更快地加載頁面，從而幫助您提高網站的訪問量。

但是，AMP 給網站所有者帶來了許多挑戰。

其中之一是它允許有限的資源使用，以便更快地加載頁面。 因此，某些功能無法像往常一樣在您的 AMP 頁面上運行。

那麼您網站上的聯繫表格會發生什麼？ 它會正常工作嗎？

如果您使用 WPForms 插件，那麼它會自動檢測表單是否正在 AMP 頁面上加載。 然後，它會顯示頁面的非 AMP 版本的鏈接以正確加載表單。

但是，您也可以向 AMP 頁面添加表單，而不是顯示上述消息。

為此，您必須使用 WPForms Lite 插件，然後創建一個與 AMP 完全兼容的表單。

因此，事不宜遲，讓我們來看看為您的 WordPress 網站創建一個 AMP 友好的聯繫表單的分步過程。

第 1 步：安裝 AMP 插件

您需要做的第一件事是安裝並激活適用於 WordPress 的官方 Google AMP 插件。 這個免費插件對於向您的網站添加 AMP 支持至關重要。

您可以查看有關如何安裝 WordPress 插件的分步指南以獲取詳細說明。

激活後，此插件會自動向您的站點添加 AMP 支持。 但是，您仍然可以通過訪問設置» AMP頁面來更改設置。

有關更多詳細信息，您可以按照有關如何在 WordPress 網站上正確設置 Google AMP 的指南進行操作。

第 2 步：創建 WordPress 表單

是時候在 WPForms Lite 插件的幫助下創建聯繫表單了。

首先，您必須安裝並激活 WPForms Lite 插件。 激活後，您需要轉到WPForms » Add New創建一個新表單。

在“設置”頁面上，您會找到一些默認表單模板。 這些模板允許您加快創建表單的過程。 您還可以使用空白表單模板從頭開始構建表單。

由於我們要創建聯繫表單，請繼續單擊“簡單聯繫表單”模板。

這將帶您進入“表單構建器”頁面，您可以在其中輕鬆添加或刪除字段。 例如，如果您想添加主題字段，只需將單行文本字段從左側面板拖放到表單中即可。

要更改字段名稱，您需要單擊右側面板中的字段，然後更改左側面板中的標籤。

最好的部分是您將能夠實時看到更改。 很酷，不是嗎？

同樣，您可以按照自己的方式編輯其他表單字段。 您還可以按照我們的分步教程了解如何在 WordPress 中創建簡單的聯繫表單。

完成自定義部分後，您可以從表單構建器的左側邊欄轉到表單設置頁面。 您可以在此處更改通知和確認設置。

最後，您需要通過單擊屏幕右上角的“保存”按鈕來存儲更改。

就這樣！ 您無需配置任何其他內容。 WPForms Lite 插件現在會自動為您的表單添加完整的 AMP 兼容性。

此外，您可以在 AMP 聯繫表單中添加 reCAPTCHA 支持，以保護它免受垃圾郵件發送者的侵害。

讓我們在下一步中向您展示如何執行此操作。

第 3 步：註冊您的網站以獲取 reCAPTCHA 密鑰

為了阻止聯繫表單垃圾郵件，WPForms 支持 3 種不同類型的表單驗證碼：

• 自定義驗證碼
• 驗證碼
• 驗證碼

在本教程中，我們將重點介紹 reCAPTCHA，這是 Google 的垃圾郵件過濾服務。 它可以幫助您保護您的網站免受垃圾郵件發送者和自動化機器人的侵害。

要在您的網站上使用它，您必須在 Google reCAPTCHA 網站上註冊您的網站，以便您可以獲得網站密鑰和網站的秘密密鑰。

然後您可以使用它們將 reCAPTCHA 支持添加到您的 AMP 友好聯繫表單中。

因此，請前往 Google reCaptcha 網站，然後單擊屏幕右上角的管理控制台按鈕。

Google 現在會要求您登錄您的帳戶。 之後，您將被重定向到 reCAPTCHA 儀表板。

如果您之前已使用此帳戶配置了 reCAPTCHA，則必須單擊加號 (+) 圖標以註冊您的新站點。

但是，如果您是第一次使用此帳戶，那麼您會在登錄到您的帳戶後自動看到“註冊新站點”頁面。

進入該頁面後，您應該在標籤字段中輸入您選擇的任何名稱以供將來參考。

接下來，您需要選擇要使用的 reCAPTCHA 類型。

請務必注意，AMP 不支持 reCAPTCHA V2。 因此，您必須選擇“reCAPTCHA V3”才能將 reCAPTCHA 支持添加到您的 AMP 友好聯繫表中。

在域字段中，您應該寫下您要添加 reCAPTCHA 支持的網站的域名（不包括 http:// 或 www）。 您還可以通過單擊加號 (+) 圖標來添加多個域或子域。

就所有者字段而言，默認情況下您的電子郵件地址將顯示在那裡。 但是，您可以根據需要添加另一個電子郵件地址。

最後，選​​中“接受 reCAPTCHA 服務條款”複選框，然後向下滾動到頁面底部以單擊“提交”按鈕。

您現在將看到一條成功消息以及站點密鑰和您網站的密鑰。 您需要復制這些密鑰，因為您必須在 WordPress 網站上使用它們。

但在此之前，您還應該做最後一件事。

首先，您需要單擊“轉到設置”鏈接。 接下來，向下滾動到頁面底部，然後選中“允許此鍵使用 AMP 頁面”複選框。

這是使 reCAPTCHA v3 在 AMP 頁面上工作所必需的。 完成後，您需要單擊“保存”按鈕來存儲更改。

第 4 步：將 reCAPTCHA 添加到您的聯繫表單

首先，您必須將站點密鑰和密鑰添加到您的網站。

因此，請轉到您的 WordPress 站點，然後從 WordPress 管理面板的左側邊欄中轉到WPForms »設置頁面。

接下來，您需要單擊reCAPTCHA選項卡來調整設置。

在這裡，您必須選擇“reCAPTCHA v3”作為類型，然後將站點和密鑰粘貼到相應的字段中。

完成後，您需要向下滾動並單擊“保存設置”按鈕以存儲更改。

是時候將 reCAPTCHA 添加到 AMP 友好的聯繫表單中了。

為此，您需要轉到WPForms » All Forms ，然後單擊表單的標題將其打開。

接下來，轉到設置»常規頁面，然後選中“啟用 Google v3 reCAPTCHA”選項。 並且不要忘記單擊“保存”按鈕來存儲更改。

最後的想法

恭喜！ 您已成功為您的 WordPress 網站創建了一個 AMP 友好的聯繫表單。 您還在此表單中添加了 reCAPTCHA 以保護它免受垃圾郵件發送者的侵害。

如果您喜歡這篇文章，那麼您可能還想查看我們關於如何在 WordPress 中創建簡單調查表的分步教程。

另外，請在 Facebook 和 Twitter 上關注我們以從我們的博客中獲取更新。