Recentemente, um de nossos usuários nos perguntou como adicionar preenchimento automático para campos de endereço em formas do WordPress. O preenchimento automático permite que os usuários selecionem rapidamente o endereço das sugestões geradas em tempo real enquanto digitam.

Neste tutorial, vamos mostrar como adicionar autocomplete para campos de endereço no WordPress usando " Google Places API ".

Como adicionar autocompletar no wordpress 1

A primeira coisa que você precisa fazer é instalar e ativar o plug-in " Morada Autocomplete Usando o Google Lugar Api ". Para mais detalhes, consulte o nosso guia passo a passo em como instalar um plugin do WordPress.

Após a ativação, você deve visitar o local " Configurações> Google Autocomplete Página para definir as configurações do plug-in.

Configurar autocompletar no wordpress

Você será solicitado a inserir a chave da API do Google Places. Esta chave de API permite que seu site da Web para se conectar ao Google Maps e recuperar sugestões de seu banco de dados em tempo real.

Vá para " Google Developer Console Para criar um novo projeto.

Console de desenvolvimento do Google

Uma janela aparecerá solicitando que você forneça um nome para o seu projeto. Use um nome que o ajudará a identificar o projeto posteriormente e clique no botão "Criar".

O pop-up desaparecerá, aguarde alguns segundos e você será redirecionado automaticamente para o seu novo projeto.

Agora você verá a lista de APIs do Google que você pode ativar para o seu projeto. Você precisa localizar e clicar em " Serviço Web Google Places API ".

Lista de chaves API do Google

Isso o levará a uma página de visualização explicando como essa API funciona. Você deve clicar no link “Ativar” para continuar.

Ativação do módulo de serviço da web da API do Google Place

Console do desenvolvedor ativar o Google Local API para o seu projeto.

No entanto, você ainda precisará das credenciais para usar a API em seu site. Então vá em frente e clique no botão criar credenciais para continuar.

Crie credenciais

Na próxima tela, você deve clicar no botão “Quais credenciais eu preciso”.

Qualquer informação que eu precisar

Agora, o Console do desenvolvedor mostra a chave da API. Você deve copiar essa chave e colá-la nas configurações do seu site WordPress.

Copiar uma chave API do Google

Você sempre deve ativar outra chave de API no seu projeto do Google Developers. Clique na biblioteca no Google Developer Console e clique em " API do Google Maps JavaScript ".

Api JavaScript do Google Maps

Isso o levará para a página “Visão geral da API”, onde você precisa clicar no link “Ativar” para continuar.

Api JavaScript de mapa do Google

Esta API não precisa de uma chave de API adicional, então agora você está pronto para continuar.

Como habilitar o preenchimento automático em campos de formulário

Você pode adicionar um recurso de preenchimento automático nos campos criados pelos plug-ins de criação formas.

Nós estaremos usando WPForms neste tutorial. No entanto, este plug-in pode funcionar com praticamente qualquer plug-in de construtor. formulário.

Primeiro você precisa criar um formulário que tem um campo de endereço ou um conjunto de campos de endereço.

Quando terminar, adicione isto formulário seu site da Web como você faria normalmente.

Em seguida, vá para o artigo ou página em que você adicionou seu formulário. Você deve clicar com o botão direito do mouse no campo e selecionar "Inspecionar" no menu do navegador.

Formulário Wordpress wpforms campo de endereço

Você verá o nome, o ID e os valores da classe CSS para o campo de endereço.

Por exemplo, nesta captura, o nome do atributo " wpforms [campos] [9] [address1] O valor do ID é " wpforms-352-field_9 E a classe css é " wpforms-field-address-address1 ".

Você deve copiar apenas um desses valores e colá-lo na página de configurações do plug-in.

Se você quiser segmentar vários campos em formas múltiplos, basta adicionar uma vírgula e adicionar outros valores.

Adicionar endereços de campos do wordpress

Não se esqueça de clicar no botão « Enregistrer Para salvar suas alterações.

É isso, agora você pode visitar a página do formulário e tentar inserir um endereço. O campo do formulário começará a mostrar sugestões usando o Google Places e o Google Maps.

Localização do Google e google map

Isso é tudo para este tutorial, espero que ele permita que você adicione o preenchimento automático nos campos do WordPress.