如何在 WordPress 添加地址字段自動填寫功能

最後更新於 2024 年 3 月 19 日，編輯部撰寫 | 評論者：卡里·阿哈邁德

分享數: 281

你是否想在 WordPress 中添加地址字段的自動填寫功能？

最近，有用戶詢問我們如何在 WordPress 表單中添加地址字段的自動填寫功能。自動填寫讓使用者在輸入地址時能從實時生成的建議中快速選擇地址。

在本文中，我們將向您展示如何使用 Google Places API 在 WordPress 添加地址字段的自動填寫功能。

為什麼要在 WordPress 中添加自動填寫地址字段

添加自動填寫地址字段可以幫助改善您網站的用戶體驗。

例如，若您經營電商網站，您的客戶將能夠更快速地輸入地址並避免輸入錯誤。當買家輸入地址時，可能的地址將根據其當前位置在螢幕上顯示，這樣他們只需選擇正確的選項。這有助於減少錯誤，因為顯示給使用者的選項與 Google Places 和 Google Maps API 相關連。

在地址字段中提供自動填寫功能是您能為用戶提供的最方便的功能之一。如果您能快速幫助買家完成結帳，他們更有可能完成購買。通過使每次購買變得快速且簡單，您更有可能提升銷售量並將偶爾的購物者變為回頭客。

既然您已了解在 WordPress 添加自動填寫地址字段的好處，我們將一步一步地向您展示如何操作。

視頻教程

訂閱 WPressize Me

如果您不喜歡視頻或需要更多指示，請繼續閱讀。

安裝並啟用自動填寫 Google 地址插件

首先，您需要安裝並啟用 Autocomplete Google Address 插件。

有關詳細信息，請參閱我們的 WordPress 插件安裝步驟指南。

啟用後，您需要訪問 WordPress 儀表板中的設置 » 自動填寫頁面以配置插件設置。

您將被要求輸入 Google Places API 密鑰。此 API 密鑰允許您的網站連接到 Google Maps 並實時從其資料庫中檢索自動填寫建議。

獲取 Google Places API 密鑰

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

您將看到一個新頁面，要求您為項目提供名稱。使用一個便於識別的名稱，然後點擊“創建”按鈕。如果您有要連接的組織，可以點擊“瀏覽”連結以查看選項下拉列表。

等待幾秒鐘，系統將自動重定向到 “APIs & Services”頁面。

在頁面左側面板導航到“Library”選項卡。

現在，您會看到可以為項目啟用的流行 Google API 列表。在左側面板選擇“Maps”以過濾僅與地圖相關的選項。然後找到並點擊“Places API”選項。

從這裡，您會被引導到 Places API 的概述頁面。點擊“啟用”按鈕以授權 API。

如果您的 Google Console 設置正確，您應該會看到彈出窗口顯示您的 API 密鑰。如果這是您首次設置 Google Console 帳戶，可能需要輸入您的帳單資訊。

現在，您可以返回到您的 WordPress 網站。

將從 Google Console 獲取的 API 密鑰粘貼到“Google Place API 密鑰”欄位中。

啟用 Google Maps JavaScript API

要確保自動填寫地址能在 WordPress 中運作，您需要啟用 Google Maps JavaScript API。

只需返回到 Google Developer Console 儀表板中的 “APIs & Services”選項卡，找到“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 插件清單，或我們的電子郵件簡報創建指南。

如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取更多 WordPress 視頻教程。也可以在 Twitter 和 Facebook 上關注我們。

分享數: 281