Como Incorporar um Mapa do Google em Formulários de Contato (Com Marcador de Mapa)

Já preenchemos nossa cota de formulários online e muitas vezes nos encontramos digitando o mesmo endereço repetidamente.

Imagine isto em vez disso: um visitante acessa sua página de contato, vê o endereço preenchido automaticamente e um pino já colocado no mapa. É rápido, pessoal e economiza tempo.

Adicionar um Google Maps com um pino de localização ao seu formulário de contato do WordPress pode parecer um pequeno detalhe, mas pode ter um grande impacto. Em nossa experiência com o WPForms, isso pode ajudar a aumentar as taxas de conclusão de formulários e proporcionar aos usuários uma experiência mais suave e satisfatória.

Neste guia passo a passo, mostraremos como incorporar um Google Maps interativo diretamente em seu formulário de contato do WordPress – sem necessidade de código. 🗺️

Por que incorporar um Google Maps em seu formulário de contato?

Ao configurar seu site WordPress, você provavelmente adicionou um formulário de contato para que os visitantes possam entrar em contato sobre seus produtos ou serviços. E se você tem uma loja física, provavelmente adicionou um Google Maps para ajudar as pessoas a encontrar sua localização facilmente.

O que muitos proprietários de empresas não sabem é que você pode usar geolocalização para preencher automaticamente o campo de endereço em seu formulário de contato e exibir a localização do visitante em um mapa. Em seguida, eles podem verificar facilmente se o endereço está correto ou arrastar o pino para alterá-lo, se necessário.

Isso melhora a experiência do usuário geral e pode ajudar a reduzir o abandono de formulários.

Saber a localização dos seus usuários também permite usar geotargeting para exibir conteúdo personalizado e aumentar as taxas de conversão.

Agora, vamos ver como incorporar um Google Maps em seus formulários de contato. Aqui está uma visão geral de todos os tópicos que abordaremos neste artigo:

• How to Embed a Google Map in a Contact Form
  • Gerando uma chave de API do Google Places
  • Restringindo Sua Chave da API Google Places
  • Adicionando a Chave da API do Google às Configurações do WPForms
  • Criando um Formulário de Contato com Mapa do Google Embutido no WordPress
  • Adicionando o Formulário de Contato ao Seu Site
  • Visualizando o Mapa do Google no Formulário de Contato
• Como Visualizar Dados de Localização do Usuário em um Formulário
• Tutorial em Vídeo: Incorporar um Google Maps em Formulários de Contato
• Recursos Bônus 🔗: Melhores Guias sobre o Uso de Mapas no WordPress

Vamos começar!

Como Incorporar um Google Maps em um Formulário de Contato

Para este tutorial, usaremos o WPForms, o melhor plugin de formulário de contato para WordPress. Ele permite criar facilmente qualquer tipo de formulário com um simples construtor de formulários de arrastar e soltar.

Existe uma versão gratuita do WPForms disponível com todos os recursos que você precisa para criar um formulário de contato básico. Para este tutorial, no entanto, usaremos o WPForms Pro, pois ele inclui o addon Google Maps.

ℹ️ Você sabia? Na WPBeginner, usamos o WPForms para muitas coisas. Por exemplo, ele alimenta nosso formulário de contato e as pesquisas anuais de satisfação dos leitores. Tivemos uma ótima experiência com ele, e você pode saber mais em nossa análise aprofundada do WPForms.

A primeira coisa que você precisa fazer é criar uma conta no WPForms. No site do WPForms, clique em ‘Obter WPForms Agora’ e, em seguida, complete o processo de registro.

Com isso feito, você acessará o painel da sua conta WPForms, onde poderá acessar seu arquivo ZIP do WPForms Pro e sua chave de licença.

Em seguida, você pode instalar e ativar o plugin WPForms.

Da sua área de administração do WordPress, você pode ir em Plugins » Adicionar Novo Plugin.

Em seguida, vá em frente e use a barra de pesquisa para encontrar rapidamente o plugin WPForms.

