Resumo da IA
Os campos de endereço são frustrantes. Os utilizadores escrevem mal os nomes das ruas, esquecem os códigos postais, introduzem endereços incompletos ou abandonam os formulários por completo porque é tedioso digitar endereços completos.
O preenchimento automático do Google Maps resolve isso sugerindo endereços completos e validados à medida que os utilizadores digitam. Após digitar 3-4 caracteres, os utilizadores veem uma lista suspensa de endereços reais para selecionar.
Quer configurar isso no 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 preenchimento automático do Google Maps.
Como faço para criar um formulário de endereço de preenchimento automático do Google Maps?
Com o WPForms Pro e o complemento Geolocation, pode adicionar funcionalidades de mapa aos seus formulários num instante. Siga estas instruções fáceis e passo a passo para começar:
- Passo 1: Instalar o plugin WPForms
- Passo 2: Ativar o complemento de geolocalização
- Passo 3: Configurar as definições de geolocalização
- Passo 4: Crie o seu formulário de endereço com preenchimento automático
- Passo 5: Adicione o campo Endereço ao seu formulário
- Passo 7: Publique o seu formulário de endereço com preenchimento automático do Google Maps
- Em seguida, melhore os seus formulários com mapas interativos
Passo 1: Instalar o plugin WPForms
A primeira coisa que precisa fazer é instalar o plugin WPForms, que é um poderoso criador de formulários que facilita a criação de formulários de contacto, formulários de registo e muito mais.
Possui mais de 2.100 modelos de formulários WordPress que pode utilizar e vem com ferramentas de geolocalização integradas para facilitar 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 Geolocalização e todos os recursos de mapa que abordaremos neste tutorial.
Se é novo no WordPress ou está a ter dificuldades durante o processo de instalação do plug-in, pode consultar o guia passo a passo sobre como instalar um plug-in do WordPress.
Atualize para o WPForms Pro agora! 🙂
Passo 2: Ativar o complemento de geolocalização
Agora que o WPForms Pro está instalado, precisa ativar o complemento Geolocalização. É ele que alimenta todos os recursos de mapa nos seus formulários de contacto.
Para ativar o addon, vá ao seu painel de controlo do WordPress e clique em WPForms " Addons.
Na barra de pesquisa, digite Geolocalização. Em seguida, clique no botão Instalar complemento para alterar o seu estado para Ativo.
O complemento é instalado 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 geolocalização
Uma vez ativado o addon Geolocation, é necessário configurar as suas definições. Para o fazer, clique em WPForms " Definições.
Na página de definições do WPForms, clique em Geolocalização nos separadores na parte superior para aceder às suas definições.
Aqui, verá diferentes opções para configurar a extensão Geolocation com base em diferentes necessidades e requisitos:
- Fornecedor de locais: Tem a opção de escolher o fornecedor que gostaria de receber as informações de geolocalização. Aqui, seleccionaremos a API do Google Places como o nosso fornecedor de locais.
- Localização atual: Active esta opção para permitir que a localização do utilizador seja pré-preenchida no formulário.
- API do Google Places: Para ativar a funcionalidade de preenchimento automático de endereços e apresentar o Google Maps nos seus formulários, terá de gerar uma chave de API e ligá-la ao WPForms.
Vamos ver o processo completo de geração de uma chave de API.
Gerar uma chave de API no Console do desenvolvedor do Google
Aceda à Consola de desenvolvimento do Google 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.
Depois de ter criado um novo projeto, clique em Ativar APIs e serviços.
Isto irá abrir uma biblioteca API do Google.
A partir daqui, terá de ativar três 3 APIs:
- API de geocodificação
- API JavaScript de mapas
- Locais API
Esta biblioteca API oferece uma opção de pesquisa fácil; escreva o nome da API na caixa de pesquisa, vá para a sua API e clique no botão Ativar.
Depois de ativar todas as APIs, volte ao painel de controlo da Consola do Google e navegue no separador Credenciais.
Clique no botão Criar credenciais na parte superior e selecione a opção Chave de API.
Será aberta uma janela pop-up com uma chave de API. Clique na opção RESTRICT KEY (chave rest rita) no canto inferior direito da janela pop-up.
Será aberta uma nova página, onde terá de configurar as seguintes definições:
- Restrições de aplicações: A partir daqui, pode selecionar quais os sites, endereços IP ou aplicações que podem utilizar a chave da API. Aqui terá de escolher a opção Referenciadores HTTP para permitir que a sua chave seja utilizada nos seus sítios Web.
- Restrições do site: Depois de selecionar os Referenciadores HTTP, será apresentada uma nova opção, restrições do Web site. Aqui tem de adicionar o nome de domínio do seu sítio Web para restringir a chave da API a ser utilizada apenas pelos sítios Web especificados.
- Restrições de API: Depois de restringir a chave por aplicativo e site, é necessário restringir a chave por API. Para isso, clique na opção Restringir chave.
Isso abrirá um menu suspenso com uma opção de várias APIs. Selecione as seguintes APIs no menu pendente:
- Locais API
- API JavaScript de mapas
- Geocodificação AP
Depois de selecionar as APIs, clique no botão Guardar para guardar as suas configurações, o que o redirecionará de volta para a página Credenciais. Copie a sua chave da página e volte às configurações do WPForms.
Nas definições do WPForms, cole esta informação no campo Chave da API na API do Google Places e clique no botão Guardar definições.
As suas definições de geolocalização estão agora configuradas. Em seguida, irá criar um formulário com o preenchimento automático de endereços ativado.
Passo 4: Crie o seu formulário de endereço com preenchimento automático
Com o complemento de geolocalização configurado, está pronto para criar o seu formulário de contacto. Isso leva cerca de 5 minutos. Vá para WPForms » Adicionar novo no seu painel do WordPress para abrir o criador de formulários.
Dê um nome ao seu formulário no campo Nomeie o seu formulário. Algo como «Entre em contacto» funciona bem. Verá algumas opções aqui. Se quiser poupar tempo, pode escolher qualquer um dos nossos mais de 2100 modelos de formulários WordPress.
Recomendo escolher o modelo de formulário de contacto simples. Assim, terá um formulário de contacto pronto a usar, com os campos essenciais já adicionados.
O modelo inclui um campo Nome, um campo E-mail e um campo Comentário ou Mensagem. Pode personalizar esses campos, adicionar novos ou remover aqueles que não precisar.
Agora, provavelmente há mais algumas coisas que você pode querer configurar no formulário, como notificações e confirmações. Se for o caso (e eu recomendo muito isso), confira o nosso guia detalhado sobre como criar o seu primeiro formulário.
Dica profissional
Outra opção, se não quiser configurar manualmente todos os campos, mas tiver requisitos personalizados, é deixar que o WPForms AI Form Builder trate disso por si.
Basta passar o cursor sobre o botão roxo Gerar com IA e clicar em Gerar formulário. Será direcionado para o ecrã do criador de formulários com IA. É aqui que descreve o tipo de formulário que deseja.
Pode digitar o seu próprio prompt ou escolher entre as sugestões à esquerda. Depois de clicar em «Gerar», a IA leva alguns segundos para criar o seu formulário.
Experimente o WPForms AI Builder! 🙂
Passo 5: Adicione o campo 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 Endereço da secção Campos Extravagantes e coloque-o no seu formulário.
O campo Endereço já inclui um rótulo e um texto de subrótulo para sua conveniência. 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 subrótulos.
Agora, ative a funcionalidade de preenchimento automático para o campo Endereço. Trata-se de uma simples alternância que conecta o campo à API do Google Places.
Clique no campo Endereço no seu formulário e, em seguida, clique no separador Avançado nas definições do campo à esquerda.
Desloque-se para baixo até ver a opção Ativar preenchimento automático de endereços. Active esta definição para ativar o preenchimento automático de endereços no seu formulário.
Se o permitir, será aberta mais uma funcionalidade: Mostrar mapa. Se pretender apresentar um mapa no seu formulário de contacto, active também esta opção.
Utilize o menu pendente para especificar se pretende que o mapa apareça por cima ou por baixo dos subcampos Endereço.
Clique no botão Guardar na parte superior. Agora que o seu formulário de endereço de preenchimento automático está pronto, é altura de o adicionar ao seu sítio Web.
Passo 7: Publique o seu formulário de endereço com preenchimento automático do Google Maps
O WPForms permite-lhe adicionar o seu formulário em vários locais, incluindo páginas, publicações de blogues e até widgets da barra lateral do seu sítio Web.
Antes de incorporar o seu formulário numa página, se quiser, pode verificar o aspeto do seu formulário na página em direto. Para pré-visualizar o seu formulário, clique no botão Pré-visualizar na parte superior.
Se estiver satisfeito com o formulário de autocompletar endereços do Google Maps, está pronto para adicioná-lo à sua página. Clique no ícone «+» e adicione o bloco WPForms a partir do editor de blocos.
Em seguida, selecione o seu formulário no menu suspenso do bloco. Neste caso, selecionarei o Formulário de preenchimento automático de endereço que acabei de criar seguindo as etapas acima.
Depois disso, basta publicar a página e o seu formulário ficará ativo e pronto para receber envios. Veja como o campo Endereço com o mapa interativo fica numa página publicada. Não é incrível?
Excelente trabalho! Criou com êxito um formulário de endereço de preenchimento automático do Google Maps. Consulte este guia para obter mais detalhes sobre as Linhas de endereço 1 e 2.
Perguntas frequentes sobre Como criar um formulário de endereço de preenchimento automático do Google Maps
O preenchimento automático do formulário de endereço é um tópico de interesse popular entre os nossos leitores. Aqui estão as respostas a algumas perguntas comuns sobre o assunto:
O que é o endereço de preenchimento automático no formulário?
O preenchimento automático de endereços é um recurso que sugere endereços completos e validados à medida que os utilizadores digitam num campo do formulário. Após inserir 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 preencherem todos os campos manualmente. Isto elimina erros de digitação, acelera o preenchimento (especialmente em dispositivos móveis) e garante que os endereços sejam precisos e entregáveis.
Como adicionar um endereço de preenchimento automático ao meu formulário WordPress?
Instale o WPForms Pro ou superior, ative o complemento Geolocalização, gere uma chave API gratuita do Google Places a partir do Google Cloud Console, cole a chave API em WPForms » Definições » Geolocalização.
Depois disso, basta criar um formulário, adicionar um campo Endereço e ativar a opção «Ativar preenchimento automático de endereço» nas definições avançadas do campo.
A configuração completa leva de 20 a 30 minutos e é explicada passo a passo neste guia. Depois de configurado, o preenchimento automático funciona em qualquer formulário com um campo Endereço.
O WPForms funciona com o preenchimento automático do Google Maps?
Sim, o WPForms usa a API do Google Places para o preenchimento automático de endereços, que é a mesma tecnologia usada na pesquisa de endereços do Google Maps.
É necessário ativar três APIs do Google (API do Places, API do Maps JavaScript e API do Geocoding) para obter todas as funcionalidades.
O WPForms também pode exibir um mapa interativo do Google no seu formulário, mostrando a localização do endereço selecionado. Ative essa opção nas configurações avançadas do campo 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 cada 1.000 solicitações. A maioria dos sites de pequeno e médio porte permanece dentro do limite gratuito.
Uma «solicitação» é contabilizada cada vez que um utilizador digita no campo de endereço e as sugestões aparecem (não por tecla pressionada, mas por sessão de pesquisa). Monitore a utilização no Google Cloud Console.
Se exceder os limites com frequência, considere atualizar o seu plano do Google Cloud ou restringir o preenchimento automático apenas aos formulários essenciais.
Qual é a diferença entre a API do Google Places e o Mapbox para o preenchimento automático?
A API do Google Places oferece uma cobertura de endereços mais abrangente em todo o mundo (mais de 200 países) e uma melhor validação de endereços, mas tem um limite gratuito de 28.000 por mês.
O Mapbox tem pedidos de preenchimento automático gratuitos ilimitados, mas dados de endereços menos detalhados em áreas rurais e algumas regiões internacionais.
O WPForms suporta ambos. Escolha o Google Places para maior precisão ou o Mapbox para uso ilimitado. Pode alternar entre os fornecedores em WPForms » Configurações » Geolocalização sem precisar reconstruir os seus formulários.
Posso usar o preenchimento automático de endereços 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, pode criar um formulário de checkout personalizado usando o WPForms com integração de pagamento e preenchimento automático de endereços.
Em alternativa, instale um plugin de preenchimento automático de endereços específico para o WooCommerce que se integra diretamente com os campos de checkout do WooCommerce.
Se precisar especificamente da integração com o WooCommerce, verifique o diretório de plugins do WooCommerce para encontrar plugins de «autocompletar endereço» ou «Google Places» projetados para checkout.
Qual é o melhor plugin do Google Maps para WordPress?
O WPForms Pro é um dos melhores plugins de mapas para WordPress. Ele inclui um poderoso addon de Geolocalização que vem com um recurso de autocompletar endereço pré-construído que funciona com o Google Maps ou Mapbox.
Esta funcionalidade localiza e sugere automaticamente as localizações dos seus utilizadores à medida que estes preenchem e escrevem os seus endereços.
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 pin no mapa.
O que acontece com o meu formulário se eu exceder o limite gratuito do Google?
Se exceder 28 000 pedidos de preenchimento automático por mês, o Google cobrará a sua conta Cloud (se a faturação estiver ativada) ou deixará de fornecer sugestões de preenchimento automático (se a faturação não estiver ativada).
O seu formulário continua a funcionar e o campo Endereço passa a ser um campo de texto normal, sem sugestões. Os utilizadores ainda podem digitar endereços manualmente.
Monitorize a sua utilização no Google Cloud Console e defina alertas de faturação para evitar surpresas. A maioria dos sites permanece bem abaixo do limite gratuito, a menos que tenham um tráfego muito elevado.
Em seguida, melhore os seus formulários com mapas interativos
Excelente trabalho! Criou com sucesso um formulário de autocompletar endereços do Google Maps que melhora a experiência do utilizador e garante dados de endereço precisos. Agora que tem o autocompletar endereços a funcionar, leve os seus formulários para o próximo nível com o campo de mapa do WPForms.
Esta funcionalidade permite incorporar mapas interativos diretamente nos seus formulários, onde os utilizadores podem clicar para selecionar locais, visualizar vários locais comerciais com marcadores personalizados ou escolher a sua área de serviço preferida a partir de um mapa visual. O campo Mapa é ideal para:
- Formulários de reserva para vários locais: permita que os clientes vejam todos os locais num único mapa e selecionem a filial de sua preferência.
- Seleção da área de serviço: exiba as suas zonas de cobertura visualmente para que os clientes saibam se você atende a sua área.
- Formulários de contacto com localização dos escritórios: ajude os visitantes a encontrar o escritório mais próximo antes mesmo de enviarem o formulário.
- Inscrição no evento: Mostre os locais dos eventos com instruções integradas no formulário.
Confira estes guias para explorar o que é possível:
- Como exibir um mapa com o seu formulário de contacto do WordPress
- Como criar um formulário de reserva WordPress para vários locais
Quer acompanhar quais formulários convertem melhor? Aprenda a acompanhar 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 o seu formulário? Comece hoje mesmo com o plugin de criação de formulários mais fácil do WordPress. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de reembolso de 14 dias.
Se este artigo o ajudou, siga-nos no Facebook e no Twitter para mais tutoriais e guias gratuitos do WordPress.
Isto NÃO funciona, devolve um erro no campo!
Olá, Nathan! Lamento saber que o Preenchimento automático de endereço do formulário está a dar erros. Pode contactar-nos com mais detalhes sobre o problema que está a ver, para que o possamos ajudar a resolver o problema?
Aguardamos o seu contacto!
Boa tarde,
O add-on do Google Maps funciona bem, ótimo trabalho!
Mas existe alguma forma de guardar a coordenada lat e long dentro do endereço selecionado?
Obrigado desde já!
Reparei que isto capta o endereço num único campo, o que dificulta a análise nos campos normais de endereço, cidade, estado e código postal. Há alguma forma de o fazer?
Olá, Adam,
Para fazer o que descreveu, pode criar um campo de endereço personalizado no formulário utilizando campos de texto de linha única e um campo pendente.
Pode adicionar opções rapidamente num campo pendente utilizando a nossa opção Adicionar em massa no criador de formulários. Para o fazer, clique no campo Pendentes e, no painel esquerdo de Opções de Campo, 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 opções predefinidas. Aqui está um pequeno screencast do processo que adiciona países como exemplo.
Caso seja útil, também temos um tutorial pormenorizado sobre o assunto.
Para o subcampo Código postal, pode utilizar o campo Números ou exigir que os utilizadores só possam adicionar números a um campo de Texto de linha única utilizando o método de máscara de entrada. Temos mais pormenores no nosso tutorial aqui.
Se quiser, também pode formatar o seu formulário para ter várias colunas. Temos um excelente tutorial sobre como fazer isso aqui.
Espero que isto ajude! 🙂
Reparei que o e-mail de notificação não inclui os dados do mapa. Existe alguma forma de os incluir quando uma consulta é submetida através do formulário de contacto?
Olá Rob,
Para configurar isso, abra o construtor de formulários e vá para Configurações " Notificações. Em seguida, desloque-se para a secção Mensagem de e-mail e adicione o
{entry_geolocation}Etiqueta inteligente.Caso seja útil, aqui está um guia para incluir os detalhes da localização geográfica nos seus e-mails.
Espero que isto ajude! 🙂
Existe alguma forma de restringir apenas uma cidade ou um estado/província em vez de mostrar endereços de todo o mundo? Obrigado! De resto, o addon funciona muito bem 🙂
Olá Rodney - Atualmente, não temos a funcionalidade no complemento Geolocation para restringir o preenchimento automático de endereços com base no país ou na localização. Concordo que esta seria uma excelente funcionalidade e vou adicioná-la ao nosso rastreador de pedidos de funcionalidades para que esteja no radar dos nossos programadores.
Olá, reparei que isto só funciona para endereços. Preciso de uma forma de permitir que os aeroportos, hotéis, etc. sejam preenchidos automaticamente. Atualmente, quando o utilizador escreve algo como "aeroporto de viena", não há nada para escolher. Existe alguma forma de o ativar? Pensei que seria ótimo adicionar isto ao meu site de táxis, mas só confunde as pessoas e elas desistem durante o envio do formulário.
Olá Matej,
Para ativar o preenchimento automático de locais como aeroportos e hotéis no WPForms, pode utilizar a funcionalidade de preenchimento automático de endereços fornecida pelo complemento Geolocation. Esta funcionalidade tira partido de serviços como o Google Places ou o Mapbox, que podem preencher automaticamente uma vasta gama de tipos de localização - incluindo endereços, aeroportos, hotéis e outros pontos de interesse - dependendo dos dados disponíveis no fornecedor de mapas a que se liga.
Espero que isto ajude!