Resumo de IA
Os campos de endereço são frustrantes. Os utilizadores escrevem mal os nomes das ruas, esquecem-se dos códigos postais, introduzem endereços incompletos ou abandonam os formulários por completo porque digitar endereços completos é tedioso.
A funcionalidade de preenchimento automático do Google Maps resolve isto sugerindo endereços completos e validados à medida que os utilizadores digitam. Após digitar 3-4 caracteres, os utilizadores veem um menu suspenso de endereços reais para selecionar.
Quer configurar isto no seu formulário para eliminar erros de digitação e acelerar o preenchimento do formulário? Neste guia, apresentarei instruções passo a passo sobre como criar um formulário de endereço com preenchimento automático do Google Maps.
Como Criar um Formulário de Endereço com Preenchimento Automático do Google Maps?
Com o WPForms Pro e o complemento Geolocation, pode adicionar a conclusão automática de endereços do Google aos seus formulários WordPress em minutos. Siga estas instruções passo a passo para começar:
- Passo 1: Instalar o Plugin WPForms
- Passo 2: Ativar o Complemento Geolocation
- Passo 3: Configurar as Definições de Geolocation
- Passo 4: Criar o Seu Formulário de Endereço com Preenchimento Automático
- Passo 5: Adicionar o Campo de Endereço ao Seu Formulário
- Passo 6: Publique o seu formulário de endereço com conclusão automática do Google Maps
Passo 1: Instalar o Plugin WPForms
A primeira coisa que terá de fazer é instalar o plugin WPForms, que é um construtor de formulários poderoso que facilita a criação de formulários de contacto, formulários de registo e muito mais.
Tem mais de 2.100+ modelos de formulários WordPress que pode usar e vem com ferramentas de geolocalização integradas para facilitar muito a exibição de mapas nos seus formulários.
Para adicionar mapas aos seus formulários de contacto, precisará do WPForms Pro, que inclui o complemento Geolocation e todas as funcionalidades de mapa que abordaremos neste tutorial.
Se é novo no WordPress ou está a enfrentar alguma dificuldade durante o processo de instalação do plugin, pode consultar o guia passo a passo sobre como instalar um plugin WordPress.
Atualize para o WPForms Pro Agora! :)
Passo 2: Ativar o Complemento Geolocation
Agora que o WPForms Pro está instalado, precisa de ativar o complemento Geolocation. É isto que potencia todas as funcionalidades de mapa nos seus formulários de contacto.
Para ativar o complemento, dirija-se ao seu painel WordPress e clique em WPForms » Addons.
Na barra de pesquisa, digite Geolocation. Em seguida, clique no botão Install Addon para alterar o seu estado para Active.
O complemento instala-se automaticamente. Não é necessário descarregar ficheiros nem configurar nada ainda. Em seguida, irá conectá-lo ao Google Maps.
Passo 3: Configurar as Definições de Geolocation
Depois de ativar o complemento Geolocation, precisa de configurar as suas definições. Para fazer isto, clique em WPForms » Settings.
Na página de definições do WPForms, clique em Geolocation nos separadores na parte superior para aceder às suas definições.
Aqui, verá diferentes opções para configurar o complemento Geolocation com base em diferentes necessidades e requisitos:
- Places Provider: Tem a opção de escolher qual o fornecedor de quem gostaria de receber as suas informações de geolocalização. Aqui selecionaremos a API Google Places como o nosso fornecedor de locais.
- Current Location: Ative esta opção para permitir que a localização do seu utilizador seja pré-preenchida no formulário.
- Google Places API: Para ativar a funcionalidade de preenchimento automático de moradas e exibir Google Maps nos seus formulários, terá de gerar uma chave de API e conectá-la com o WPForms.
Vamos ver o processo completo de geração de uma chave de API.
Gerar uma Chave de API a partir da Google Developer Console
Aceda à Google Developer Console e selecione o projeto no menu Selecionar um Projeto na parte superior.
Se não tiver nenhum projeto criado anteriormente, clique em Novo Projeto para criar um novo.
Assim que tiver criado com sucesso um novo projeto, clique em Ativar APIs e Serviços.
Isto abrirá uma Biblioteca de API do Google.
A partir daqui, terá de ativar 3 APIs:
- API Geocoding
- API JavaScript Maps
- API Places
Esta biblioteca de API fornece uma opção de pesquisa fácil; digite o nome da API na caixa de pesquisa, aceda à sua API e clique no botão ATIVAR.
Depois de ter ativado todas as suas APIs, volte ao seu painel da Google Console e navegue até ao separador Credenciais.
Clique no botão Criar Credenciais na parte superior e selecione a opção Chave de API.
Abrirá uma janela pop-up com uma chave de API. Clique na opção RESTRINGIR CHAVE no canto inferior direito da janela pop-up.
Abrirá uma nova página, onde terá de configurar as seguintes definições:
- Restrições da Aplicação: A partir daqui, pode selecionar quais os websites, endereços IP ou aplicações que podem usar a chave de API. Aqui terá de escolher a opção Referrers HTTP para permitir que a sua Chave seja usada nos seus websites.
- Restrições do Website: Depois de selecionar os Referrers HTTP, será exibida uma nova opção, restrições do website. Aqui precisa de adicionar o nome de domínio do seu website para restringir a Chave de API a ser usada apenas pelos websites especificados.
- Restrições da API: Após restringir a sua Chave por Aplicação e Website, terá de restringir a sua Chave por API. Para fazer isto, clique na opção Restringir chave.
Isto abrirá um menu suspenso com uma opção de múltiplas APIs. Selecione as seguintes APIs no menu suspenso:
- API Places
- API JavaScript Maps
- Geocoding API
Quando terminar de selecionar as APIs, clique no botão Guardar para guardar as suas definições, o que o redirecionará de volta para a página Credenciais. Copie a sua Chave da página e volte às suas definições do WPForms.
Nas suas definições do WPForms, cole isto no campo Chave de API em Google Places API e clique no botão Guardar Definições.
As suas definições de Geolocalização estão agora configuradas. Em seguida, criará um formulário com o preenchimento automático de moradas ativado.
Passo 4: Criar o Seu Formulário de Endereço com Preenchimento Automático
Com o suplemento de Geolocalização configurado, está pronto para construir o seu formulário de contacto. Isto demora cerca de 5 minutos. Aceda a WPForms » Adicionar Novo no seu painel WordPress para abrir o construtor de formulários.
Dê um nome ao seu formulário no campo Nomear Formulário. Algo como “Entrar em Contato” funciona bem. Verá aqui algumas opções. Se quiser poupar tempo, pode escolher entre os nossos mais de 2.100 modelos de formulários WordPress.
Recomendo escolher o Modelo de Formulário de Contato Simples. Isto dá-lhe um formulário de contato pronto a usar com os campos essenciais já adicionados.
O modelo inclui um campo Nome, um campo Email e um campo Comentário ou Mensagem. Pode personalizar estes campos, adicionar novos ou remover os que não necessita.
Agora, provavelmente há mais algumas configurações de formulário que pode querer configurar, como notificações e confirmações. Se for o caso (e recomendo vivamente), consulte o nosso guia detalhado sobre como criar o seu primeiro formulário.
Dica Pro
Outra opção, se não quiser configurar manualmente todos os campos mas tiver requisitos personalizados, é deixar o Construtor de Formulários IA do WPForms tratar disso por si.
Basta pairar o rato sobre o botão roxo Gerar com IA e clicar em Gerar Formulário. Irá para o ecrã do construtor de formulários IA. É aqui que descreve que tipo de formulário pretende.
Pode digitar o seu próprio prompt ou escolher entre as sugestões à esquerda. Assim que clicar em gerar, a IA demora alguns segundos a construir o 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 o nosso formulário pronto, só precisamos de adicionar o Campo de Endereço. À esquerda, arraste o Campo de Endereço da secçã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 conveniência. 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 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 no separador 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 no seu formulário.
Permitir isto abrirá mais uma funcionalidade: Exibir Mapa. Se quiser exibir um mapa no seu formulário de contato, ative esta opção também.
Use o menu suspenso para especificar se deseja que o mapa apareça acima ou abaixo dos sub-campos de Endereço.
Clique no botão Salvar no topo. Agora que o seu formulário de endereço com preenchimento automático está pronto, é hora de adicioná-lo ao seu site.
Passo 6: Publique o seu formulário de endereço com conclusão automática do Google Maps
O WPForms permite adicionar o seu formulário em vários locais, incluindo páginas, publicações de blog e até mesmo widgets de barra lateral do seu site.
Antes de incorporar o seu formulário numa página, se desejar, pode verificar como o seu formulário ficará na página ativa. Para pré-visualizar o seu formulário, clique no botão Pré-visualizar no topo.
Se estiver satisfeito com o 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 o 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 tem de fazer é publicar a página e o seu formulário ficará ativo e pronto para aceitar envios. Veja como o campo de Endereço com o mapa interativo fica numa página publicada. Não é incrível?
Excelente trabalho! Criou com sucesso um formulário de endereço com preenchimento automático do Google Maps. Consulte este guia para mais detalhes sobre as Linhas de Endereço 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 os nossos leitores. Aqui estão as respostas a algumas perguntas comuns sobre o assunto:
O que é um endereço com preenchimento automático num formulário?
O preenchimento automático de endereços é uma funcionalidade que sugere endereços completos e validados à medida que os utilizadores digitam num campo do formulário. Após a introdução de 3-4 caracteres, aparece uma lista suspensa com endereços correspondentes da base de dados do Google.
Os utilizadores selecionam o seu endereço em vez de digitar manualmente cada campo. Isto elimina erros de digitação, acelera o preenchimento (especialmente em dispositivos móveis) e garante que os endereços são precisos e entregues.
Como adiciono um endereço com preenchimento automático ao meu formulário WordPress?
Instale o WPForms Pro ou superior, ative o addon Geolocation, gere uma chave API gratuita do Google Places a partir da Google Cloud Console, cole a chave API em WPForms » Definições » Geolocation.
Depois disso, tudo o que precisa de fazer é criar um formulário, adicionar um campo de Endereço e ativar "Ativar preenchimento automático de endereços" nas definições Avançadas do campo.
A configuração completa demora 20-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ços do WPForms funciona com o Google Maps?
Sim, o WPForms utiliza a API do Google Places para o preenchimento automático de endereços, que é a mesma tecnologia que alimenta a pesquisa de endereços do Google Maps.
Precisa de ativar três APIs do Google (Places API, Maps JavaScript API e Geocoding API) para total funcionalidade.
O WPForms também pode exibir um Google Map interativo no seu formulário mostrando a localização do endereço selecionado; ative isto nas definiçõ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 pedidos gratuitos de preenchimento automático de endereços por mês. Depois disso, paga 2,83 USD por cada 1.000 pedidos. A maioria dos sites pequenos e médios permanece dentro do nível gratuito.
Um "pedido" conta cada vez que um utilizador digita no seu campo de endereço e aparecem sugestões (não por cada tecla pressionada, mas por sessão de pesquisa). Monitorize o uso na sua Google Cloud Console.
Se exceder os limites com frequência, considere atualizar o seu plano 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 uma cobertura de endereços mundial mais abrangente (mais de 200 países) e melhor validação de endereços, mas tem um nível gratuito de 28.000/mês.
O Mapbox tem pedidos ilimitados gratuitos 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. Pode mudar de fornecedor em WPForms » Definições » Geolocation sem reconstruir os seus formulários.
Posso usar o preenchimento automático de endereços nos formulários de checkout do WooCommerce?
A funcionalidade de preenchimento automático de moradas da WPForms funciona apenas em formulários criados com a WPForms, não no checkout nativo do WooCommerce. No entanto, pode criar um formulário de checkout personalizado usando a WPForms com integração de pagamentos e preenchimento automático de moradas.
Alternativamente, instale um plugin de preenchimento automático de moradas específico para WooCommerce que se integre diretamente nos campos de checkout do WooCommerce.
Se necessitar especificamente de integração com o WooCommerce, consulte o diretório de plugins do WooCommerce para plugins de “preenchimento automático de moradas” ou “Google Places” concebidos para o checkout.
Qual é o melhor plugin do Google Maps para WordPress?
O WPForms Pro é um dos melhores plugins de mapas para WordPress. Inclui um poderoso complemento Geolocation que vem com uma funcionalidade de preenchimento automático de moradas pré-construída que funciona com Google Maps ou Mapbox.
Esta funcionalidade localiza automaticamente e sugere as localizações dos seus utilizadores enquanto estes preenchem e digitam as suas moradas.
Além disso, com o complemento Geolocation, pode adicionar um mapa ao seu formulário de contacto do WordPress e permitir que os seus utilizadores adicionem uma localização ajustando o marcador no mapa.
O que acontece ao meu formulário se exceder o nível gratuito do Google?
Se exceder 28.000 pedidos de preenchimento automático por mês, o Google cobra a sua conta Cloud (se o faturamento estiver ativado) ou para de fornecer sugestões de preenchimento automático (se o faturamento não estiver ativado).
O seu formulário continua a funcionar e o campo de Morada torna-se apenas um campo de texto normal sem sugestões. Os utilizadores ainda podem digitar moradas manualmente.
Monitorize a sua utilização na 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 elevado.
Em seguida, Melhore os Seus Formulários com Mapas Interativos
Excelente trabalho! Criou com sucesso um formulário de moradas com preenchimento automático do Google Maps que melhora a experiência do utilizador e garante dados de morada precisos. Agora que tem o preenchimento automático de moradas a funcionar, leve os seus formulários para o próximo nível com o Campo de Mapa da WPForms.
Esta funcionalidade permite-lhe incorporar mapas interativos diretamente nos seus formulários, onde os utilizadores podem clicar para selecionar localizações, ver múltiplas localizações de negócios com marcadores personalizados ou escolher a sua área de serviço preferida a partir de um mapa visual. O Campo de Mapa é perfeito para:
- Formulários de reserva multilocais: Permita que os clientes vejam todas as localizações num único mapa e selecionem a sua filial preferida.
- Seleção de área de serviço: Exiba as suas zonas de cobertura visualmente para que os clientes saibam se você atende à sua área.
- Formulários de contacto com localizações de escritórios: Ajude os visitantes a encontrar o escritório mais próximo antes mesmo de enviarem o formulário.
- Registo de eventos: Mostre as localizações dos locais com direções integradas no formulário.
Consulte estes guias para explorar o que é possível:
- Como Exibir um Mapa com o Seu Formulário de Contacto WordPress
- Como Criar um Formulário de Reserva WordPress para Múltiplas Localizações
Quer acompanhar quais formulários convertem melhor? Saiba como rastrear uma fonte de leads no WordPress para ver quais fontes de tráfego lhe trazem mais envios de formulários.
Crie o Seu Formulário WordPress Agora
Pronto para construir o seu formulário? Comece hoje com o plugin construtor de formulários WordPress mais fácil. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo o ajudou, por favor siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
Isto NÃO funciona, retorna erro no campo!
Olá Nathan! Lamento saber que a Autocompletação de Endereços do seu formulário está a apresentar erros. Poderia, por favor, contactar-nos com mais detalhes sobre o problema que está a ver para que possamos ajudá-lo a resolver?
Aguardo o seu contacto!
Boa Tarde,
O add-on Google Maps funciona bem, ótimo trabalho!
Mas existe alguma forma de guardar a coordenada de latitude e longitude dentro do endereço selecionado?
Obrigado desde já!
Notei que isto captura o endereço num único campo, o que torna difícil a análise em campos padrão de endereço, cidade, estado, código postal. Existe alguma forma de fazer isto?
Olá Adam,
Para fazer o que descreveu, pode criar um campo de endereço personalizado no formulário usando campos de Texto de Linha Única e um campo de Lista Suspensa.
Pode adicionar opções rapidamente num campo de Lista Suspensa usando a nossa opção Adicionar em Massa no construtor de formulários. Para fazer isto, clique no campo de Lista Suspensa e no painel de Opções de Campo esquerdo, clique em Adicionar em Massa. Na nova secção que aparece, selecione Mostrar Predefinições. Pode então selecionar a partir da nossa lista de escolhas predefinidas. Aqui está um curto screencast do processo que adiciona Países como exemplo.
Caso ajude, temos também um tutorial detalhado sobre isso.
Para o subcampo de Código Postal pode usar o campo de Números, ou exigir que os utilizadores só possam adicionar números a um campo de Texto de Linha Única usando o método de máscara de entrada. Temos mais detalhes no nosso tutorial aqui.
Se desejar, também pode formatar o seu formulário para ter várias colunas. Temos um ótimo tutorial sobre como fazer isso aqui.
Espero que isto ajude! 🙂
Notei que o e-mail de notificação não inclui dados do mapa – existe alguma forma de incluir isto quando uma consulta é submetida através do formulário de contacto?
Olá Rob,
Para configurar isto, abra o construtor de formulários e vá a Definições » Notificações. Em seguida, navegue até à secção Mensagem de E-mail e adicione a Tag Inteligente
{entry_geolocation}.Caso ajude, aqui está um guia para incluir os detalhes de Geolocalização nos seus e-mails.
Espero que isto ajude! 🙂
Existe alguma forma 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 bem caso contrário 🙂
Olá Rodney – Atualmente não temos a funcionalidade no add-on de Geolocalização para restringir a autocompletação de endereços com base no país ou localização. Concordo que seria uma ótima funcionalidade e irei adicioná-la ao nosso rastreador de pedidos de funcionalidades para que esteja no radar dos nossos programadores.
Olá, notei que isto só funciona para endereços. Preciso de uma forma de ativar aeroportos, hotéis, etc. para autocompletar. Atualmente, quando o utilizador escreve algo como "aeroporto viena" não há nada para escolher. Existe alguma forma de o ativar? Pensei que seria ótimo adicionar ao meu site de táxis, mas apenas confunde as pessoas e elas desistem durante o envio do formulário agora.
Olá Matej,
Para ativar o preenchimento automático de locais como aeroportos e hotéis no WPForms, pode utilizar a funcionalidade de Autocompletar Moradas fornecida pelo complemento Geolocation. Esta funcionalidade utiliza serviços como Google Places ou Mapbox, que podem autocompletar uma vasta gama de tipos de locais — incluindo moradas, aeroportos, hotéis e outros pontos de interesse — dependendo dos dados disponíveis do fornecedor de mapas com que se ligar.
Espero que ajude!