您想在 wordpress 中為地址字段添加自動完成功能嗎?
最近,我們的一位用戶詢問我們如何在 wordpress 表單中添加地址字段的自動完成功能。自動完成功能允許用戶在鍵入時從實時生成的建議中快速選擇地址。
在本文中,我們將向您展示如何使用 Google Places API 在 WordPress 中添加地址字段的自動完成功能。
為什么在 WordPress 中添加自動完成地址字段
在 WordPress 中添加自動完成地址字段可以幫助您改善網站的用戶體驗。
例如,如果您擁有一家電子商務商店,您的客戶將能夠更快地輸入他們的地址并避免拼寫錯誤。
當購物者輸入地址時,可能的地址將根據他們當前的位置顯示在屏幕上,因此他們所需要做的就是選擇正確的地址。這有助于您減少錯誤,因為向用戶顯示的選項與 Google Places 和 Google Maps API 相關聯。
地址字段中的自動完成是您可以為用戶提供的最方便的功能之一。如果您可以快速幫助買家完成結帳,他們更有可能完成購買。
通過使每次購買變得快速而簡單,您更有可能提高銷售額,并將偶爾的購物者變成回頭客。
現在您已經了解了在 WordPress 中添加自動完成地址字段的好處,我們將逐步向您展示如何操作。
視頻教程
https://www.youtube.com/embed/r4zeGIMrzzE?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent訂閱 WPBeginner
https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-Static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com
如果您不喜歡該視頻或需要更多說明,請繼續閱讀。
您需要做的第一件事是安裝并激活自動完成 Google 地址插件。
有關更多詳細信息,請參閱我們有關如何安裝 WordPress 插件的分步指南。
激活后,您需要訪問WordPress 儀表板中的設置 ? 自動完成頁面來配置插件設置。
系統會要求您輸入 Google Places API 密鑰。此 API 密鑰允許您的網站與 Google 地圖連接,并從其數據庫中實時檢索自動完成建議。
訪問 Google 地方信息 API 密鑰
前往Google Developer console網站并創建一個新項目。
您將進入一個新頁面,要求您提供項目的名稱。
使用有助于您稍后識別項目的名稱,然后單擊“創建”按鈕。如果您有想要連接的組織,可以點擊“瀏覽”鏈接查看選項下拉列表。
等待幾秒鐘,您將自動重定向到 API 和服務頁面。
從這里,您想要導航到左側面板并單擊“庫”選項卡。
現在,您將看到可以為您的項目啟用的流行 Google API 的列表。在左側面板中,選擇“地圖”以僅按與地圖相關的選項進行過濾。
您只需找到并單擊“Places API”選項即可。
從那里,您將被引導至 Places API 的概述頁面。
只需單擊“啟用”按鈕即可授權 API。
如果您的 Google 控制臺設置正確,您應該會看到一個彈出窗口,其中包含您的 API 密鑰。
但是,如果這是您第一次設置 Google Console 帳戶,則可能需要輸入結算信息。
現在,您可以返回您的 WordPress 網站。
將 API 密鑰從 Google 控制臺粘貼到顯示“Google Place API 密鑰”的位置。
為了確保自動完成地址在 WordPress 中正常工作,您需要啟用 Google Maps JavaScript API。
因此,您所要做的就是從 Google 開發者控制臺儀表板返回“API 和服務”選項卡。然后,找到“Maps JavaScript API”并單擊“啟用”。
現在,您已準備好繼續添加表單 ID。
對于下一步,您將需要要添加自動完成地址功能的地址字段的表單 ID。
在 WordPress 表單字段中啟用自動完成地址
您可以將自動完成地址功能添加到由任何WordPress 表單生成器插件創建的任何表單字段。
我們將在本教程中使用WPForms,因為它是最好的拖放表單生成器,并且對于初學者來說最容易使用。但是,無論您使用什么聯系表單插件,這些說明都將起作用。
首先,您需要創建一個具有一個或一組地址字段的表單。
完成后,像平常一樣將此表單添加到您的 WordPress 網站。
接下來,轉到您添加表單的帖子或頁面。您需要右鍵單擊地址字段并從瀏覽器菜單中選擇“檢查”。
在這里,您將看到突出顯示的部分,其中包含輸入字段的表單 ID 值。
例如,在此屏幕截圖中,我們表單的 ID 值為wpforms-567-field_4。
您需要復制該值并將其粘貼到插件設置頁面。
但是,您需要將自動完成功能添加到整個地址表單中。例如,如果您希望用戶能夠自動填充整個送貨地址,這意味著他們需要自動填充城市、起始地址和郵政編碼。
在這種情況下,您需要遵循相同的過程,單擊“檢查”,然后查找每個字段的表單 ID。
獲得所有 ID 后,將其復制到“自動完成”頁面,其中顯示“表單 ID”。
添加多個 ID 時,您需要用逗號和引號分隔每個 ID,如下所示。完成后,不要忘記點擊“保存更改”。
就這樣;?您現在可以訪問您的表單頁面并嘗試輸入地址。
表單字段將自動開始顯示使用 Google Places 和Google Maps 的建議。
現在,您已成功將 Google 地址自動完成功能添加到您的表單中。用戶將能夠自動填寫您的表單,無論他們是從您的WooCommerce 商店結賬還是完成用戶注冊。
我們希望本文能幫助您了解如何在 WordPress 中為地址字段添加自動完成功能。您可能還想查看我們的24 個商業網站必備 WordPress 插件列表或有關如何創建電子郵件通訊的指南。