Como Adicionar Autocompletar para Campos de Endereço no WordPress

Você já perdeu um cliente porque seu formulário do WordPress era muito longo ou frustrante de preencher? Isso acontece o tempo todo. Um comprador está pronto para comprar, mas fica preso digitando um endereço longo, especialmente em um dispositivo móvel.

Um pequeno erro de digitação pode significar uma entrega falha e, em muitos casos, o cliente simplesmente desiste antes de terminar.

É por isso que o preenchimento automático de endereço é tão útil. Ele sugere o endereço correto assim que os usuários começam a digitar, tornando o processo mais rápido, fácil e menos propenso a erros. O resultado são clientes mais felizes e menos vendas perdidas.

Além disso, é fácil de configurar. Neste guia, mostrarei como adicionar o preenchimento automático de endereço aos seus formulários do WordPress passo a passo usando o WPForms e seu addon Geolocation.

Por que Adicionar Campos de Endereço com Autocompletar no WordPress?

Adicionar o preenchimento automático de endereço ao seu site WordPress é uma maneira fácil de melhorar a experiência do usuário do seu site. Em uma loja de comércio eletrônico, por exemplo, ele ajuda os clientes a inserir seus endereços mais rapidamente e evitar erros de digitação.

Veja como funciona: Conforme os compradores digitam, sugestões de endereço, extraídas do Google Places/Maps, aparecem. Isso permite que eles simplesmente escolham o correto, e o formulário é preenchido automaticamente.

Isso reduz erros e acelera o checkout. E checkouts mais rápidos e precisos impulsionam as vendas e tornam os compradores mais propensos a retornar.

Além de lojas online, o preenchimento automático de endereços ajuda a reduzir erros em cadastros e formulários de reserva. Além disso, torna o preenchimento de qualquer tipo de formulário, especialmente no celular, muito mais fácil.

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

Aqui está um breve resumo de todas as etapas que abordarei neste artigo:

• Etapa 1: Gere uma Chave de API do Google Places
• Etapa 2: Instale o Plugin WPForms e o Addon Geolocation
• Etapa 3: Habilite o Preenchimento Automático de Endereços em Seus Formulários WordPress
• Etapa 4: Crie um Formulário com Preenchimento Automático de Endereços
• Etapa 5: Incorpore Seu Formulário WordPress com Preenchimento Automático de Endereços
• Dica Bônus: Rastreie e Reduza o Abandono de Formulários no WordPress
• Perguntas Frequentes Sobre Preenchimento Automático para Campos de Endereço em Formulários WordPress
• Mais Guias para Usar Formulários WordPress

Pronto? Vamos começar.

Etapa 1: Gere uma Chave de API do Google Places

Para conectar o WPForms ao Google Maps e habilitar o recurso de preenchimento automático de endereços, você precisará de uma chave de API do Google Places. Vamos percorrer o processo.

Para obter sua chave, você precisará acessar a Plataforma Google Maps, que é gerenciada dentro do Google Cloud Console. O console pode parecer um pouco complexo, mas não se preocupe – vou guiá-lo pelas etapas exatas que você precisa.

Primeiro, vamos clicar em ‘Criar Projeto’.

Na próxima tela, você precisará nomear seu novo projeto. Recomendo usar um nome que o ajude a identificá-lo facilmente mais tarde.

Em seguida, se você tiver uma organização à qual deseja se conectar, pode clicar no link ‘Browse’ para ver um menu suspenso de opções. Alternativamente, você pode selecionar ‘No organization.’

Quando tudo parecer bom, você pode clicar no botão ‘Create’.

Na próxima tela, prossiga e abra a aba ‘Library’.

A partir daí, você precisará ativar três APIs específicas. Pense nelas como uma equipe que trabalha junta:

• Places API: Este é o jogador estrela que fornece as sugestões de preenchimento automático de endereço enquanto você digita.
• Maps JavaScript API: Isso permite que você exiba uma visualização de mapa do endereço selecionado diretamente em seu formulário (o que é um recurso opcional e interessante).
• Geocoding API: Isso funciona nos bastidores para converter endereços em coordenadas de mapa.

