如何在 WordPress 中創建 AMP 表單

已發表: 2020-07-07

為了讓網站在移動設備上加載得更快,谷歌開發了一個名為 Accelerated Mobile Pages 或 AMP 的項目。 而且,雖然它確實通過加快網頁加載速度提供了出色的移動瀏覽體驗,但它也會禁用您網站上的許多有用功能。 可以被認為是巨大損失的那些功能之一是聯繫表格。 由於 AMP 使用一組有限的 HTML 和 JavaScript,它無法在 AMP 頁面上正確加載您的 WordPress 表單。 幸運的是,有一個簡單的解決方案可用。 WPForms 是一個相當適合初學者的 WordPress 表單插件,可幫助您創建支持 AMP 的 WordPress 表單。 因此,在接下來的文章中,我們將詳細解釋如何使用 WPForms 在 WordPress 中創建 AMP 表單

拼出“wordpress”、白色電腦鍵盤和白色手機的字母拼貼
使用 AMP 可以非常輕鬆地優化您的網站以進行手機訪問。

了解如何在 WordPress 中創建 AMP 表單

因此,AMP 對於使您的網站適合移動設備使用非常有用。 而且,安裝和激活 WordPress 的官方 AMP 插件是在 WordPress 中使用 AMP 的先決條件。 激活後,該插件將自動為您的 WordPress 站點添加 Google AMP 支持。 但是,您可以通過從儀表板轉到 AMP > 常規來更改您網站的 AMP 設置。 當您在 AMP 設置頁面上時,您可以在您的網站上啟用或禁用 AMP,還可以為 AMP 選擇網站模式,並選擇支持的模板。 配置 AMP 後,您必須在 WordPress 網站上創建與 AMP 兼容的聯繫表單。

使用 WPForms 創建 WordPress 表單

要啟動該過程,您必須在您的站點上安裝並激活 WPForms Lite 插件。 這是 WPForms Pro 插件的精簡版。 WPForms 的專業版和精簡版都允許您創建一個基本的 AMP 就緒聯繫表。 在這裡,我們將討論免費版本。 安裝並激活插件後,您必須前往 WPForms > 添加新頁面以創建新的 WordPress 表單。 在表單設置屏幕上,您將能夠選擇表單模板以快速開始。

如果您想從頭開始,我們建議您選擇空白表格。 然後它將打開表單構建器頁面。 從這裡,您可以添加或刪除表單域。 要在表單中添加新字段,只需單擊左側面板中的表單字段,它就會出現在右側的表單構建器面板中。 完成後,您可以配置字段選項。 為此,請單擊一個字段,然後將出現字段選項。 以類似的方式,您可以自定義所有其他字段。

一個在電腦上工作的人
從頭開始將允許您根據自己的喜好自定義設置。

之後,單擊“設置”選項卡以配置您的表單設置。 通過常規設置,您可以更改表單名稱、提交按鈕文本、提交按鈕處理文本、啟用反垃圾郵件蜜罐等。 轉到通知選項卡以設置電子郵件通知,當用戶完成表單時通知您。 確認選項卡將幫助您設置在用戶提交表單時顯示的確認消息。 配置完成後,請務必保存您的表單。

將 AMP 表單添加到頁面

準備好 WordPress 表單後,您可以將其添加到頁面中。 首先,您需要創建一個新頁面或打開一個要添加表單的現有頁面。 打開頁面編輯屏幕,單擊添加新塊圖標,然後繼續選擇 WPForms 塊。 這樣做後,您將能夠看到添加到頁面編輯屏幕的 WPForms 小部件。 您只需要選擇之前創建的表單,小部件就會立即將其加載到頁面編輯器中。 您還可以發布或更新您的頁面。 這就是全部。 您無需配置任何其他內容。 WPForms Lite 插件現在將為您的表單添加完整的 AMP 支持。 如果您對它的外觀感興趣,可以在手機上打開該頁面。

如何將 google reCAPTCHA 添加到您的 AMP 表單

WPForms 包含反垃圾郵件蜜罐,默認情況下可以捕獲和阻止垃圾郵件。 此外,您可以使用 Google reCAPTCHA 來減少垃圾郵件提交。 為了在您的 AMP 表單中使用 Google reCAPTCHA,您必須為您的網站註冊 Google reCAPTCHA v3 並獲取 Google API 密鑰。 為此,請訪問 Google reCAPTCHA 網站並單擊頁面右上角的“管理控制台”按鈕。 然後,您必須使用您的 Google 帳戶登錄。 完成後,您將看到“註冊新站點”頁面。 通過在標籤字段中輸入您的網站名稱開始填寫它。 Google AMP 僅支持 reCAPTCHA v3,因此您必須從 reCAPTCHA 類型選項中進行選擇。

完成後,在“域”部分下輸入您的域名。 所有者部分將默認顯示您的電子郵件地址。 請注意,如果您願意,還可以添加另一封電子郵件。 接下來,您必須接受 reCAPTCHA 服務條款才能繼續。 另外,不要忘記選中“將更改發送給所有者”複選框。 這將允許 Google 通知您有關您網站上的錯誤配置和可疑流量等問題。 完成後,單擊提交按鈕。 然後,您將看到一條成功消息以及站點密鑰和在您的站點上添加 reCAPTCHA 的密鑰。 此鍵允許您將 reCAPTCHA 添加到您的表單中。

額外調整

但是,您還需要進行一項調整。 它將確保 AMP 與 reCAPTCHA 的兼容性。 要訪問它,請單擊此處的“轉到設置”鏈接。 這將引導您再次使用“允許此密鑰與 AMP 頁面一起使用”複選框進行 reCAPTCHA 設置。 只需選中該框,然後單擊下面的保存按鈕。

一個在筆記本電腦上工作的女孩
完成調整設置後,不要忘記保存所有工作。

現在您擁有 Google API 密鑰可以在 AMP 表單上添加 reCAPTCHA,請轉到 WordPress 儀表板中的 WPForms > Settings > reCAPTCHA 頁面。 然後選擇 reCAPTCHA v3 選項並粘貼站點密鑰和密鑰。 單擊保存設置按鈕。 現在 Google reCAPTCHA 已添加到 WPForms,您可以根據需要在表單中自由啟用它。 轉到 WPForms > 所有表單,然後選擇要啟用 reCAPTCHA 的表單。 當表單設置屏幕出現時,單擊“設置”選項卡並選擇“常規設置”部分。 您將看到“啟用 Google v3 reCAPTCHA”複選框。 選中該框並保存您的表格。 之後,重新訪問您的聯繫頁面並查看帶有 reCAPTCHA 的 AMP 表單。

沒那麼多

如您所見,為了在 WordPress 中創建 AMP 表單,您無需費力。 尤其是當您身邊有本指南時。 我們希望我們對您有所幫助,並且在完成這些簡單的步驟後,您將看到 AMP 表單的所有好處