Quer saber como criar um formulário de endereço de preenchimento automático do Google Maps?
Adicionar um campo de endereço de preenchimento automático aos formulários do seu sítio Web melhora a experiência do utilizador, poupa tempo e valida o endereço enviado utilizando o Google Maps.
Crie o seu formulário de preenchimento automático de endereços WPForms
Neste tutorial, forneceremos um guia passo-a-passo sobre como criar um formulário de endereço de preenchimento automático do Google Maps sem escrever código!
Neste artigo
- 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: Criar um formulário de endereço de preenchimento automático do Google Maps
- Passo 5: Adicionar o campo de endereço ao seu formulário
- Passo 6: Ativar a funcionalidade de preenchimento automático de endereços
- Passo 7: Adicione o seu formulário de endereço de preenchimento automático do Google Maps ao seu site WordPress
- Perguntas frequentes sobre Como criar um formulário de endereço de preenchimento automático do Google Maps
Como faço para criar um formulário de endereço de preenchimento automático do Google Maps?
Está a pensar como utilizar a funcionalidade de preenchimento automático de endereços do Google Maps? Siga os passos abaixo para começar:
Passo 1: Instalar o plugin WPForms
A primeira coisa que precisa de fazer é instalar o plugin WPForms. Quando o WPForms estiver instalado, clique no botão de ativação.
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.
Passo 2: Ativar o complemento de geolocalização
Agora, para ativar o addon, vá ao seu painel de controlo do WordPress e clique em WPForms " Addons.
Na barra de pesquisa, escreva Geolocalização. Em seguida, clique no botão Instalar Complemento para alterar o seu estado para Ativo.
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
Quando terminar de selecionar as APIs, clique no botão Guardar para guardar as suas definições.
Clicando no botão salvar, você será redirecionado para a página Credentials. Copie sua chave da página e volte para as 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.
Ótimo! Vamos agora adicionar a funcionalidade de preenchimento automático de endereços aos seus formulários.
Passo 4: Criar um formulário de endereço de preenchimento automático do Google Maps
Agora que já terminámos as definições da API, está na altura de criar um formulário de endereço de preenchimento automático do Google Maps.
Para isso, primeiro, precisamos de criar um novo formulário utilizando o WPForms. Vá para WPForms " Add New para criar um novo formulário.
No ecrã de configuração, adicione um nome ao seu formulário e selecione o modelo que pretende utilizar. O WPForms vem com mais de 2.000 modelos de formulários do WordPress.
Neste caso, vamos escolher um modelo de Formulário de contacto simples. Clique no modelo para o ver ao vivo no painel de controlo do criador de formulários.
Abaixo pode verificar o painel de controlo do construtor de formulários WPForms. A partir deste construtor, pode adicionar campos adicionais ao seu formulário de contacto.
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 Endereço da secção Campos Extravagantes e coloque-o no seu formulário.
O campo Endereço já inclui uma etiqueta e um texto de sub-rótulo para sua facilidade. Tem a flexibilidade de:
- Personalizar o texto da etiqueta
- Selecionar o formato do esquema para o campo de endereço
- Personalizar o tamanho do campo
- Ocultar etiqueta
- Ocultar sub-rótulos
Passo 6: Ativar a funcionalidade de preenchimento automático de endereços
Para ativar a funcionalidade de preenchimento automático de endereços, aceda ao separador Avançadas do campo Endereço.
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: Adicione o seu formulário de endereço de preenchimento automático do Google Maps ao seu site WordPress
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 seu formulário de endereço de preenchimento automático do Google Maps, está pronto para o adicionar à sua página.
Crie uma nova página ou abra uma página existente no sítio Web do WordPress. Clique no ícone "+" e adicione o bloco WPForms a partir do editor de blocos.
Em seguida, selecione o seu formulário a partir do menu pendente no bloco. Neste caso, seleccionaremos o Formulário de preenchimento automático de endereço.
Depois disso, só tem de publicar a página e o seu formulário será ativado e estará pronto a aceitar submissões.
Eis o aspeto do campo Endereço com o mapa interativo numa página publicada. Não é fantástico?
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 num formulário é uma funcionalidade que simplifica o processo de preenchimento dos campos de endereço.
Ao começar a escrever um endereço, o formulário sugere automaticamente endereços completos com base na introdução inicial. Isto ajuda os utilizadores a introduzir rapidamente informações precisas sem terem de escrever o endereço completo.
Como é que adiciono um endereço de preenchimento automático ao Google?
Para adicionar a funcionalidade de preenchimento automático de endereços a um formulário do Google, é necessário integrar a API do Google Maps. Esta API liga o seu formulário à extensa base de dados de endereços do Google, permitindo-lhe sugerir endereços à medida que os utilizadores escrevem.
Para os utilizadores do WordPress, o WPForms Pro, combinado com o Geolocation Addon, oferece uma integração fácil que melhora os seus formulários com capacidades de preenchimento automático de endereços.
O que é a ferramenta de preenchimento automático de endereços?
Uma ferramenta de preenchimento automático de endereços é um sistema que prevê e apresenta endereços completos à medida que os utilizadores os começam a escrever num campo de formulário. Aumenta a velocidade e a precisão da introdução de endereços, garantindo que as informações estão corretas.
Para sites WordPress, a incorporação desta funcionalidade é simples com o WPForms Pro e o Geolocation Addon, que integram perfeitamente o preenchimento automático de endereços nos seus formulários.
A incorporação do preenchimento automático do Google Maps requer conhecimentos de programação?
A incorporação da funcionalidade de preenchimento automático de endereços do Google Maps num formulário de contacto requer conhecimentos prévios de codificação.
Mas se utilizar um plugin de construção de formulários como o WPForms, pode fazer o processo em poucos passos e sem codificação.
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.
Em seguida, acompanhe as conversões do seu formulário WordPress
E aí está! Com o addon WPForms Geolocation, pode facilmente ativar a funcionalidade de preenchimento automático de endereços nos formulários de contacto do seu site e melhorar a experiência do seu visitante.
Depois de criar um formulário de endereço de preenchimento automático do Google Maps, poderá estar interessado em acompanhar as fontes que estão a trazer tráfego e potenciais clientes para o seu Web site. Para saber mais, consulte o nosso tutorial detalhado sobre como rastrear uma fonte de leads no WordPress.
E para mais formas de trabalhar com Mapas no WordPress, aqui está a nossa lista dos principais plugins WordPress Mapbox. Poderá também estar interessado em dar uma vista de olhos a alguns truques simples para eliminar o registo de utilizadores com spam.
Crie o seu formulário WordPress agora
Então, de que está à espera? Comece a usar o mais poderoso plugin de formulários do WordPress hoje mesmo. E não se esqueça, se gostou deste artigo, siga-nos no Facebook e no Twitter.
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.