A maneira mais fácil de encontrá-los é usando a barra de pesquisa – basta pesquisar, selecionar a API e clicar em ‘Ativar’. Repita isso até que todas as três APIs estejam ativas.

Quando isso for feito, você gerará uma chave exclusiva que seu site usará para se comunicar com as APIs do Google.

Portanto, mesmo que você tenha ativado três APIs diferentes, você não precisa de três chaves separadas. Uma única chave de API pode dar ao seu site acesso a todas elas, desde que você defina as restrições corretas.

Para fazer isso, você pode ir para a aba ‘Credenciais’. Em seguida, você pode clicar em Criar Credenciais » Chave de API.

Isso abrirá um painel para configurar a chave de API.

Em ‘Restrições de aplicativo’, selecione ‘Websites’ para que a chave funcione apenas no seu site.

Isso abrirá a opção de configuração de ‘Restrições de website’.

Aqui, você pode simplesmente inserir o nome do seu domínio e clicar em ‘Concluído’.

Depois disso, você pode continuar para a seção ‘Restrições de API’.

Vamos primeiro ativar a opção ‘Restringir chave’.

Em seguida, no menu suspenso ‘Selecionar APIs’, você desejará selecionar as três APIs que acabou de ativar e clicar em ‘Ok’.

Isso limitará o acesso da chave apenas àquelas APIs.

Após salvar suas alterações, você verá sua chave de API exclusiva.

Vá em frente e copie-a – você precisará dela na próxima etapa ao conectá-la ao WPForms.

Etapa 2: Instale o Plugin WPForms e o Addon Geolocation

Para este tutorial, usaremos o WPForms, que é o melhor construtor de formulários de contato para WordPress. Ele vem com um poderoso complemento de Geocalização que torna a adição de preenchimento automático de endereço incrivelmente simples.

No WPBeginner, usamos o WPForms para exibir nosso formulário de contato e realizar nossas pesquisas anuais com leitores. Veja nossa análise completa do WPForms para mais informações sobre o plugin.

A primeira coisa a fazer é se inscrever para uma conta WPForms. No site deles, basta clicar em ‘Get WPForms Now’ para começar.

Você pode então selecionar um plano e prosseguir com o processo de checkout.

Depois de se inscrever, você precisará instalar e ativar o plugin WPForms.

Na sua área de administração do WordPress, navegue até Plugins » Adicionar Novo Plugin.

Depois disso, você pode usar o recurso de pesquisa para encontrar o plugin WPForms.

Nos resultados da pesquisa, clique em ‘Instalar Agora’ e depois clique no botão ‘Ativar’ quando ele aparecer.

Se precisar de ajuda, você pode seguir nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você precisará verificar sua chave de licença.

Para começar, vá para WPForms » Configurações, insira sua chave de licença no campo fornecido e clique no botão ‘Verificar Chave’. Você pode encontrar sua chave de licença em sua conta WPForms.

Com isso feito, você pode ir para WPForms » Addons no painel de administração do WordPress para instalar o addon de Geolocation.

Na próxima tela, navegue pelas opções (ou use a barra de pesquisa) e clique em ‘Instalar Addon’ para o addon de Geolocation.

O WPForms instalará e ativará automaticamente o addon em alguns instantes.

Etapa 3: Habilite o Preenchimento Automático de Endereços em Seus Formulários WordPress

Agora que você tem sua chave de API exclusiva e o addon de Geolocation, é hora de habilitar o preenchimento automático de endereços em seu formulário WordPress.

Vá para WPForms » Configurações no seu painel do WordPress. Em seguida, mude para a aba ‘Geolocation’ no topo.

Aqui, você encontrará algumas opções que pode ajustar:

• Provedor de Lugares – Para este guia, selecionaremos ‘Google Places’.
• Chave de API – Cole a chave de API exclusiva que você gerou na Etapa 1. Isso habilitará o preenchimento automático de endereços e exibirá Google Maps dentro dos seus formulários.
• Localização Atual – Ative esta opção para preencher automaticamente a localização dos usuários em seus formulários.

