如何在 WordPress 表单中添加地址自动完成字段?
已发表: 2023-02-06想知道如何将地址自动完成 WordPress 表单添加到您的网站? 那么,这篇文章正是您现在所需要的。
如果您的 WordPress 表单有地址字段,我们建议您为其添加自动完成功能。 这样,您的用户可以更轻松地填写地址字段并成功提交表单。
这就是为什么我们准备了有关如何创建地址自动完成 WordPress 表单的详细指南。 所以,读到最后。
但在本教程之前,让我们讨论一下地址自动完成功能的好处以及将其添加到表单的最佳方式。
目录
地址自动完成选项对在线表格有何帮助?
您可以为任何 WordPress 表单使用常规地址字段。 那么,为什么要添加地址自动完成选项呢?
那么,以下是地址自动完成选项有用的一些重要方式:
- 地址自动完成字段会根据用户的输入自动向他们推荐地点。
- 用户可以从可用的地址建议列表中选择准确的地址。
- 由于用户不必键入完整地址,因此他们可以相对更快地填写表格。
- 自动完成功能使表单填写变得简单快捷。 这有助于增加成功的表单提交并减少表单放弃。
因此,在您的表单中包含一个自动完成的地址字段是明智的。
但是,WordPress 默认不提供此功能。 那么,您最好的选择是什么?
我们将在下一节介绍添加地址自动完成字段的最佳方法。
创建地址自动完成 WordPress 表单的最佳方式
由于 WordPress 默认不允许添加地址自动完成功能,因此您将不得不依赖插件。
正确的 WordPress 插件可以让您轻松地将功能添加到您的表单中。 Everest Forms 就是这样一种插件。

流行的拖放式表单构建器插件可能是您 WordPress 网站的完美补充。
这个强大的工具可以做到这一切! 它允许您创建自定义表单,而无需触及一行代码。
您可以使用它的 20 多个表单字段来构建联系表单、请假请求表单、订单表单或您需要的任何表单。
此外,它提供了一个地址字段,您可以在其中轻松启用自动完成选项。 因此,我们推荐 Everest Forms 插件作为为您的表单配备此功能的最佳方式。
如何在 WordPress 表单中添加地址自动完成字段?
在本教程中,我们使用 Everest Forms 来演示制作地址自动完成 WordPress 表单的过程。
按照以下 7 个简单步骤在您的表单中添加 WordPress 谷歌地址自动完成选项。
第 1 步:安装并激活 Everest Forms Pro
首先在您的站点上安装并激活 Everest Forms Pro 插件。 此高级版本在核心免费 Everest Forms 插件之上运行。
因此,您需要设置插件的免费版和高级版才能使地址自动完成功能正常工作。
注意:您需要高级版本,因为提供自动完成功能的 Geolocation 附加组件是高级扩展。
它在 Plus 计划及更高版本中可用。 因此,您必须购买 Plus、Agency 和 Professional 中的任何计划才能获得附加组件。
我们有一个单独的指南,介绍如何在您的网站上正确设置 Everest Forms Pro。 因此,如果您需要帮助安装和激活插件,请检查一下。
第 2 步:安装并激活地理定位插件
如果您已正确设置 Everest Forms Pro,您应该能够访问所有可用的附加组件。 请记住,您可以访问的附加组件取决于您购买的计划。
因此,在您的 WordPress 仪表板中打开Everest Forms >> Add-ons 。

向下滚动以找到Geolocation插件并单击Install Addon 。 要完成安装,请在之后按激活按钮。

这将设置附加组件供您在 WordPress 表单中使用。
第 3 步:从 Google 控制台获取 API 密钥
第三步是从 Google 控制台获取 API 密钥。 这将帮助您将 Everest Forms 插件连接到 Google 控制台。
首先,访问 Google 控制台仪表板。 您必须通过您的Google 帐户登录才能访问此信息中心。

然后,从仪表板顶部选择您的项目。

如果您还没有项目,可以通过单击新建项目来创建一个。 接下来,为您的项目命名并按Create 。

选择项目后,您将到达该项目的APIs & Services页面。

假设您没有自动重定向到此页面。 在这种情况下,您可以每年从左上角的导航菜单中打开它。
按菜单并打开APIs & Services >> Enabled APIs & Services 。

在这里,单击+ENABLE APIS AND SERVICES 。

在 API 库中,搜索Places API并启用它。

注意:要成功启用 API,您必须有一个计费帐户。 因此,在继续之前为您的 Google Cloud Console 启用计费。

启用 API 后,导航至APIs & Services >> Credentials 。 现在,点击+Create Credentials然后选择API Key 。

这会为您生成一个新的API 密钥。 但在复制 API 密钥之前,您必须对其添加一些限制。 为此,单击Edit Key 。


首先,你必须设置一个应用程序限制。 这让您可以限制哪些网站、IP 地址或应用程序可以使用 API 密钥。 在我们的例子中,让我们选择Websites 。

接下来,添加 API 密钥有效的网站,然后按完成。 如果需要,您可以添加多个网站。

