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

最近，我们的一位用户问我们如何在WordPress表单中为地址字段添加自动填充功能。自动完成功能使用户可以在键入时从实时生成的建议中快速选择地址。在本文中，我们将向您展示如何使用Google Places API在WordPress中为地址字段添加自动填充功能。

您需要做的第一件事是安装并激活“ 使用Google Place Api插件自动完成地址”。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，您需要访问设置»Google自动完成页面以配置插件设置。

系统将要求您输入Google Places API密钥。使用此API密钥，您的网站可以与Google Maps连接并从其数据库中实时检索自动完成建议。

前往Google Developer Console网站并创建一个新项目。

将会出现一个弹出窗口，要求您提供项目名称。使用一个可以帮助您以后识别项目的名称，然后单击“创建”按钮。

弹出窗口将消失，等待几秒钟，您将被自动重定向到新项目。

现在，您将看到可以为您的项目启用的流行Google API列表。您需要找到并单击“ Google Places API网络服务”。

这将带您到概述页面，解释该API的工作方式。您需要单击“启用”链接才能继续。

开发者控制台现在将为您的项目启用Google Places API。

但是，您仍然需要凭据才能在您的网站上使用API。因此，继续并单击“创建凭据”按钮以继续。

在下一个屏幕上，您需要单击“我需要什么凭证？” 按钮。

开发者控制台现在将向您显示API密钥。您需要复制此密钥并将其粘贴到WordPress网站上的插件设置下。

您仍然需要在Google Developers项目上启用其他API。单击Google Developer Console中的库，然后单击“ Google Maps JavaScript API”。

这将带您进入API的概述页面，您需要单击“启用”链接以继续。

该API不需要额外的API密钥，因此您现在可以使用了。

您可以将自动完成地址功能添加到任何WordPress表单构建器插件创建的任何表单字段中。

在本教程中，我们将使用WPForms。但是，无论您使用哪种联系表格插件，这些说明都将起作用。

首先，您需要创建一个具有地址字段或一组地址字段的表单。

完成后，像平常一样将此表单添加到您的网站。

接下来，转到添加表单的帖子或页面。您需要右键单击地址字段，然后从浏览器菜单中选择“检查”。

您将看到地址字段的名称，ID和CSS类值。

例如，在此屏幕快照中，表单的名称值为wpforms[fields][9][address1]，ID值为wpforms-352-field_9，css类为wpforms-field-address-address1。

您只需要复制这些值之一并将其粘贴到插件设置页面即可。

如果要以多种形式指定多个字段，则只需添加一个逗号并添加另一个值。

不要忘记单击保存按钮来存储您的更改。

就是这样，您现在可以访问表单页面并尝试输入地址。表单字段将自动开始使用Google地点和Google地图显示建议。