Nos resultados da pesquisa, basta clicar no botão ‘Instalar Agora’ e depois em ‘Ativar’ para começar a usá-lo em seu site WordPress.

Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você precisa visitar a página WPForms » Configurações para inserir sua chave de licença. Você pode encontrar essas informações na sua área de conta do WPForms. Certifique-se de clicar no botão 'Verificar Chave' para ativar sua licença.

Em seguida, você precisa navegar até WPForms » Addons e encontrar o Addon de Geocalização.

Você pode usar a opção de pesquisa na parte superior da tela ou simplesmente rolar pela lista de addons disponíveis.

Assim que o encontrar, vá em frente e clique no botão ‘Instalar Addon’.

Agora que o addon de Geocalização está ativado, você precisará configurar suas definições. Para fazer isso, navegue até WPForms » Configurações e clique na aba ‘Geocalização’.

Nesta página, você precisa selecionar um provedor de geolocalização.

Para este tutorial, escolheremos a ‘Google Places API’.

Você também deve clicar na caixa de seleção ‘Localização Atual’. Isso solicita ao navegador do usuário a localização dele para preencher automaticamente o campo de endereço. Isso economiza tempo e ajuda a melhorar a precisão.

Em seguida, você precisa rolar para baixo até as configurações da API Google Places.

Aqui, o WPForms pedirá que você insira sua chave de API do Google. Você pode obter sua chave do Google e, em seguida, colá-la no campo de entrada. Mostraremos como fazer isso na próxima seção.

Gerando uma chave de API do Google Places

Você pode obter uma chave de API para o Google Places acessando o site do Google Cloud Console.

Primeiro, basta selecionar seu país em um menu suspenso e concordar com os termos de serviço. Em alguns países, você também pode ter a chance de se inscrever em uma lista de mala direta.

Quando estiver pronto para passar para a próxima etapa, clique em ‘Concordar e Continuar’.

Em seguida, você precisará selecionar um projeto para a chave de API. Simplesmente clique em ‘Selecionar um projeto’ e clique no projeto que deseja usar na lista.

Se você ainda não criou um projeto antes, ou se este é um novo site que você ainda não adicionou ao Google, então você deve clicar em ‘Novo Projeto’ para configurar um.

Agora você deve estar na página ‘APIs e Serviços’, onde pode ativar as APIs necessárias para exibir o Google Maps em seu site WordPress.

Você precisará clicar no botão ‘+ Ativar APIs e Serviços’ na parte superior da página.

Isso o levará à Biblioteca de APIs do Google, onde você precisará ativar três APIs de mapeamento:

• Google Places API – permite que seu formulário puxe endereços sugeridos conforme os usuários digitam.
• Maps JavaScript API – exibe o mapa interativo em seu site.
• API de Geocodificação – transforma um endereço em coordenadas exatas para que o mapa possa posicionar o marcador corretamente.

Você pode encontrá-los usando a barra de pesquisa no topo ou clicando no botão ‘Ver Todos’ na seção Mapas.

A partir daqui, vamos encontrar e habilitar a API de Lugares. Assim que a localizar, você precisará clicar nela.

Na próxima página, clique no botão ‘Habilitar’.

Depois disso, você deve fazer a mesma coisa para a API JavaScript do Maps e a API Geocoding.

E assim que você habilitar as três APIs, poderá criar uma chave de API.

No menu à esquerda, você precisa navegar para APIs e Serviços » Credenciais.

A partir daqui, você poderá clicar no botão ‘+ Criar Credenciais’ na parte superior da tela e, em seguida, selecionar a opção ‘Chave de API’.

Sua chave de API será criada e exibida em uma janela pop-up.

Mais tarde, neste tutorial, você precisará copiar essa chave para as configurações do WPForms. Por enquanto, vamos ver como definir algumas restrições para o uso da chave de API.

Restringindo Sua Chave da API Google Places

O uso excessivo da chave de API pode fazer com que você saia do nível gratuito e custe mais do que o esperado. Recomendamos que você restrinja a chave para evitar uso não autorizado ou inesperado.

