Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 901.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62.

Recentemente, um de nossos usuários nos perguntou como adicionar autocomplete para campos de endereço em formulários 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. Essa chave de API permite que seu site se conecte ao Google Maps e recupere sugestões em seus bancos 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

Crie facilmente seu site com Elementor

Elementor permite que você crie Facilmente e Gratuito qualquer site ou blog com um visual profissional. Pare de pagar muito por um site que você pode fazer sozinho.

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 a funcionalidade de preenchimento automático aos campos criados pelos plug-ins de criação de formulário.

Usaremos o WPForms neste tutorial. No entanto, esse plug-in pode funcionar com praticamente qualquer plug-in de criação de formulário.

Você deve primeiro criar um formulário que tenha um campo de endereço ou um conjunto de campos de endereço.

Quando terminar, adicione este formulário ao seu site como 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ê deseja direcionar vários campos em vários formulários, 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.

15 ações
ação12
chilrear
Enregistrer3