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 ".
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.
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.
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 ".
Isso o levará a uma página de visualização explicando como essa API funciona. Você deve clicar no link “Ativar” para continuar.
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.
Na próxima tela, você deve clicar no botão “Quais credenciais eu preciso”.
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.
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 ".
Isso o levará para a página “Visão geral da API”, onde você precisa clicar no link “Ativar” para continuar.
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.
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.
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.
Isso é tudo para este tutorial, espero que ele permita que você adicione o preenchimento automático nos campos do WordPress.
Sei o que fazer para bloquear o preenchimento automático de formulários na página?
Porque muitas vezes se alguém tem muitos dados, por exemplo clicando no nome do autocompletar, o resto vai saltar sobre nós e muitas vezes estar incorreto e o cliente não vê e envia o formulário errado ? Claro, isso é WordPress.