Resumo da IA
Os campos de endereço são frustrantes. Os usuários escrevem errado os nomes das ruas, esquecem os códigos postais, inserem endereços incompletos ou abandonam os formulários por completo porque digitar endereços completos é tedioso.
O preenchimento automático do Google Maps resolve isso sugerindo endereços completos e validados à medida que os usuários digitam. Após digitar 3-4 caracteres, os usuários veem uma lista suspensa de endereços reais para selecionar.
Deseja 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 preenchimento automático do Google Maps.
Como faço para criar um formulário de endereço com preenchimento automático do Google Maps?
Com o WPForms Pro e o complemento 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:
- Etapa 1: instalar o plug-in WPForms
- Etapa 2: Ativar o complemento de geolocalização
- Etapa 3: Configurar as definições de geolocalização
- Etapa 4: Crie seu formulário de endereço com preenchimento automático
- Etapa 5: Adicione o campo Endereço ao seu formulário
- Etapa 7: publique seu formulário de endereço com preenchimento automático do Google Maps
- Em seguida, aprimore seus formulários com mapas interativos
Etapa 1: instalar o plug-in WPForms
A primeira coisa que você precisa fazer é instalar o plugin WPForms, um poderoso criador de formulários que facilita a criação de formulários de contato, formulários de registro e muito mais.
Possui mais de 2.100 modelos de formulários WordPress que você pode usar e vem com ferramentas de geolocalização integradas para facilitar muito 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 complemento Geolocalização 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 plug-in, pode consultar o guia passo a passo sobre como instalar um plug-in do WordPress.
Faça o upgrade para o WPForms Pro agora! 🙂
Etapa 2: Ativar o complemento de geolocalização
Agora que o WPForms Pro está instalado, você precisa ativar o complemento Geolocalização. É ele que alimenta todos os recursos de mapa em seus formulários de contato.
Para ativar o complemento, vá até o painel do WordPress e clique em WPForms " Addons.
Na barra de pesquisa, digite Geolocalização. Em seguida, clique no botão Instalar complemento para alterar seu status para Ativo.
O complemento é instalado automaticamente. Não é necessário baixar arquivos ou configurar nada ainda. Em seguida, você irá conectá-lo ao Google Maps.
Etapa 3: Configurar as definições de geolocalização
Depois de ativar o complemento Geolocation, você precisa definir suas configurações. Para fazer isso, clique em WPForms " Settings.
Na página de configurações do WPForms, clique em Geolocation (Geolocalização ) nas guias na parte superior para acessar suas configurações.
Aqui, você verá diferentes opções para configurar o complemento Geolocation com base em diferentes necessidades e requisitos:
- Provedor de locais: 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 locais.
- Localização atual: Ative essa opção para permitir que a localização do usuário seja preenchida previamente no formulário.
- API do Google Places: Para ativar 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 no Console do desenvolvedor do Google
Acesse o Google Developer Console e selecione o projeto no menu Select a Project (Selecionar um projeto ) na parte superior.
Se você não tiver nenhum projeto criado anteriormente, clique em New Project (Novo projeto ) para criar um novo.
Depois de criar um novo projeto com sucesso, clique em Enable APIs and Services (Ativar APIs e serviços).
Isso abrirá uma biblioteca da API do Google.
A partir daí, você precisará ativar três APIs:
- API de geocodificação
- API JavaScript de mapas
- API de locais
Essa biblioteca de APIs oferece uma opção de pesquisa fácil; digite o nome da API na caixa de pesquisa, vá até a sua API e clique no botão ENABLE (Ativar ).
Depois de ativar todas as APIs, volte ao painel do Google Console e navegue pela guia Credentials (Credenciais ).
Clique no botão Create Credentials (Criar credenciais ) na parte superior e selecione a opção API key (Chave de API ).
Uma janela pop-up com uma chave de API será aberta. Clique na opção RESTRICT KEY (chave rest rita) no canto inferior direito da janela pop-up.
Uma nova página será aberta, na qual você deverá definir as seguintes configurações:
- Restrições de aplicativos: Aqui, 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 Referenciadores HTTP, 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 somente pelos sites especificados.
- Restrições de API: Depois de restringir sua chave por aplicativo e site, você precisará restringir sua chave por API. Para fazer isso, clique na opção Restrict key (Restringir chave ).
Isso abrirá um menu suspenso com uma opção de várias APIs. Selecione as seguintes APIs no menu suspenso:
- API de locais
- API JavaScript de mapas
- Geocodificação AP
Depois 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 essa informação no campo API Key (Chave de API) sob a API do Google Places e clique no botão Save Settings (Salvar configurações).
Suas configurações de geolocalização estão agora definidas. Em seguida, você criará um formulário com o preenchimento automático de endereços ativado.
Etapa 4: Crie seu formulário de endereço com preenchimento automático
Com o complemento de geolocalização configurado, você está pronto para criar seu formulário de contato. Isso leva cerca de 5 minutos. Vá para WPForms » Adicionar novo no painel do WordPress para abrir o criador de formulários.
Dê um nome ao seu formulário no campo Nomeie seu formulário. Algo como “Entre em contato” funciona bem. Você verá algumas opções aqui. Se quiser economizar tempo, pode escolher entre qualquer um dos nossos mais de 2.100 modelos de formulários WordPress.
Recomendo escolher o modelo de formulário de contato simples. Ele oferece um formulário de contato pronto, com os campos essenciais já adicionados.
O modelo inclui um campo Nome, um campo E-mail e um campo Comentário ou Mensagem. Você pode personalizar esses campos, adicionar novos ou remover aqueles que não precisar.
Agora, provavelmente há mais algumas configurações do formulário que você pode querer definir, como notificações e confirmações. Se for o caso (e eu recomendo fortemente isso), confira nosso guia detalhado sobre como criar seu primeiro formulário.
Dica profissional
Outra opção, caso você não queira configurar manualmente todos os campos, mas tenha requisitos personalizados, é deixar que o WPForms AI Form Builder cuide disso para você.
Basta passar o cursor sobre o botão roxo Gerar com IA e clicar em Gerar formulário. Você será direcionado para a tela do criador de formulários com IA. É aqui que você descreve o tipo de formulário que deseja.
Você pode digitar sua própria solicitação ou escolher entre as sugestões à esquerda. Depois de clicar em “Gerar”, a IA leva alguns segundos para criar seu formulário.
Experimente o WPForms AI Builder! 🙂
Etapa 5: Adicione o campo Endereço ao seu formulário
Agora que nosso formulário está pronto, só precisamos adicionar o Address Field. À esquerda, arraste o Address Field da seção Fancy Fields e coloque-o no 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 o rótulo e os subrótulos.
Agora você ativará a funcionalidade de preenchimento automático para o campo Endereço. Trata-se de uma simples alternância que conecta o campo à sua API do Google Places.
Clique no campo Endereço do seu formulário e, em seguida, clique na guia Avançado nas configurações do campo à esquerda.
Role para baixo até ver a opção Enable Address Autocomplete (Ativar preenchimento automático de endereço ). Ative essa configuração para ativar o preenchimento automático de endereços em seu formulário.
Ao permitir isso, será aberto mais um recurso: Display Map (Exibir mapa). Se quiser exibir um mapa em seu formulário de contato, ative essa opção também.
Use o menu suspenso para especificar se você deseja que o mapa apareça acima ou abaixo dos subcampos Address (Endereço).
Clique no botão Salvar na parte superior. Agora que seu formulário de endereço de preenchimento automático está pronto, é hora de adicioná-lo ao seu site.
Etapa 7: publique seu formulário de endereço com preenchimento automático do Google Maps
O WPForms permite que você adicione seu formulário em vários locais, incluindo páginas, postagens de blog e até mesmo widgets da barra lateral do seu site.
Antes de incorporar o formulário a uma página, se desejar, você pode verificar como o formulário ficará na página ativa. Para visualizar o formulário, clique no botão Preview (Visualizar ) na parte superior.
Se você 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 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 seu formulário ficará ativo e pronto para receber envios. Veja como fica o campo Endereço com o mapa interativo 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 obter 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 de interesse popular entre nossos leitores. Aqui estão as respostas para algumas perguntas comuns sobre ele:
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 usuários digitam em um campo do formulário. Após inserir 3-4 caracteres, aparece uma lista suspensa com endereços correspondentes do banco de dados do Google.
Os usuários selecionam seu endereço em vez de digitar cada campo manualmente. Isso 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 do WordPress?
Instale o WPForms Pro ou superior, ative o complemento Geolocalização, gere uma chave API gratuita do Google Places no Google Cloud Console, cole a chave API em WPForms » Configurações » Geolocalização.
Depois disso, basta criar um formulário, adicionar um campo Endereço e ativar a opção “Habilitar preenchimento automático de endereço” nas configuraçõ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 utilizada na pesquisa de endereços do Google Maps.
Você precisa habilitar três APIs do Google (API do Google Places, API do Google Maps JavaScript e API do Google 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 usuário digita no campo de endereço e as sugestões aparecem (não por tecla digitada, mas por sessão de pesquisa). Monitore o uso no Google Cloud Console.
Se você exceder os limites com frequência, considere atualizar 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 mais abrangente de endereços 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 oferece solicitações ilimitadas de preenchimento automático gratuito, mas os dados de endereços são menos detalhados em áreas rurais e em algumas regiões internacionais.
O WPForms suporta ambos. Escolha o Google Places para maior precisão ou o Mapbox para uso ilimitado. Você pode alternar entre os provedores em WPForms » Configurações » Geolocalização sem precisar reconstruir 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, você pode criar um formulário de checkout personalizado usando o WPForms com integração de pagamento e preenchimento automático de endereços.
Como alternativa, instale um plugin de preenchimento automático de endereços específico para o WooCommerce que se integra diretamente aos campos de checkout do WooCommerce.
Se você precisa 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 plug-in do Google Maps para WordPress?
O WPForms Pro é um dos melhores plug-ins de mapa para WordPress. Ele inclui um poderoso complemento de geolocalização que vem com um recurso pré-construído de preenchimento automático de endereços que funciona com o Google Maps ou o Mapbox.
Esse recurso localiza e sugere automaticamente a localização de seus usuários à medida que eles preenchem e digitam seus endereços.
Além disso, com o complemento Geolocation, é possível adicionar um mapa ao formulário de contato do WordPress e permitir que os usuários adicionem um local ajustando o pino no mapa.
O que acontece com meu formulário se eu exceder o limite gratuito do Google?
Se você exceder 28.000 solicitações de preenchimento automático por mês, o Google cobrará sua conta do Cloud (se o faturamento estiver ativado) ou deixará de fornecer sugestões de preenchimento automático (se o faturamento não estiver ativado).
Seu formulário continua funcionando e o campo Endereço passa a ser um campo 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 cobrança para evitar surpresas. A maioria dos sites fica bem abaixo do limite gratuito, a menos que tenham um tráfego muito alto.
Em seguida, aprimore seus formulários com mapas interativos
Excelente trabalho! Você criou com sucesso um formulário de autocompletar endereços do Google Maps que melhora a experiência do usuário e garante dados de endereço precisos. Agora que você tem o autocompletar endereços funcionando, leve seus formulários para o próximo nível com o campo 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 comerciais com marcadores personalizados ou escolher sua área de serviço preferida em um mapa visual. O campo Mapa é perfeito para:
- Formulários de reserva para vários locais: permita que os clientes vejam todos os locais em um único mapa e selecionem a filial de sua preferência.
- Seleção da área de serviço: exiba suas zonas de cobertura visualmente para que os clientes saibam se você atende à sua área.
- Formulários de contato 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 seu formulário de contato do WordPress
- Como criar um formulário de reserva WordPress para vários locais
Quer acompanhar quais formulários convertem melhor? Aprenda a rastrear uma fonte de leads no WordPress para ver quais fontes de tráfego geram mais envios de formulários.
Crie seu formulário WordPress agora
Pronto para criar seu formulário? Comece hoje mesmo com o plug-in de criação de formulários mais fácil do WordPress. O WPForms Pro inclui vários modelos gratuitos e oferece uma garantia de reembolso de 14 dias.
Se este artigo o ajudou, siga-nos no Facebook e no Twitter para obter mais tutoriais e guias gratuitos sobre o WordPress.
Isso NÃO funciona, retorna erro no campo!
Olá, Nathan! Lamento saber que o preenchimento automático de endereços do seu formulário está apresentando erros. Você poderia entrar em contato conosco com mais detalhes sobre o problema que está ocorrendo para que possamos ajudá-lo a solucionar o problema?
Aguardamos seu contato!
Boa tarde,
O complemento do Google Maps funciona bem, ótimo trabalho!
Mas existe uma maneira de salvar as coordenadas lat e long dentro do endereço selecionado?
Desde já agradeço!
Percebi que isso captura o endereço em um único campo, o que dificulta a análise nos 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 suspenso.
Você pode adicionar opções rapidamente em um campo Dropdown usando nossa opção Bulk Add no construtor de formulários. Para fazer isso, clique no campo Dropdown e, no painel Opção de campo à esquerda, clique em Bulk Add. Na nova seção que aparece, selecione Show Presets (Mostrar predefinições). Em seguida, você pode selecionar em nossa lista de opções predefinidas. Aqui está um breve screencast do processo que adiciona países como exemplo.
Caso seja útil, também temos um tutorial detalhado sobre isso.
Para o subcampo CEP, você pode usar o campo Numbers (Números) ou exigir que os usuários só possam adicionar números a um campo Single Line Text (Texto de linha única) usando o método de 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 isso ajude! 🙂
Notei que o e-mail de notificação não inclui os dados do mapa. Existe uma maneira de incluir isso quando uma consulta é enviada por meio do formulário de contato?
Olá, Rob,
Para configurar isso, abra o construtor de formulários e vá para Settings " Notifications (Configurações " Notificações). Em seguida, role até a seção Mensagem de e-mail e adicione a tag
{entry_geolocation}Smart Tag.Caso seja útil, aqui está um guia para incluir os detalhes de localização geográfica em seus e-mails.
Espero que isso ajude! 🙂
Existe uma maneira de restringir apenas uma cidade ou estado/província em vez de mostrar endereços em todo o mundo? Obrigado! De resto, o complemento funciona muito bem 🙂
Olá, Rodney - No momento, não temos o recurso no complemento Geolocation para restringir o preenchimento automático de endereços com base no país ou na localização. Concordo que esse seria um ótimo recurso, e vou adicioná-lo ao nosso rastreador de solicitações de recursos para que esteja no radar dos nossos desenvolvedores.
Olá, percebi que isso só funciona para endereços. Preciso de uma maneira de permitir que aeroportos, hotéis etc. sejam preenchidos automaticamente. Atualmente, quando o usuário escreve algo como "airport vienna", não há nada para escolher. Existe alguma maneira de ativar isso? Achei que seria ótimo adicionar isso ao meu site de táxis, mas isso só confunde as pessoas e elas desistem durante o envio do formulário.
Oi Matej,
Para ativar o preenchimento automático de locais como aeroportos e hotéis no WPForms, você pode usar o recurso Address Autocomplete fornecido pelo complemento Geolocation. Esse recurso aproveita serviços como o Google Places ou o Mapbox, que podem preencher automaticamente uma grande variedade de tipos de locais - incluindo endereços, aeroportos, hotéis e outros pontos de interesse - dependendo dos dados disponíveis no provedor de mapas que você conectar.
Espero que isso ajude!