Como fazer um formulário de preenchimento automático do Google Maps

Publicados: 2021-09-28

Você quer aprender a fazer um formulário de preenchimento automático do Google Maps?

Adicionar um campo de preenchimento automático aos formulários do seu site melhora a experiência do usuário, economiza tempo e valida o endereço enviado usando o poder do Google Maps.

Portanto, neste tutorial, vamos percorrer um guia passo a passo sobre como fazer um formulário de preenchimento automático do Google Maps - sem fazer malabarismos com qualquer código HTML personalizado!

Crie seu formulário de preenchimento automático agora

Aqui está um índice se você quiser avançar:

  1. Instale o plug-in WPForms
  2. Habilitar o complemento de geolocalização
  3. Definir configurações de geolocalização
  4. Criar um formulário de preenchimento automático do Google Maps
  5. Adicionar campo de endereço ao seu formulário
  6. Habilite o recurso de preenchimento automático de endereço
  7. Adicione o formulário de preenchimento automático do Google Maps ao site do WordPress

Como faço um formulário de preenchimento automático do Google Maps?

Quer saber como usar o recurso de preenchimento automático de endereço do Google Maps? O preenchimento automático de endereços é um dos recursos poderosos do Google Maps. Você pode adicionar o preenchimento automático aos seus formulários de contato do WordPress para torná-los mais fáceis de preencher.

WPForms é o melhor plugin do WordPress Form Builder. Obtenha gratuitamente!

Formulário de endereço de preenchimento automático do Google Maps

A incorporação do recurso de preenchimento automático de endereço do Google Maps em um formulário de contato requer conhecimento prévio de codificação. Mas se você usar um plug-in de construtor de formulários como WPForms, poderá fazer o processo em algumas etapas e sem codificação.

O WPForms Pro inclui um poderoso complemento de geolocalização que vem com um recurso de preenchimento automático de endereço pré-criado. Este recurso localiza e sugere automaticamente a localização de seus usuários conforme eles preenchem e digitam seus endereços.

Além disso, com o complemento Geolocalização, 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.

Vamos ver como criar um formulário de preenchimento automático do Google Maps com WPForms e o complemento Geolocation.

Etapa 1: instalar o plug-in WPForms

A primeira coisa que você precisa fazer é instalar o plugin WPForms. Assim que o WPForms estiver instalado, clique no botão ativar.

Se você é novo no WordPress ou está enfrentando alguma dificuldade durante o processo de instalação do plug-in, você pode verificar o guia passo a passo sobre como instalar um plug-in do WordPress.

Etapa 2: Habilitar o complemento de geolocalização

Depois que o WPForms estiver instalado, você poderá ativar o complemento Geolocalização .

Agora, para ativar o addon, vá para o painel do WordPress e clique em WPForms »Addons.

Complementos WPForms

Na barra de pesquisa, digite Geolocalização e pressione para ativar.

ativar complemento de geolocalização wpforms

Etapa 3: definir as configurações de geolocalização

Depois de habilitar o complemento Geolocalização, você precisa definir suas configurações. Para fazer isso, clique em WPForms »Configurações.

configurações de wpforms

Na página de configurações de WPForms, clique em Geolocalização nas guias na parte superior.

configurar-geolocalização-addon

Aqui, você verá diferentes opções para configurar o complemento de geolocalização:

  • 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.

select-Google-Maps-provider

  • Localização atual : ative esta opção para permitir que a localização do seu usuário seja pré-preenchida no formulário.

enable-current-location

  • API do Google Places : Para ativar o recurso de preenchimento automático de endereço e exibir o Google Maps em seus formulários, você precisará gerar uma chave de API e conectá-la com WPForms.

adicionar google-maps-api-key

Vamos ver o processo completo de geração de uma chave de API.

Gere uma chave de API a partir 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.

create-a-project-in-google-search-console

Depois de criar um novo projeto com sucesso, clique em Ativar APIs e serviços.

habilitar api e serviços

Isso abrirá uma biblioteca de API do Google.

google-api-library

A partir daqui, você precisará habilitar três APIs:

  1. API de geocodificação
  2. API JavaScript do Maps
  3. API do Google Places

Esta biblioteca API fornece uma opção de pesquisa fácil; digite o nome da API na caixa de pesquisa, acesse sua API e clique no botão ATIVAR .

habilitar api

Depois de habilitar todas as suas APIs, volte para o painel do Console do Google e navegue na guia Credenciais .

guia credenciais do console de pesquisa do Google

Clique no botão Criar credenciais na parte superior e selecione a opção de chave API .

criar api

Um pop-up com uma chave de API será aberto. Clique na opção RESTRICT KEY no canto inferior direito da janela pop-up.

restringir-api-chave

Uma nova página será aberta, onde você deve definir as seguintes configurações:

  • Restrições do aplicativo: A partir daqui, você pode selecionar quais sites, endereços IP ou aplicativos você pode usar a chave API. Aqui, você precisará escolher a opção HTTP Referrers para permitir que sua chave seja usada em seus sites.