Para fazer isso, você precisa clicar no link ‘Restringir Chave’ na parte inferior do pop-up ‘Chave de API criada’ na captura de tela acima.

Na próxima página, você pode configurar várias restrições diferentes. A primeira delas é ‘Restrições de aplicativo’.

Nesta seção, você deve clicar na opção ‘Referenciadores HTTP (sites)’. Então, a chave só será usada em sites.

Em seguida, você deve garantir que ela seja usada apenas em seu próprio site. Para fazer isso, você deve rolar para baixo até a seção ‘Restrições de site’ e, em seguida, clicar no botão ‘Adicionar um item’.

Agora, você deve digitar o nome de domínio do seu site em seu site no campo ‘Novo item’ usando o padrão *example.com/*.

Se você for usar o Google Maps em mais de um site, poderá clicar no botão ‘Adicionar um item’ e adicionar quantos domínios precisar.

Agora que você restringiu a chave de API apenas aos seus próprios sites, também pode restringi-la para funcionar apenas com as APIs do Google que você adicionou acima.

Você precisa rolar para baixo até a seção ‘Restrições de API’ da página e selecionar a opção ‘Restringir chave’. Isso revelará um menu suspenso onde você deve marcar as caixas ‘API de Geocodificação’, ‘API JavaScript do Maps’ e ‘API de Lugares’.

Depois de fazer isso, você deve clicar no link 'OK' para armazenar suas configurações.

Por fim, certifique-se de clicar no botão 'Salvar' na parte inferior da página para ativar todas as restrições que você escolheu.

Observe que pode levar até 5 minutos para que as configurações entrem em vigor.

Adicionando a Chave da API do Google às Configurações do WPForms

Agora você verá a chave de API listada ao lado de quaisquer outras que você tenha disponíveis. Você deve clicar no ícone ‘Copiar’ para poder adicionar a chave às configurações de Geocodificação do WPForms.

Observe que, se você precisar alterar alguma das configurações ou restrições da API, poderá clicar no ícone Editar à direita.

Agora você precisa retornar ao seu site, que ainda deve estar na página WPForms » Configurações » Geocalização.

Uma vez lá, cole a chave no campo ‘API de Lugares do Google’ nas configurações do WPForms. E certifique-se de clicar no botão ‘Salvar Configurações’.

Criando um Formulário de Contato com Mapa do Google Embutido no WordPress

Agora que você configurou o WPForms e o Google Places, está pronto para criar um formulário de contato no WordPress.

Existem algumas maneiras diferentes de construir seus formulários WordPress com o WPForms.

Primeiro, você pode começar com uma tela em branco. Isso lhe dá controle total para adicionar e organizar campos de formulário do zero, tornando-o perfeito para designs totalmente personalizados.

Em segundo lugar, você pode usar o construtor de formulários com IA para gerar um formulário completo com base em um prompt de texto simples. Isso economiza muito tempo se você não tiver certeza por onde começar.

Por fim, você pode escolher entre mais de 2.000 modelos de formulário pré-fabricados. Se você precisa de um formulário de contato, pesquisa, formulário de reserva ou algo mais complexo, provavelmente existe um modelo que atende às suas necessidades!

Você pode começar seguindo nosso guia sobre como criar um formulário de contato no WordPress.

Depois de criar um formulário básico, você precisa adicionar um campo de endereço. Você pode usar um bloco de Endereço ou um campo de Texto de Linha Única.

Para este tutorial, usaremos um campo 'Texto de Linha Única'. Então, vamos simplesmente arrastar o bloco 'Texto de Linha Única' para o formulário.

Em seguida, personalizaremos as configurações do campo.

Para fazer isso, você precisa clicar no campo para exibir as configurações de Texto de Linha Única.

Primeiro, você deve alterar o rótulo do campo para 'Endereço'. Isso deixará claro para seus usuários o que eles devem digitar no campo.

Depois disso, você precisa alterar as configurações do campo para que ele exiba um mapa no formulário do WordPress. Para fazer isso, você precisará clicar na guia Avançado.

Uma vez lá, você deve procurar a opção 'Habilitar Autocompletar Endereço' na parte inferior das configurações e ativá-la.

Em seguida, você verá outra opção, 'Exibir Mapa', que você também deve habilitar. Você pode optar por exibir o mapa acima ou abaixo do campo.

Adicionando o Formulário de Contato ao Seu Site

A maneira mais simples de adicionar o formulário de contato ao seu site é clicar no botão 'Incorporar'. Você o encontrará ao lado do botão 'Salvar' na parte superior da tela do editor de formulários.

Você será perguntado se deseja adicionar o formulário a uma página existente ou criar uma nova.

Para este tutorial, clicaremos no botão ‘Criar Nova Página’.

Em seguida, você deve dar um nome à página e, em seguida, clicar no botão ‘Vamos Lá!’.

Uma nova página com esse nome será criada e seu formulário de contato será adicionado automaticamente.

Tudo o que você precisa fazer é clicar no botão 'Publicar' para colocar a página no ar.

Visualizando o Mapa do Google no Formulário de Contato

Quando um usuário visita seu formulário de contato, ele será perguntado se deseja permitir que seu site acesse sua localização.

Se ele clicar no botão ‘Permitir’, sua localização atual será inserida no campo de endereço e um marcador dessa localização será adicionado ao mapa.

Este recurso de preenchimento automático economizará tempo dos seus visitantes, tornando mais rápido e fácil inserir seus endereços.

Se eles precisarem alterar o endereço, poderão simplesmente digitar um novo ou arrastar o marcador para um local diferente no mapa.

Como Visualizar Dados de Localização do Usuário em um Formulário

Assim que você ativar a geolocalização, o WPForms também registrará a localização de cada usuário quando ele enviar seu formulário. Saber a localização dos seus usuários pode ajudá-lo a encontrar melhores leads.

Você precisará navegar até WPForms » Entradas e, em seguida, clicar no seu formulário de contato.

Agora você verá uma lista de entradas preenchidas por seus usuários para esse formulário.

Para visualizar um envio de formulário específico, basta clicar no link ‘Visualizar’ à direita.

Agora você verá os dados do formulário enviados pelo usuário, como nome, e-mail comercial e número de telefone comercial, juntamente com alguns dados de localização.

Isso inclui um pino no Google Maps, a localização do usuário, código postal e país. Observe que a precisão depende do dispositivo do usuário; dados de GPS de telefones celulares geralmente são muito precisos, enquanto a localização baseada em IP de computadores desktop pode ser aproximada.

Claro, se o usuário não concedeu permissão para o formulário saber sua localização, nenhum dado de localização será exibido.

É isso. Você adicionou com sucesso um Google Map ao seu formulário de contato no WordPress. Você também pode usar o WPForms para criar pesquisas no WordPress, criar um formulário de pagamento para aceitar pagamentos online e muito mais.

Tutorial em Vídeo: Incorporar um Google Maps em Formulários de Contato

Quer ver como funciona? Basta clicar no botão Reproduzir ▶️ no tutorial em vídeo abaixo para aprender como incorporar um Mapa do Google em seu formulário de contato.

Inscreva-se no WPBeginner

Recursos Bônus 🔗: Melhores Guias sobre o Uso de Mapas no WordPress

Esperamos que este tutorial tenha ajudado você a aprender como incorporar um Mapa do Google em formulários de contato. Em seguida, você também pode querer ver alguns de nossos outros guias sobre o uso de mapas em seu site:

• Como Adicionar o Google Maps no WordPress (Do Jeito CERTO)
• Como Adicionar Localizador de Lojas com Google Maps no WordPress
• Como Incorporar Bing Maps no WordPress (Passo a Passo)
• Como Adicionar um Mapa Interativo no WordPress
• Melhores Plugins de Google Maps para WordPress (A Maioria é Gratuita)
• Melhores Plugins de Mapbox para WordPress
• Melhores Plugins de Geolocalização e GeoIP para WordPress

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.