Como adicionar o preenchimento automático para campos de endereço no WordPress

Deseja adicionar o preenchimento automático para campos de endereço no WordPress?

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

Neste artigo, mostraremos como adicionar o preenchimento automático para campos de endereço no WordPress usando a API do Google Places.

Por que adicionar campos de endereço com preenchimento automático no WordPress?

A adição de campos de endereço de preenchimento automático no WordPress pode ajudá-lo a melhorar a experiência do usuário em seu site.

Por exemplo, se você tiver uma loja de comércio eletrônico, seus clientes poderão digitar seus endereços mais rapidamente e evitar erros de digitação.

Quando os compradores digitarem o endereço, os endereços possíveis serão exibidos na tela com base na localização atual, portanto, tudo o que eles precisam fazer é escolher o correto. Isso ajuda a reduzir os erros, pois as opções mostradas ao usuário estão conectadas ao Google Places e à API do Google Maps.

O preenchimento automático em campos de endereço é uma das funcionalidades mais convenientes que você pode oferecer aos seus usuários. Se você puder ajudar rapidamente os compradores no checkout, é mais provável que eles concluam a compra.

Ao tornar cada compra rápida e simples, você tem mais chances de aumentar suas vendas e transformar o comprador ocasional em um cliente recorrente.

Agora que você entende os benefícios de adicionar campos de endereço de preenchimento automático no WordPress, mostraremos como fazer isso passo a passo.

Tutorial em vídeo

Se você não gostar do vídeo ou precisar de mais instruções, continue lendo.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in Autocomplete Google Address .

Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você precisa visitar a página Settings ” Autocomplete no painel do WordPress para definir as configurações do plug-in.

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 de preenchimento automático do banco de dados em tempo real.

Acessar a chave da API do Google Places

Acesse o site do Google Developer Console e crie um novo projeto.

Você será levado a uma nova página que solicitará um nome para o seu projeto.

Use um nome que o ajudará a identificar o projeto posteriormente e, em seguida, clique no botão “Create” (Criar). Se você tiver uma organização à qual deseja se conectar, poderá clicar no link “Browse” para ver um menu suspenso de opções.

Aguarde alguns segundos e você será redirecionado automaticamente para a página APIs & Services.

A partir daí, você deve navegar até o painel do lado esquerdo e clicar na guia “Library” (Biblioteca).

Agora, você verá a lista de APIs populares do Google que podem ser ativadas para o seu projeto. No painel esquerdo, selecione “Maps” para filtrar apenas as opções relacionadas a mapas.

Você precisará localizar e clicar na opção “Places API”.

A partir daí, você será direcionado para a página de visão geral da API do Places.

Basta clicar no botão “Enable” (Ativar) para autorizar a API.

Se o Google Console estiver configurado corretamente, você verá uma janela pop-up com sua chave de API.

No entanto, se esta for a primeira vez que você configura sua conta do Google Console, talvez seja necessário inserir suas informações de faturamento.

Agora, você pode voltar ao seu site do WordPress.

Cole a chave de API do seu Console do Google onde está escrito “Google Place API Key”.

Para garantir que o endereço de preenchimento automático funcione no WordPress, você precisará ativar a API JavaScript do Google Maps.

Portanto, tudo o que você precisa fazer é voltar para a guia “APIs e serviços” no painel do Google Developer Console. Em seguida, localize a “API JavaScript do Google Maps” e clique em “Ativar”.

Agora, você está pronto para adicionar o ID do formulário.

Na próxima etapa, você precisará do ID do formulário do campo de endereço em que deseja adicionar o recurso de preenchimento automático de endereços.

Como ativar o preenchimento automático de endereços em campos de formulários do WordPress

Você pode adicionar um recurso de preenchimento automático de endereço a qualquer campo de formulário criado por qualquer plug-in de criação de formulários do WordPress.

Usaremos o WPForms neste tutorial, pois ele é o melhor construtor de formulários do tipo arrastar e soltar e o mais fácil de usar para iniciantes. No entanto, essas instruções funcionarão independentemente do plugin de formulário de contato que estiver usando.

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

Quando terminar, adicione esse formulário ao seu site WordPress como faria normalmente.

Em seguida, vá para o post ou a página em que você adicionou o formulário. Você precisa clicar com o botão direito do mouse no campo de endereço e selecionar “Inspecionar” no menu do navegador.

Aqui, você verá uma seção destacada com o valor do ID do formulário para o campo de entrada.

Por exemplo, nesta captura de tela, o valor de ID do nosso formulário é wpforms-567-field_4.

Você precisa copiar esse valor e colá-lo na página de configurações do plug-in.

No entanto, você desejará adicionar o recurso de preenchimento automático a todo o seu formulário de endereço. Por exemplo, se você quiser que os usuários possam preencher automaticamente um endereço de entrega inteiro, isso significa que eles precisarão preencher automaticamente a cidade, o início e o código postal.

Nesse caso, você precisaria seguir o mesmo processo clicando em “Inspecionar” e, em seguida, encontrando o ID do formulário para cada campo.

Depois de obter todos os IDs, copie-os para a página de preenchimento automático, onde está escrito “Form ID”.

Ao adicionar vários IDs, você precisará separar cada ID com uma vírgula e aspas, conforme mostrado abaixo. Quando terminar, não se esqueça de clicar em “Save Changes” (Salvar alterações).

Isso é tudo; agora você pode visitar a página do formulário e tentar inserir um endereço.

O campo do formulário começará a exibir automaticamente sugestões usando o Google Places e o Google Maps.

Agora, você adicionou com êxito o recurso de preenchimento automático de endereços do Google aos seus formulários. Os usuários poderão preencher automaticamente o seu formulário, quer estejam fazendo check-out na sua loja WooCommerce ou concluindo uma inscrição de registro de usuário.

Esperamos que este artigo tenha ajudado você a aprender como adicionar o preenchimento automático para campos de endereço no WordPress. Talvez você também queira ver nossa lista de 24 plug-ins obrigatórios do WordPress para sites de negócios ou nosso guia sobre como criar um boletim informativo por e-mail.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.