restrições de aplicação

  • Restrições de sites: Depois de selecionar os referenciadores HTTP, uma nova opção será exibida, restrições de sites . Aqui você precisa adicionar o nome de domínio do seu site para restringir a chave API a ser usada apenas pelos sites especificados.

restrições de site

  • 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 Restringir chave .

restringir-api-chave

Isso abrirá um menu suspenso com uma opção de várias APIs. Selecione as seguintes APIs no menu suspenso:

  • API do Google Places
  • API JavaScript do Maps
  • Geocodificação AP

selecione APIs do google

Quando terminar de selecionar as APIs, clique no botão Salvar para salvar suas configurações.

Clicar no botão Salvar redirecionará você de volta para a página Credenciais . Copie sua chave da página e volte para as configurações do WPForms.

copiar chave de API

Em suas configurações de WPForms, cole isso no campo Chave da API na API do Google Places e clique no botão Salvar configurações .

adicionar google maps api key em wpforms

Excelente! Vamos agora adicionar o recurso de preenchimento automático de endereços aos seus formulários.

Etapa 4: Criar um formulário de preenchimento automático do Google Maps

Agora que terminamos as configurações da API, é hora de criar um formulário de preenchimento automático do Google Maps.

Para isso, primeiro, precisamos criar um novo formulário usando WPForms. Vá para WPForms »Add New para criar um novo formulário.

Na tela de configuração, adicione um nome ao seu formulário e selecione o modelo que deseja usar. O WPForms inclui uma enorme biblioteca de modelos pré-construída que consiste em mais de 300 belos modelos de formulários.

WPForms-template-library

Você pode escolher qualquer modelo e usá-lo em seu site.

Aqui, escolheremos um modelo de Formulário de Contato Simples . Clique no modelo para visualizá-lo ao vivo no painel do construtor de formulários.

modelo de formulário de contato simples

Abaixo, você pode verificar o painel do construtor de formulários WPForms. A partir desse construtor, você pode adicionar campos adicionais ao seu formulário de contato.

autocomplete-address-form

Etapa 5: adicione o campo de endereço ao seu formulário

Agora que temos nosso formulário pronto, precisamos apenas adicionar o Campo de Endereço.

À esquerda, na seção Campos Extraordinários, arraste o Campo de Endereço e coloque-o em seu formulário.

Adicionar campo de endereço a WPForms

O campo Endereço já inclui um rótulo e um texto de sub-rótulo para sua facilidade. Você obtém flexibilidade para:

  • Personalize o texto do rótulo
  • Selecione o formato do esquema para o campo de endereço
  • Personalize o tamanho do campo
  • Ocultar etiqueta
  • Ocultar sub-rótulos

Etapa 6: ativar o recurso de preenchimento automático de endereço

Para ativar o recurso de preenchimento automático de endereço , vá para a guia Avançado do campo Endereço.

guia avançado do campo de endereço

Role para baixo até ver uma caixa de seleção com a opção Ativar preenchimento automático de endereço .

address-autocomplete-feature-of-wpform

Marque a caixa para habilitar o Preenchimento Automático de Endereço em seu formulário. Permitindo isso abrirá mais um recurso: Exibir Mapa. Se você deseja exibir um mapa com seu contato, marque esta opção também.

display-google-maps-with-contact-form

Clique no botão Salvar na parte superior para resolver tudo.

Etapa 7: adicione o formulário de preenchimento automático do Google Maps ao site do WordPress

Agora que o formulário de preenchimento automático está pronto, é hora de adicioná-lo ao seu site.

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 seu formulário a uma página, se desejar, você pode verificar como seu formulário ficará na página ativa. Para visualizar seu formulário, clique no botão Visualizar na parte superior.

visualizar formulário de preenchimento automático de endereço

Vamos adicionar o formulário de preenchimento automático do Google Maps à sua página.

Crie uma nova página ou abra uma página existente no site WordPress. Clique no ícone “+” e adicione o bloco WPForms do editor de bloco.

selecionar formulário de preenchimento automático

Selecione seu formulário e publique a página.

formulário de preenchimento automático de endereço

Trabalho incrível! Você criou com êxito um formulário de preenchimento automático do Google Maps.

Em seguida, acompanhe suas conversões de formulários WordPress

E aí está! Com o complemento WPForms Geolocation, você pode habilitar facilmente o recurso de preenchimento automático de endereço nos formulários de contato do seu site e aprimorar a experiência do visitante.

Crie seu formulário de preenchimento automático agora

Depois de criar um formulário de preenchimento automático do Google Maps, você pode se interessar em rastrear as fontes que estão trazendo tráfego e clientes potenciais para o seu site. Para saber mais, confira nosso tutorial detalhado sobre como rastrear uma fonte principal no WordPress.

Em seguida, você pode estar interessado em verificar os truques simples para eliminar o registro de usuário de spam.

Então, o que você está esperando? Comece hoje com o plugin de formulários WordPress mais poderoso.

E não se esqueça, se gostou deste artigo, siga-nos no Facebook e Twitter.