Não se esqueça de clicar em ‘Salvar Configurações’ na parte inferior deste painel.

Em seguida, você só precisa habilitar o preenchimento automático no formulário onde deseja usá-lo. Você pode editar um formulário existente ou criar um novo.

Etapa 4: Crie um Formulário com Preenchimento Automático de Endereços

Até agora, você conectou o WPForms ao Google Maps. Nesta etapa, criaremos um formulário com um campo de Endereço.

Para começar, vá para WPForms » Adicionar Novo na sua área de administração do WordPress.

Na próxima tela, você pode dar um nome ao seu formulário.

Você vai querer usar um nome claro e descritivo para que seja mais fácil organizar à medida que você cria mais formulários.

Depois disso, você escolherá como deseja construir seu formulário: usando uma tela em branco, um modelo pré-fabricado ou um construtor de formulários com IA.

Se você quiser usar o construtor de formulários com IA, tudo o que você precisa fazer é inserir um prompt simples. WPForms AI gerará o formulário para você em alguns segundos.

Para este tutorial, no entanto, usarei um modelo pronto.

O WPForms vem com mais de 2.000 modelos de formulários, facilitando a busca por um que seja quase perfeito para o seu objetivo.

Assim que você encontrar um bom modelo para usar como base, basta passar o mouse sobre ele e clicar no botão ‘Usar Modelo’. Aqui, usarei o modelo Formulário de Contato Simples.

Isso abrirá o construtor de formulários de arrastar e soltar.

Em seguida, arraste o campo ‘Endereço’ do painel esquerdo e solte-o em seu formulário (se ele já não estiver lá).

Assim que o campo ‘Endereço’ estiver no lugar, você pode clicar nele para abrir o painel ‘Opções do Campo’.

Aqui, você pode ajustar o rótulo do campo, adicionar uma descrição ao campo ou escolher um esquema de endereço diferente – EUA ou internacional.

Assim que você personalizar as configurações gerais, pode mudar para a aba ‘Avançado’.

Em seguida, role o painel para baixo até encontrar a opção ‘Habilitar Autocompletar de Endereço’. Vá em frente e ative-a.

Isso permitirá que os usuários preencham rapidamente seus endereços completos, incluindo cidade, estado e código postal, diretamente em seu formulário do WordPress.

Habilitar este recurso abrirá as opções ‘Exibir Mapa’. Simplesmente ative-o para adicionar o mapa ao seu campo ‘Endereço’.

Em seguida, você pode escolher exibir o mapa acima ou abaixo do campo em seu formulário.

Quando terminar, não se esqueça de clicar no botão ‘Salvar’ na parte superior para aplicar suas alterações.

A partir daqui, você pode personalizar suas notificações e confirmações. Para mais detalhes, veja nosso guia sobre como criar um formulário de contato.

Etapa 5: Incorpore Seu Formulário WordPress com Preenchimento Automático de Endereços

Agora, você está pronto para adicionar seu formulário ao seu site WordPress.

Para começar, clique no botão ‘Incorporar’ no topo do construtor de formulários.

Um pop-up aparecerá onde você pode adicionar o formulário a uma página existente ou criar uma nova página.

Para este tutorial, escolherei ‘Selecionar Página Existente’.

No próximo pop-up, você pode escolher uma página no menu suspenso.

Em seguida, clique em ‘Vamos!’ para continuar.

O WPForms o redirecionará para o editor de blocos do WordPress.

Aqui, clique no ícone ‘+’ e adicione o bloco WPForms.

Em seguida, selecione seu formulário no menu suspenso.

O WPForms o carregará automaticamente no editor de conteúdo.

No painel do lado direito, você pode ajustar as ‘Configurações do Formulário’.

Por exemplo, você pode querer exibir o título ou a descrição do formulário para fornecer mais contexto aos visitantes.

