Resumo de IA
Campos de endereço são frustrantes. Os usuários digitam incorretamente nomes de ruas, esquecem códigos postais, inserem endereços incompletos ou abandonam formulários inteiramente porque digitar endereços completos é tedioso.
O autocompletar do Google Maps resolve isso sugerindo endereços completos e validados enquanto os usuários digitam. Após digitar 3-4 caracteres, os usuários veem um menu suspenso de endereços reais para selecionar.
Quer configurar isso em seu formulário para eliminar erros de digitação e acelerar o preenchimento do formulário? Neste guia, fornecerei instruções passo a passo sobre como criar um formulário de endereço com autocompletar do Google Maps.
Como Criar um Formulário de Endereço com Autocompletar do Google Maps?
Com o WPForms Pro e o addon Geolocation, você pode adicionar recursos de mapa aos seus formulários em pouco tempo. Siga estas instruções fáceis e passo a passo para começar:
- Passo 1: Instale o Plugin WPForms
- Passo 2: Habilitar o Addon Geolocation
- Passo 3: Configurar as Definições de Geolocation
- Passo 4: Criar seu Formulário de Endereço com Autocompletar
- Passo 5: Adicionar o Campo de Endereço ao seu Formulário
- Passo 7: Publicar seu Formulário de Endereço com Autocompletar do Google Maps
- Em seguida, Melhore seus Formulários com Mapas Interativos
Passo 1: Instale o Plugin WPForms
A primeira coisa que você precisará fazer é instalar o plugin WPForms, que é um construtor de formulários poderoso que facilita a criação de formulários de contato, formulários de registro e muito mais.
Ele tem mais de 2.100+ modelos de formulários WordPress que você pode usar e vem com ferramentas de geolocalização integradas para realmente facilitar a exibição de mapas em seus formulários.
Para adicionar mapas aos seus formulários de contato, você precisará do WPForms Pro, que inclui o addon Geolocation e todos os recursos de mapa que abordaremos neste tutorial.
Se você é novo no WordPress ou está enfrentando alguma dificuldade durante o processo de instalação do plugin, pode conferir o guia passo a passo sobre como instalar um plugin do WordPress.
Atualize para o WPForms Pro Agora! :)
Passo 2: Habilitar o Addon Geolocation
Agora que o WPForms Pro está instalado, você precisa ativar o addon Geolocation. É isso que alimenta todos os recursos de mapa em seus formulários de contato.
Para ativar o addon, vá para o seu painel do WordPress e clique em WPForms » Addons.
Na barra de pesquisa, digite Geolocation. Em seguida, clique no botão Instalar Addon para alterar seu status para Ativo.
O addon é instalado automaticamente. Não é necessário baixar arquivos ou configurar nada ainda. Em seguida, você o conectará ao Google Maps.
Passo 3: Configurar as Definições de Geolocation
Depois de habilitar o addon Geolocation, você precisa configurar suas definições. Para fazer isso, clique em WPForms » Configurações.
Na página de configurações do WPForms, clique em Geolocation nas abas na parte superior para acessar suas configurações.
Aqui, você verá diferentes opções para configurar o addon Geolocation com base em diferentes necessidades e requisitos:
- Provedor de Lugares: Você tem a opção de escolher qual provedor deseja receber suas informações de geolocalização. Aqui selecionaremos a API do Google Places como nosso provedor de lugares.
- Localização Atual: Habilite esta opção para permitir que a localização do seu usuário seja pré-preenchida no formulário.
- Google Places API: Para habilitar o recurso de preenchimento automático de endereços e exibir o Google Maps em seus formulários, você precisará gerar uma Chave de API e conectá-la ao WPForms.
Vamos ver o processo completo de geração de uma chave de API.
Gerar uma Chave de API do Google Developer Console
Vá para o Google Developer Console e selecione o projeto no menu Selecionar um Projeto na parte superior.
Se você não tiver nenhum projeto criado anteriormente, clique em Novo Projeto para criar um novo.
Depois de criar com sucesso um novo projeto, clique em Ativar APIs e Serviços.
Isso abrirá a Biblioteca de API do Google.
A partir daqui, você precisará ativar três APIs:
- Geocoding API
- Maps JavaScript API
- Places API
Esta biblioteca de API oferece uma opção de pesquisa fácil; digite o nome da API na caixa de pesquisa, vá para sua API e clique no botão ATIVAR.
Depois de ativar todas as suas APIs, volte ao painel do Google Console e navegue até a guia Credenciais.
Clique no botão Criar Credenciais na parte superior e selecione a opção Chave de API.
Uma janela pop-up com uma chave de API será aberta. Clique na opção RESTRINGIR CHAVE no canto inferior direito da janela pop-up.
Uma nova página será aberta, onde você deverá configurar as seguintes definições:
- Restrições de Aplicação: A partir daqui, você pode selecionar quais sites, endereços IP ou aplicativos podem usar a chave de API. Aqui você precisará escolher a opção HTTP Referrers para permitir que sua Chave seja usada em seus sites.
- Restrições de Site: Depois de selecionar os HTTP Referrers, uma nova opção será exibida, restrições de site. Aqui você precisa adicionar o nome de domínio do seu site para restringir a Chave de API a ser usada apenas pelos sites especificados.
- Restrições de API: Após restringir sua Chave por Aplicação e Site, você precisará restringir sua Chave por API. Para fazer isso, clique na opção Restringir chave.
Isso abrirá um menu suspenso com a opção de várias APIs. Selecione as seguintes APIs no menu suspenso:
- Places API
- Maps JavaScript API
- Geocoding API
Depois de terminar de selecionar as APIs, clique no botão Salvar para salvar suas configurações, o que o redirecionará de volta para a página Credenciais. Copie sua Chave da página e volte para as configurações do WPForms.
Nas configurações do WPForms, cole isso no campo Chave de API sob a Google Places API e clique no botão Salvar Configurações.
Suas configurações de Geolocalização agora estão configuradas. Em seguida, você criará um formulário com o preenchimento automático de endereço ativado.
Passo 4: Criar seu Formulário de Endereço com Autocompletar
Com o addon de Geolocalização configurado, você está pronto para construir seu formulário de contato. Isso leva cerca de 5 minutos. Vá para WPForms » Adicionar Novo no seu painel do WordPress para abrir o construtor de formulários.
Dê um nome ao seu formulário no campo Nome do Formulário. Algo como “Entre em Contato” funciona bem. Você verá algumas opções aqui. Se quiser economizar tempo, pode escolher entre nossos mais de 2.100 modelos de formulários WordPress.
Recomendo escolher o Modelo de Formulário de Contato Simples. Isso lhe dá um formulário de contato pronto com os campos essenciais já adicionados.
O modelo inclui um campo Nome, um campo Email e um campo Comentário ou Mensagem. Você pode personalizar esses campos, adicionar novos ou remover os que não precisar.
Agora, provavelmente há algumas outras configurações de formulário que você pode querer configurar, como notificações e confirmações. Se for o caso (e eu recomendo muito isso), confira nosso guia detalhado sobre como criar seu primeiro formulário.
Dica Profissional
Outra opção se você não quiser configurar manualmente cada campo, mas tiver requisitos personalizados, é deixar o Construtor de Formulários com IA do WPForms cuidar disso para você.
Simplesmente passe o mouse sobre o botão roxo Gerar com IA e clique em Gerar Formulário. Você será direcionado para a tela do construtor de formulários com IA. É aqui que você descreve que tipo de formulário deseja.
Você pode digitar seu próprio prompt ou escolher entre as sugestões à esquerda. Assim que você gerar, a IA leva alguns segundos para construir seu formulário.
Experimente o Construtor de IA do WPForms! :)
Passo 5: Adicionar o Campo de Endereço ao seu Formulário
Agora que temos nosso formulário pronto, só precisamos adicionar o Campo de Endereço. Na esquerda, arraste o Campo de Endereço da seção Campos Elegantes e coloque-o no seu formulário.
O campo de Endereço já inclui um texto de rótulo e sub-rótulo para sua facilidade. Você tem a flexibilidade de personalizar o texto do rótulo, selecionar o esquema de endereço, personalizar o tamanho do campo e ocultar rótulos e sub-rótulos.
Agora você ativará a funcionalidade de preenchimento automático para o seu campo de Endereço. Este é um simples interruptor que conecta o campo à sua API do Google Places.
Clique no campo Endereço no seu formulário, depois clique na aba Avançado nas configurações do campo à esquerda.
Role para baixo até ver a opção Ativar Preenchimento Automático de Endereço. Ative esta configuração para habilitar o preenchimento automático de endereço em seu formulário.
Permitir isso abrirá mais um recurso: Exibir Mapa. Se você quiser exibir um mapa em seu formulário de contato, ative esta opção também.
Use o menu suspenso para especificar se você deseja que o mapa apareça acima ou abaixo dos sub-campos de Endereço.
Clique no botão Salvar no topo. Agora que seu formulário de endereço com preenchimento automático está pronto, é hora de adicioná-lo ao seu site.
Passo 7: Publicar seu Formulário de Endereço com Autocompletar do Google Maps
O WPForms permite que você adicione seu formulário em vários locais, incluindo páginas, posts de blog e até mesmo widgets de barra lateral do seu site.
Antes de incorporar seu formulário a uma página, se desejar, você pode verificar como seu formulário ficará na página ativa. Para pré-visualizar seu formulário, clique no botão Pré-visualizar no topo.
Se você estiver satisfeito com seu formulário de endereço com preenchimento automático do Google Maps, está pronto para adicioná-lo à sua página. Clique no ícone “+” e adicione o bloco WPForms do editor de blocos.
Em seguida, selecione seu formulário no menu suspenso no bloco. Neste caso, selecionarei o Formulário de Preenchimento Automático de Endereço que acabei de criar seguindo os passos acima.
Depois disso, tudo o que você precisa fazer é publicar a página e seu formulário ficará ativo e pronto para aceitar envios. Veja como o campo de Endereço com o mapa interativo fica em uma página publicada. Não é incrível?
Excelente trabalho! Você criou com sucesso um formulário de endereço com preenchimento automático do Google Maps. Confira este guia para mais detalhes sobre Endereços Linha 1 e 2.
Perguntas frequentes sobre como criar um formulário de endereço com preenchimento automático do Google Maps
O formulário de endereço com preenchimento automático é um tópico popular de interesse entre nossos leitores. Aqui estão as respostas para algumas perguntas comuns sobre ele:
O que é preenchimento automático de endereço em um formulário?
O preenchimento automático de endereço é um recurso que sugere endereços completos e validados enquanto os usuários digitam em um campo de formulário. Após digitar 3-4 caracteres, um menu suspenso aparece com endereços correspondentes do banco de dados do Google.
Os usuários selecionam o endereço em vez de digitar cada campo manualmente. Isso elimina erros de digitação, acelera o preenchimento (especialmente no celular) e garante que os endereços sejam precisos e entregáveis.
Como adiciono um endereço com preenchimento automático ao meu formulário do WordPress?
Instale o WPForms Pro ou superior, ative o addon Geolocation, gere uma chave gratuita da API do Google Places no Google Cloud Console, cole a chave da API em WPForms » Configurações » Geolocation.
Depois disso, tudo o que você precisa fazer é criar um formulário, adicionar um campo de Endereço e ativar "Ativar preenchimento automático de endereço" nas configurações avançadas do campo.
A configuração completa leva de 20 a 30 minutos e é abordada passo a passo neste guia. Uma vez configurado, o preenchimento automático funciona em qualquer formulário com um campo de Endereço.
O preenchimento automático de endereço do WPForms funciona com o Google Maps?
Sim, o WPForms usa a API do Google Places para preenchimento automático de endereços, que é a mesma tecnologia que alimenta a pesquisa de endereços do Google Maps.
Você precisa ativar três APIs do Google (Places API, Maps JavaScript API e Geocoding API) para funcionalidade completa.
O WPForms também pode exibir um Google Map interativo em seu formulário mostrando a localização do endereço selecionado; ative isso nas configurações avançadas do campo de Endereço em "Exibir Mapa".
O preenchimento automático de endereços do Google Maps é gratuito?
O Google oferece 28.000 solicitações gratuitas de preenchimento automático de endereços por mês. Depois disso, você paga US$ 2,83 por 1.000 solicitações. A maioria dos sites pequenos e médios permanece dentro do limite gratuito.
Uma "solicitação" conta cada vez que um usuário digita em seu campo de endereço e as sugestões aparecem (não por pressionamento de tecla, mas por sessão de pesquisa). Monitore o uso no seu Google Cloud Console.
Se você exceder os limites com frequência, considere atualizar seu plano do Google Cloud ou restringir o preenchimento automático a formulários essenciais.
Qual é a diferença entre a API do Google Places e o Mapbox para preenchimento automático?
A API do Google Places oferece cobertura de endereços mundial mais abrangente (mais de 200 países) e melhor validação de endereços, mas tem um limite gratuito de 28.000 por mês.
O Mapbox tem solicitações ilimitadas gratuitas de preenchimento automático, mas dados de endereço menos detalhados em áreas rurais e algumas regiões internacionais.
O WPForms suporta ambos. Escolha o Google Places para precisão ou o Mapbox para uso ilimitado. Você pode alternar os provedores em WPForms » Configurações » Geolocation sem reconstruir seus formulários.
Posso usar o preenchimento automático de endereço nos formulários de checkout do WooCommerce?
O preenchimento automático de endereços do WPForms funciona apenas em formulários criados com o WPForms, não no checkout nativo do WooCommerce. No entanto, você pode criar um formulário de checkout personalizado usando o WPForms com integração de pagamento e preenchimento automático de endereços.
Alternativamente, instale um plugin de preenchimento automático de endereços específico para WooCommerce que se integre diretamente aos campos de checkout do WooCommerce.
Se você precisa especificamente de integração com o WooCommerce, verifique o diretório de plugins do WooCommerce em busca de plugins de “preenchimento automático de endereços” ou “Google Places” projetados para o checkout.
Qual é o melhor plugin do Google Maps para WordPress?
O WPForms Pro é um dos melhores plugins de mapa para WordPress. Ele inclui um poderoso addon Geolocation que vem com um recurso de preenchimento automático de endereços pré-construído que funciona com Google Maps ou Mapbox.
Esse recurso localiza automaticamente e sugere as localizações dos seus usuários enquanto eles preenchem e digitam seus endereços.
Além disso, com o addon Geolocation, você pode adicionar um mapa ao seu formulário de contato do WordPress e permitir que seus usuários adicionem uma localização ajustando o pino no mapa.
O que acontece com meu formulário se eu exceder o nível gratuito do Google?
Se você exceder 28.000 solicitações de preenchimento automático por mês, o Google cobrará de sua conta Cloud (se o faturamento estiver ativado) ou parará de fornecer sugestões de preenchimento automático (se o faturamento não estiver ativado).
Seu formulário continua funcionando e o campo de Endereço se torna apenas uma entrada de texto normal, sem sugestões. Os usuários ainda podem digitar endereços manualmente.
Monitore seu uso no Google Cloud Console e defina alertas de faturamento para evitar surpresas. A maioria dos sites permanece bem abaixo do limite gratuito, a menos que tenham tráfego muito alto.
Em seguida, Melhore seus Formulários com Mapas Interativos
Excelente trabalho! Você criou com sucesso um formulário de endereço com preenchimento automático do Google Maps que melhora a experiência do usuário e garante dados de endereço precisos. Agora que você tem o preenchimento automático de endereços funcionando, leve seus formulários para o próximo nível com o Campo de Mapa do WPForms.
Esse recurso permite incorporar mapas interativos diretamente em seus formulários, onde os usuários podem clicar para selecionar locais, visualizar vários locais de negócios com marcadores personalizados ou escolher sua área de serviço preferida em um mapa visual. O Campo de Mapa é perfeito para:
- Formulários de reserva de vários locais: Permita que os clientes vejam todos os locais em um mapa e selecionem sua filial preferida.
- Seleção de área de serviço: Exiba suas zonas de cobertura visualmente para que os clientes saibam se você atende à área deles.
- Formulários de contato com locais de escritórios: Ajude os visitantes a encontrar o escritório mais próximo antes mesmo de enviarem.
- Registro de eventos: Mostre os locais dos eventos com direções integradas ao formulário.
Confira estes guias para explorar o que é possível:
- Como exibir um mapa com seu formulário de contato do WordPress
- Como Criar um Formulário de Reserva WordPress para Múltiplos Locais
Quer rastrear quais formulários convertem melhor? Saiba como rastrear uma fonte de leads no WordPress para ver quais fontes de tráfego trazem mais envios de formulários.
Crie seu formulário WordPress agora
Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
Isso NÃO funciona, retorna um erro no campo!
Olá Nathan! Sinto muito que o Autocompletar de Endereço do seu formulário esteja apresentando erros. Você poderia, por favor, entrar em contato conosco com mais detalhes sobre o problema que você está vendo para que possamos ajudá-lo a solucionar?
Aguardo seu retorno!
Boa Tarde,
O add-on Google Maps funciona bem, ótimo trabalho!
Mas existe alguma forma de salvar a coordenada de latitude e longitude dentro do endereço selecionado?
Obrigado desde já!
Notei que isso captura o endereço em um único campo, o que dificulta a análise em campos padrão de endereço, cidade, estado e CEP. Há alguma maneira de fazer isso?
Olá Adam,
Para fazer o que você descreveu, você pode criar um campo de endereço personalizado no formulário usando campos de Texto de Linha Única e um campo de Lista Suspensa.
Você pode adicionar opções rapidamente em um campo de Lista Suspensa usando nossa opção Adicionar em Massa no construtor de formulários. Para fazer isso, clique no campo de Lista Suspensa e no painel de Opções de Campo à esquerda, clique em Adicionar em Massa. Na nova seção que aparece, selecione Mostrar Predefinições. Você pode então selecionar em nossa lista de escolhas predefinidas. Aqui está um pequeno screencast do processo que adiciona Países como exemplo.
Caso ajude, também temos um tutorial detalhado sobre isso.
Para o subcampo de CEP, você pode usar o campo Números, ou exigir que os usuários só possam adicionar números a um campo de Texto de Linha Única usando a máscara de entrada. Temos mais detalhes em nosso tutorial aqui.
Se desejar, você também pode formatar seu formulário para ter várias colunas. Temos um ótimo tutorial sobre como fazer isso aqui.
Espero que ajude! 🙂
Notei que o e-mail de notificação não inclui dados do mapa – há alguma maneira de incluí-los quando uma consulta é enviada através do formulário de contato?
Olá Rob,
Para configurar isso, abra o construtor de formulários e vá para Configurações » Notificações. Em seguida, role até a seção Mensagem de E-mail e adicione a Smart Tag
{entry_geolocation}.Caso ajude, aqui está um guia para incluir os detalhes de Geolocalização em seus e-mails.
Espero que ajude! 🙂
Existe alguma maneira de restringir apenas a uma cidade ou estado/província em vez de mostrar endereços em todo o mundo? Obrigado! O add-on funciona muito bem, caso contrário :)
Olá Rodney – Atualmente, não temos o recurso no add-on de Geolocalização para restringir o preenchimento automático de endereços com base no país ou local. Concordo que seria um ótimo recurso, e o adicionarei ao nosso rastreador de solicitações de recursos para que esteja no radar de nossos desenvolvedores.
Olá, notei que isso só funciona para endereços. Preciso de uma maneira de habilitar o preenchimento automático de aeroportos, hotéis, etc. Atualmente, quando o usuário digita algo como “aeroporto viena”, não há nada para escolher. Existe alguma maneira de habilitá-lo? Pensei que seria ótimo adicionar ao meu site de táxi, mas isso apenas confunde as pessoas e elas desistem durante o envio do formulário agora.
Olá Matej,
Para habilitar o preenchimento automático de locais como aeroportos e hotéis no WPForms, você pode usar o recurso de Autocompletar de Endereços fornecido pelo complemento Geolocation. Esse recurso utiliza serviços como Google Places ou Mapbox, que podem autocompletar uma ampla gama de tipos de locais — incluindo endereços, aeroportos, hotéis e outros pontos de interesse — dependendo dos dados disponíveis do provedor de mapas que você conectar.
Espero que ajude!