Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como incorporar um mapa do Google em formulários de contato (com pin de mapa)

Imagine que um visitante chega à sua página de contato e encontra o endereço dele já preenchido no formulário, com um alfinete marcando a localização dele em um mapa. Essa é uma excelente experiência do usuário.

Adicionar um mapa do Google com um pin de localização ao seu formulário de contato do WordPress simplifica o preenchimento, o que melhora a taxa de conclusão do formulário e incentiva os visitantes a entrar em contato.

Este artigo o guiará passo a passo na incorporação de um mapa do Google com um pin de localização diretamente em seus formulários de contato, sem necessidade de codificação.

How to Embed a Google Map in Contact Forms (With Map Pin)

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

Quando você criou o seu site WordPress, é provável que tenha adicionado um formulário de contato para que os visitantes possam facilmente entrar em contato com você sobre seus produtos e serviços.

E se a sua empresa tiver um local físico, provavelmente você também adicionou um Google Map do seu próprio local para incentivar as pessoas a visitarem sua loja.

O que muitos proprietários de empresas não sabem é que é possível usar a geolocalização para preencher automaticamente o campo de endereço no formulário de contato e exibir a localização do usuário em um mapa. Isso melhora a experiência geral do usuário e ajuda a reduzir o abandono do formulário.

Conhecer a localização dos seus usuários também permite usar a segmentação por geolocalização para mostrar conteúdo personalizado e aumentar as taxas de conversão.

Dito isso, vamos dar uma olhada em como incorporar um mapa do Google em formulários de contato.

Tutorial em vídeo

Subscribe to WPBeginner

Se você preferir instruções por escrito, continue lendo.

Como incorporar um mapa do Google em um formulário de contato

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

Há uma versão gratuita do WPForms disponível com todos os recursos necessários para criar um formulário de contato básico. Para este tutorial, no entanto, usaremos o WPForms Pro, pois ele inclui o complemento Google Map.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in WPForms. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in 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 área da sua conta do WPForms. Certifique-se de clicar no botão “Verificar chave” para ativar sua licença.

Visit the WPForms » Settings Page to Enter Your License Key

Em seguida, você precisa navegar até WPForms ” Addons e encontrar o Geolocation Addon. Você pode usar a opção de pesquisa na parte superior da tela ou simplesmente percorrer os addons disponíveis.

Depois de encontrá-lo, você deve instalar o complemento clicando no botão “Install Addon”.

Navigate to WPForms » Addons and Install the Geolocation Addon

Agora que o complemento Geolocation está ativado, você precisará definir suas configurações. Para isso, navegue até WPForms ” Settings e clique na guia “Geolocation” (Geolocalização).

Nessa página, você precisa selecionar um provedor de geolocalização. Para este artigo, escolheremos a API do Google Places.

Select a Geolocation Provider

Você também deve clicar na caixa de seleção “Current Location” (Localização atual). Isso detectará e preencherá automaticamente o endereço quando os usuários preencherem o formulário de contato, economizando tempo e aumentando a precisão.

Em seguida, você precisa rolar para baixo até as configurações da API do Google Places. Você será solicitado a preencher sua chave de API do Google. Você pode obter sua chave do Google e colá-la no campo de entrada. Mostraremos como fazer isso na próxima seção.

Scroll Down to the Google Places API Settings

Geração de 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.

Você será solicitado a selecionar seu país em um menu suspenso e concordar com os termos de serviço. Em alguns países, também pode ser oferecida a chance de se inscrever em uma lista de correspondência.

Obtain an API Key for Google Places From the Google Cloud Console Website

Quando estiver pronto para passar para a próxima etapa, clique em “Agree and Continue” (Concordar e continuar).

Em seguida, você precisará selecionar um projeto para a chave de API. Basta clicar em “Select a project” e clicar no projeto que deseja usar na lista.

Select a Project or Create a New One

Se você nunca criou um projeto antes, ou se esse é um novo site que ainda não foi adicionado ao Google, clique em “Novo projeto” para configurá-lo.

Observação: o Google exigirá que você ative o faturamento desse projeto para poder usar a API do Google Places. Eles oferecem os primeiros US$ 300 gratuitamente, o que é suficiente para cobrir uma simples incorporação de mapa como a que estamos criando neste tutorial. Sites com tráfego menor não precisarão pagar nada e pedirão sua permissão para fazer upgrade antes de cobrar qualquer taxa.

Agora você deve estar na página “APIs e serviços”, onde poderá ativar as APIs necessárias para exibir o Google Maps no seu site WordPress.

Você precisará clicar no botão “+ Enable APIs and Services” (+ Ativar APIs e serviços) na parte superior da página.

Click the 'Enable APIs and Services' Button

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

Você pode encontrá-los usando a função de pesquisa na parte superior da página ou clicando no link “View All” (Exibir tudo) ao lado da seção Maps.

You Need to Enable Three Mapping APIs

Primeiro, você precisa localizar e ativar a API do Places. Depois de localizá-la, você precisará clicar nela. Na próxima página, você deve clicar no botão “Enable” (Ativar).

Depois disso, você deve fazer o mesmo com a API JavaScript de mapas e a API de geocodificação.

Enable the Places API

Agora que você ativou as três APIs, pode criar uma chave de API.

No menu à esquerda, você precisa navegar até APIs & Services ” Credentials.

A partir daí, você poderá clicar no botão “+ Create Credentials” (+ Criar credenciais) na parte superior da tela e, em seguida, selecionar a opção “API key” (Chave de API).

