如何在WordPress中創建AMP表單(簡便方法)


您是否要在WordPress網站上創建AMP友好表單?

加速的移動頁面或AMP是一個Google項目,可以使網站在移動設備上的加載速度更快。

AMP通過加快網頁加載速度提供了出色的移動瀏覽體驗,但同時禁用了網站上的許多有用功能。

聯繫表格就是其中之一。 由於AMP使用一組有限的HTML和JavaScript,因此無法在AMP頁面上正確加載WordPress表單。

但值得慶幸的是,現在有一個簡單的解決方案。 WPForms是最適合初學者的WordPress表單插件,現在可以幫助您創建可用於AMP的WordPress表單。 他們的團隊最近與Google合作,簡化了WordPress的AMP表格。

在本文中,我們將向您展示如何使用WPForms(簡單方法)在WordPress中創建AMP表單。

在WordPress中創建AMP表單(簡便方法)

在WordPress中創建AMP表單(逐步)

為了將AMP與WordPress一起使用,您需要安裝並激活WordPress的官方AMP插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,該插件將自動為您的WordPress網站添加Google AMP支持。

但是,您可以通過以下方式更改網站的AMP設置: AMP»一般 從您的儀表板。

AMP for WordPress設置

在“ AMP設置”頁面上,可以啟用或禁用網站上的AMP,選擇AMP的網站模式,然後選擇支持的模板。

配置AMP後,下一步就是在WordPress網站上創建AMP兼容聯繫表。

步驟1.使用WPForms創建一個WordPress表單

首先,請在您的網站上安裝並激活WPForms Lite插件。 它是WPForms Pro插件的精簡版。

WPForms的精簡版和專業版都允許您創建基本的AMP就緒聯繫表。 在我們的文章中,我們將使用免費版本的屏幕截圖。

安裝並激活插件後,您需要轉到 WPForms»添加新 頁面以創建新的WordPress表單。

在表單設置屏幕上,您可以選擇一個表單模板以快速入門。 如果要從頭開始,可以選擇空白表格。

表單模板WPForms

接下來,它將打開表單構建器頁面。

拖放表單生成器WPForms

在這裡,您可以添加或刪除表單字段。 要將新字段添加到表單,只需在左側面板中單擊一個表單字段,該字段就會出現在右側的表單構建器面板中。

之後,您可以配置字段選項。 只需單擊一個字段,然後將出現“字段選項”。

在WPForms插件中配置字段選項

同樣,您可以自定義所有其他字段。

之後,您可以單擊“設置”選項卡以配置表單設置。

WPForms常規設置

通過“常規設置”,您可以更改表單名稱,提交按鈕文本,提交按鈕處理文本,啟用反垃圾郵件Honeypot等。

接下來,您可以單擊“通知”選項卡來設置電子郵件通知,以在用戶填寫表格時通知您。

WPForms通知設置

接下來,您可以單擊“確認”選項卡以設置一條確認消息,以在用戶提交表單時顯示。

WPForms確認消息設置

配置完成後,您可以保存表單。

步驟2.將您的AMP表單添加到頁面

現在您的WordPress表單已準備就緒,您可以將其添加到頁面中。

首先,您需要創建一個新頁面或打開一個要在其中添加表單的現有頁面。

在頁面編輯屏幕上,單擊“添加新塊”圖標,然後選擇WPForms塊。

將WPForms塊添加到WordPress頁面編輯器

之後,您可以看到WPForms小部件已添加到頁面編輯屏幕。 您只需要選擇您之前創建的表單,該小部件就會立即將其加載到頁面編輯器中。

使用WPForms將聯繫表單添加到WordPress頁面

接下來,您可以發布或更新頁面。

就這樣! 您無需配置其他任何內容。 WPForms Lite插件現在將為您的表單添加完整的AMP支持。

如果要查看外觀,則可以在手機上打開頁面。

或者,您可以通過在頁面URL的末尾添加/ amp /或/?amp來在桌面瀏覽器上打開頁面。 例如,https://www.example.com/contact/?amp。

將Google reCAPTCHA添加到您的AMP表單

默認情況下,WPForms包含反垃圾郵件蜜罐,以捕獲和阻止垃圾郵件。 此外,您可以使用Google reCAPTCHA減少垃圾郵件的提交。

要將Google reCAPTCHA與AMP表單一起使用,您需要為Google reCAPTCHA v3註冊您的網站並獲取Google API密鑰。

轉到Google reCAPTCHA網站,然後單擊頁面右上角的“管理控制台”按鈕。

訪問Google reCAPTCHA網站

之後,您需要使用您的Google帳戶登錄。 完成後,您將看到“註冊新站點”頁面。

為Google reCAPTCHA註冊新網站

首先,您需要在標籤字段中輸入您的網站名稱。 Google AMP僅支持reCAPTCHA v3,因此您需要從reCAPTCHA類型選項中進行選擇。

之後,在“域”部分下輸入您的域名。

為Google reCAPTCHA添加域名和所有者

默認情況下,“所有者”部分顯示您的電子郵件地址。 您還可以根據需要添加其他電子郵件。

接下來,您需要接受reCAPTCHA服務條款以繼續。 另外,選中“​​向所有者發送警報”複選框,這將使Google可以通知您有關您網站上的錯誤配置和可疑流量的問題。

接受Google reCAPTCHA服務條款

完成後,單擊“提交”按鈕。

接下來,您將看到一條成功消息以及站點密鑰和密鑰,以在您的站點上添加reCAPTCHA。

reCAPTCHA密鑰

現在,您已經有了Google API密鑰,可以將reCAPTCHA添加到表單中。 但是,還需要進行另一項調整以確保AMP與reCATCHA兼容。 單擊那裡的“轉到設置”鏈接。

接下來,您將再次看到“允許此鍵處理AMP頁面”複選框的reCAPTCHA設置。 只需選中該複選框,然後單擊下面的“保存”按鈕。

允許reCAPTCHA在AMP頁面上工作

現在您已經有了Google API密鑰,可以在AMP表單上添加reCAPTCHA,現在需要打開 WPForms»設置»reCAPTCHA WordPress信息中心中的頁面。

WPForms reCAPTCHA設置WordPress

在此屏幕上,您需要選擇reCAPTCHA v3選項並粘貼站點密鑰和秘密密鑰。 之後,單擊“保存設置”按鈕。

現在Google reCAPTCHA已添加到WPForms中,您可以在需要的表單中啟用它。 去 WPForms»所有表格 並選擇您要啟用reCAPTCHA的表單。

編輯使用WPForms創建的表單

出現表單設置屏幕後,單擊“設置”選項卡,然後選擇“常規設置”部分。 在底部,您可以看到“啟用Google v3 reCAPTCHA”複選框。

在WPForms中啟用Google v3 reCAPTCHA

選中該框,然後通過單擊右上角的“保存”按鈕來保存表單。

之後,您可以重新訪問您的聯繫頁面,並使用reCAPTCHA查看AMP表單。

我們希望本文能幫助您學習如何在WordPress中輕鬆創建AMP表單。 您可能還想查看有關如何在WordPress中創建符合GDPR要求的表單的指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook