如何在WordPress中為地址字段添加自動完成功能


最近,我們的一位用戶問我們如何在WordPress表單中為地址字段添加自動填充功能。 自動完成功能使用戶可以在鍵入時從實時生成的建議中快速選擇地址。 在本文中,我們將向您展示如何使用Google Places API在WordPress中為地址字段添加自動填充功能。

如何在WordPress中為地址字段添加自動完成功能

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

您需要做的第一件事是使用Google Place Api插件安裝並激活“地址自動完成”。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要訪問 設置»Google自動填充 頁面以配置插件設置。

自動填充地址字段插件設置頁面

系統將要求您輸入Google Places API密鑰。 使用此API密鑰,您的網站可以與Google Maps連接並從其數據庫中實時檢索自動完成建議。

前往Google Developer Console網站並創建一個新項目。

創建一個新項目

將會出現一個彈出窗口,要求您提供項目的名稱。 使用可以幫助您以後識別項目的名稱,然後單擊“創建”按鈕。

彈出窗口將消失,等待幾秒鐘,您將被自動重定向到新項目。

現在,您將看到可以為您的項目啟用的流行Google API列表。 您需要找到並單擊“ Google Places API網絡服務”。

選擇Google Places API

這將帶您到概述頁面,解釋該API的工作原理。 您需要單擊“啟用”鏈接才能繼續。

啟用Places API

開發者控制台現在將為您的項目啟用Google Places API。

但是,您仍然需要憑據才能在您的網站上使用API​​。 因此,繼續並單擊“創建憑據”按鈕以繼續。

獲取API憑證

在下一個屏幕上,您需要單擊“我需要什麼憑證?” 按鈕。

我需要什麼憑證

開發者控制台現在將向您顯示API密鑰。 您需要復制此密鑰並將其粘貼到WordPress網站上的插件設置下。

複製API密鑰

您仍然需要在Google Developers項目上啟用其他API。 單擊Google Developer Console中的庫,然後單擊“ Google Maps JavaScript API”。

Google Maps JavaScript API

這將帶您進入API的概述頁面,您需要單擊“啟用”鏈接以繼續。

啟用JavaScript API

該API不需要額外的API密鑰,因此您現在可以使用了。

在WordPress表單字段中啟用自動填充地址

您可以將自動完成地址功能添加到任何WordPress表單構建器插件創建的任何表單字段中。

在本教程中,我們將使用WPForms。 但是,無論您使用哪種聯繫表格插件,這些說明都將起作用。

首先,您需要創建一個具有地址字段或一組地址字段的表單。

完成後,像平常一樣將此表單添加到您的網站。

接下來,轉到添加表單的帖子或頁面。 您需要右鍵單擊地址字段,然後從瀏覽器菜單中選擇“檢查”。

檢查表格地址字段

您將看到地址字段的名稱,ID和CSS類值。

例如,在此屏幕截圖中,表單的名稱值為 wpforms[fields][9][address1],ID值為 wpforms-352-field_9,而CSS類是 wpforms-field-address-address1

您只需要復制這些值之一併將其粘貼到插件設置頁面即可。

如果要以多種形式指定多個字段,則只需添加一個逗號並添加另一個值。

表單中的目標地址字段

不要忘記單擊保存按鈕來存儲您的更改。

就是這樣,您現在可以訪問表單頁面並嘗試輸入地址。 表單字段將自動開始使用Google地點和Google地圖顯示建議。

地址自動完成預覽

我們希望本文能幫助您學習如何在WordPress中為地址字段添加自動填充功能。 您可能還想查看我們列出的24個必須具有用於商務網站的WordPress插件的列表。

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