Click the ‘+ Create Credentials’ Button

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

Mais adiante neste tutorial, você precisará copiar essa chave nas configurações do WPForm. Por enquanto, vamos dar uma olhada em como colocar algumas restrições no uso da chave da API.

Your API Key Will Be Created and Displayed on a Popup Window

Restringindo sua chave de API do Google Places

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

Para fazer isso, você precisa clicar no link “Restrict Key” (Restringir chave) na parte inferior do pop-up “API key created” (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 aplicativos”.

Nessa seção, você deve clicar na opção “Referenciadores HTTP (sites)”. Assim, a chave será usada somente em sites.

Restrict to HTTP Referrers (Web Sites)

Em seguida, você deve certificar-se de que ele seja usado somente em seu próprio site. Para fazer isso, role para baixo até a seção “Restrições do site” e clique no botão “Adicionar um item”.

Agora, você deve digitar o nome de domínio do seu site no campo “New item” usando o padrão *example.com/*.

Type Your Website Domain Into the ‘New Item’ Field Using the Pattern *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 forem necessários.

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 no qual você deverá marcar as caixas “Geocaching API”, “Maps JavaScript API” e “Places API”.

Restrict the API Key to Specific APIs

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.

Click the ‘Save’ Button to Activate the Restrictions You Have Chosen

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

Como adicionar a chave da API do Google às configurações do WPForms

Agora você verá a chave da API listada com quaisquer outras disponíveis. Você deve clicar no ícone Copiar para poder adicionar a chave à página de configurações de geolocalização do WPForms.

Click the Copy Icon and Add the Key to WPForms

Observe que, se você precisar alterar alguma configuração ou restrição da API, poderá clicar no ícone Edit (Editar) à direita.

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

Uma vez lá, cole a chave no campo API do Google Places nas configurações do WPForms. Depois de fazer isso, certifique-se de clicar no botão “Salvar configurações”.

Scroll Down to the Google Places API Settings

Observação: o Google Places exige que você tenha um certificado SSL para o seu site. Para saber como obter um, confira nosso guia para iniciantes sobre como obter um certificado SSL gratuito.

Como criar um formulário de contato com o mapa do Google incorporado no WordPress

Agora que você configurou o WPForms e o Google Places, está pronto para criar um formulário de contato no WordPress. Para começar, siga 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 Address ou um campo Single Line Text. Para este tutorial, usaremos um campo de texto de linha única.

Basta arrastar o bloco Single Line Text para o formulário.

Drag the Single Line Text Block Onto the Form

Em seguida, personalizaremos as configurações do campo. Para fazer isso, você precisa clicar no campo para exibir as configurações de Single Line Text.

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.

Rename the Field's Label to 'Address'

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 Advanced (Avançado).

Uma vez lá, você deve procurar a opção “Enable Address Autocomplete” (Ativar preenchimento automático de endereços) na parte inferior das configurações e alterná-la para a posição “On” (Ativado). Em seguida, você verá outra opção, “Exibir mapa”, que também deve ser ativada. Você pode optar por exibir o mapa acima ou abaixo do campo.

Toggle the ‘Enable Address Autocomplete’ Option On

Adição do 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 um formulário existente ou criar uma nova página.

Click the 'Create New Page' Button

Para este tutorial, clicaremos no botão “Create New Page” (Criar nova página).

Em seguida, você deve dar um nome à página e clicar no botão “Let’s Go!”.

Give the Page a Name and Click the ‘Let’s Go!’ Button

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

Tudo o que você precisa fazer é clicar no botão “Publish” (Publicar) para colocar o formulário em funcionamento.

Click the 'Publish' Button to Push the Page Live

Exibição do mapa do Google no formulário de contato

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

The User Will Need to Give Permission for Your Website to Access Their Location

Se o usuário clicar no botão “Allow” (Permitir), sua localização atual será inserida no campo de endereço e um pino dessa localização será adicionado ao mapa.

Esse recurso de preenchimento automático economizará o tempo de seus visitantes, tornando mais rápido e fácil digitar seus endereços.

Autocomplete Makes Typing an Address Faster and More Accurate

Se for necessário alterar o endereço, basta digitar um novo endereço ou arrastar o pino para um local diferente no mapa.

Como visualizar os dados de localização do usuário em um formulário

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

Você precisará navegar até WPForms ” Entradas e clicar no seu formulário de contato.

Navigate to WPForms » Entries Then Click the Contact Form

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

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

Click the ‘View’ Link to View an Entry

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

Isso inclui um pino no Google Maps, a localização, o código postal e o país do usuário, bem como sua latitude e longitude aproximadas.

You Will See a Pin on Google Maps With Their Location

Obviamente, se o usuário não tiver concedido permissão para que o formulário saiba sua localização, nenhum dado de localização será exibido.

Isso é tudo. Você adicionou com sucesso um mapa do Google ao seu formulário de contato. Você também pode usar o WPForms para criar pesquisas no WordPress, criar um formulário de pagamento para aceitar pagamentos on-line e muito mais.

Nossos melhores guias sobre o uso de mapas no WordPress

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

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

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

2 ComentáriosDeixe uma resposta

  1. Jiří Vaněk

    I use WP Forms and I’m considering integrating maps into the contact form to make the location visible at first glance. I must admit that before seeing this article, I didn’t even know that WP Forms could do this.

    • WPBeginner Support

      Glad we could share the functionality :)

      Administrador

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.