之后,您必须通过选择限制密钥单选按钮来设置API 限制。 这让您的密钥知道它可以调用哪些已启用的 API。
因为我们只需要 Places API,所以我们从下拉列表中选择它。 您可以根据需要启用和添加更多 API,例如 Maps JavaScript API。

最后,点击保存按钮。
您现在要做的就是复制密钥以备后用。 请妥善保管它,因为下一步需要它。

第 4 步:将 API 密钥添加到地理位置设置
回到您的 WordPress 仪表板,转到Everest Forms >> Settings >> Geolocation 。

将您复制的API 密钥粘贴到Google Places API 密钥字段中。 然后,按保存更改按钮。
这样就完成了 Google Places API 和 Everest Forms 之间的连接。
在Geolocation设置中还有一个选项Current Location 。 当您打开此选项时,您的表单会自动检测并在“地址”字段中填写用户的当前位置。
它是完全可选的,因此是否打开它取决于您的要求。
第 5 步:创建一个带有地址字段的新表单
您已成功将 Everest Forms 连接到 Google Places API。 但是,您仍然需要适用自动完成地址功能的表单。
为此,您必须使用地址字段创建一个新的 WordPress 表单。
问题是:你制作什么类型的表格? 好吧,这完全取决于你!
Everest Forms 最好的地方在于它可以让你创建你需要的任何类型的表单。 联系表、调查表、工作申请表、预订表等。
因此,转到Everest Forms >> Add New 。
Everest Forms 为各种表单提供了多个预建模板。 因此,如果时间不够,您可以自定义其中之一。

但从头开始设计表单同样简单! 只需拖放所需的字段并自定义它们。
我们将从头开始为本指南构建一个带有地址字段的简单联系表单。
因此,单击从头开始。 接下来,输入表单标题并点击Continue 。

这会将您带到表单生成器。 如您所见,所有表单字段都在左侧组合在一起。 您可以将它们拖放到右侧的表单行中。

因此,将您需要的任何字段添加到表单中,例如Name 、 Email 、 Subject 、 Message ,最重要的是Address 。

地址自动完成 WordPress 表单完成后,按顶部的“保存”按钮保存您的新表单。

第 6 步:为地址字段启用地址自动完成
对于每个字段,您都会获得大量自定义选项。 同样,地址字段有多个选项,其中之一是地址自动完成功能。
虽然我们在这里关注地址字段,但请确保您也自定义了其他字段。
单击要编辑的字段; 它的自定义选项将在左侧打开。

从这里,您可以更改字段Label 、 Description 、 Field Visibility等。您还可以启用Required 、 Enable Tooltip 、 Hide Label和添加CSS Classes 。
此外,您还可以为各个字段设置条件逻辑。
但是让我们回到我们的亮点领域。 当您单击“地址”字段时,“字段选项”会显示与我们上面讨论的类似的选项。
但是,高级选项包括为地址字段策划的一些功能。

例如,您可以更改Address Line 1 、 Address Line 2 、 Country等的占位符和默认值。另外,您可以从Default Countries List中选择要向用户提供的国家。

最重要的是,您只需勾选复选框即可启用地址自动完成功能。
点击保存按钮,您的地址字段将自动向填写表格的用户推荐地点。

如果你想显示谷歌地图而不是文本地址,你可以从样式下拉列表中选择地图。 选择Address With Map以显示两者。
我们有一篇关于将 Google 地图添加到您的表单的文章。 因此,如果您有兴趣,请检查一下。
第 7 步:在您的站点上显示地址自动完成 WordPress 表单
恭喜! 您正处在本教程的最后一步!
由于地址自动完成 WordPress 表单已准备就绪,您必须将其添加到您网站的前端。
Everest Forms 让您只需几个简单的步骤即可完成。
首先打开要添加 WordPress 表单的页面或帖子。
进入古腾堡编辑器后,选择块插入器 ( + ) 按钮。

搜索Everest Forms块并通过单击将其添加到页面/帖子。
接下来,从下拉列表中选择带有地址自动完成字段的表单。 这会自动将表单添加到页面/帖子。

最后,点击顶部的更新按钮。
您还可以将表单添加到全新的页面/帖子。 只需按照相同的步骤并在最后按“发布”按钮即可。 你完成了!
您的用户现在可以从前端访问地址自动完成 WordPress 表单。
包起来
正如您现在所知道的,构建一个 WordPress 谷歌地址自动完成表单非常容易。 特别是当您手边有 Everest Forms 插件时。
这个令人难以置信的插件可让您快速将表单连接到 Google 控制台。 因此,您的用户可以使用自动完成功能轻松填写地址字段。
但是你知道吗? Everest Forms 可以提供更多。
您可以使用它来自定义电子邮件模板、安排表单提交、自动填充表单字段等。
在我们的博客上阅读有关此插件的所有信息。 如果您是视觉学习者,请查看我们的 YouTube 频道以获取简单的视频教程。
此外,请关注 Twitter 和 Facebook 以获取每周帖子的更新。