Você também pode estilizar seu formulário para que ele combine melhor com o tema do seu site. E quando estiver satisfeito com o design, basta clicar no botão ‘Salvar’.

Pronto! Agora você pode visitar a página do seu formulário e tentar digitar um endereço.

O campo de endereço mostrará automaticamente sugestões do Google Maps, permitindo que os usuários preencham seus endereços com um único clique.

Você adicionou com sucesso o recurso de preenchimento automático de endereços do Google aos seus formulários.

Os usuários poderão preencher automaticamente seu formulário, seja ao finalizar uma compra em sua loja WooCommerce ou ao completar um cadastro de registro de usuário.

Veja como pode ficar depois que os usuários selecionarem uma sugestão de endereço de preenchimento automático:

Dica Bônus: Rastreie e Reduza o Abandono de Formulários no WordPress

O abandono de formulário acontece quando as pessoas saem de um formulário sem enviá-lo, o que geralmente se deve a uma má experiência do usuário.

Reduzir o abandono de formulários é importante porque pode prejudicar o crescimento da sua lista de e-mail, suas vendas de comércio eletrônico e o sucesso geral do seu negócio.

Estudos mostram que mais de 77% dos compradores online não finalizam seus formulários de checkout, o que significa perder muito dinheiro com vendas incompletas.

Ao rastrear e melhorar os formulários que as pessoas frequentemente abandonam, você pode reduzir essas perdas de receita.

Embora a autocompletar possa ajudar, ainda existem outros fatores que podem contribuir para o abandono de formulários:

• Campos Opcionais Tornados Obrigatórios: Fazer as pessoas preencherem informações não essenciais pode ser muito irritante.
• Instruções Pouco Claras: Campos de formulário confusos ou vagos podem fazer as pessoas desistirem.
• Não Otimizado para Dispositivos Móveis: Formulários difíceis de usar em dispositivos móveis podem ser um grande desestímulo.
• Problemas Técnicos: Problemas como o formulário não funcionar bem ou tempos de carregamento lentos podem impedir as pessoas de completá-lo.

Para mais detalhes, você pode ler nosso guia sobre como rastrear e reduzir o abandono de formulários no WordPress.

Perguntas Frequentes Sobre Preenchimento Automático para Campos de Endereço em Formulários WordPress

Como funciona o autocompletar de endereço?

Seu formulário se conecta a um serviço de localização como Google Places ou Mapbox. Conforme os usuários digitam, ele mostra sugestões de endereços correspondentes. Quando eles escolhem uma, os campos (rua, cidade, CEP, etc.) são preenchidos automaticamente.

Funcionará com meu tema WordPress?

Geralmente, sim. O autocompletar funciona com a maioria dos temas WordPress modernos, mas às vezes, scripts personalizados ou temas muito modificados podem causar conflitos.

Quais plugins WordPress suportam autocompletar de endereço?

Vários plugins de formulário oferecem isso, geralmente por meio de add-ons ou integrações. WPForms com o Addon de Geolocation é uma das melhores opções.

E se as sugestões não aparecerem?

Algumas causas comuns incluem uma chave de API ausente ou incorreta, erros de JavaScript ou conflitos de tema, e restrições de API (como configurações de domínio incorretas).

Mais Guias para Usar Formulários WordPress

Espero que este artigo tenha ajudado você a aprender como adicionar autocompletar para campos de endereço no WordPress.

Se você achou isso útil, talvez também queira ver nossos outros guias úteis sobre:

• Como Criar Formulários WordPress com Campos de Seleção (Dropdown)
• Como Criar Formulários Multilíngues no WordPress
• Como rastrear a jornada do usuário em formulários de leads do WordPress
• Dicas de Especialistas para Criar Formulários Mais Interativos e Aumentar Conversões
• Maneiras de Usar Lógica Condicional em Formulários WordPress (Principais Casos de Uso)
• Como Criar um Formulário Airtable Personalizado no WordPress
• Guia Definitivo para Usar Formulários WordPress

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