Como adicionar o Google Maps ao formulário de contato do WordPress?

Se você está procurando a melhor maneira de adicionar o Google Maps a um formulário de contato do WordPress, este artigo é o guia perfeito para você.

Adicionar o Google Maps ao formulário de contato ajuda a rastrear a localização do usuário. E você pode usar esses dados para aumentar suas taxas de conversação, realizar campanhas de marketing eficazes, etc.

Portanto, neste guia, você aprenderá a adicionar o Google Maps aos formulários de contato do WordPress da maneira mais eficaz.

Mas antes disso, vamos entender por que você deve adicionar o Google Maps em um formulário de contato.

Por que adicionar o Google Maps em um formulário de contato?

Adicionar o Google Maps ao formulário de contato ajuda seu site a crescer de várias maneiras.

Em primeiro lugar, permite coletar dados sobre a localização do seu usuário. Assim, no futuro, você poderá segmentar clientes e usuários específicos enquanto divulga sua marca.

Além disso, saber a localização do seu usuário melhora sua segmentação por geolocalização e você pode mostrar a eles conteúdo personalizado. Isso, por sua vez, aumenta drasticamente seus leads, taxas de conversão e aumenta a receita do seu site.

Portanto, esses são alguns dos principais benefícios de adicionar o Google Maps ao formulário de contato. Agora, vamos saber a melhor maneira de fazê-lo.

Melhor maneira de adicionar o Google Maps ao formulário de contato do WordPress

Você pode adicionar o Google Maps ao seu formulário de contato usando um plug-in do Google Maps WordPress. Ou você pode usar um plug-in de formulário compatível com a integração do Google Maps. Existem inúmeros plugins disponíveis no mercado WordPress.

Mas, o que se destaca do resto é o Everest Forms, um poderoso plugin construtor de formulários do WordPress.

Por que o Everest Forms? Bem, é um plugin versátil que possui amplos recursos e funcionalidades. E é uma solução completa para construir qualquer formulário. Formulários de doação, formulários de candidatura a emprego, formulários de reserva de hotel; O que você disser!

Além disso, possui uma interface amigável. Portanto, você pode criar qualquer tipo de formulário com o método simples de arrastar e soltar.

Mais importante ainda, oferece o add-on Geolocation que permite coletar os dados de localização de seus usuários por meio de formulários. Você pode obter dados de seus usuários como País, Cidade, CEP e Latitude/Longitude com base em seu endereço IP.

Usando o mesmo complemento, você poderá adicionar um mapa ao seu formulário de contato no front-end.

E até agora, acumulou com sucesso a confiança de mais de 100.000 usuários. Então, definitivamente, é uma das melhores opções de plugin para adicionar o Google Maps a um formulário de contato do WordPress.

Adicionando o Google Maps aos formulários de contato do WordPress com Everest Forms

É muito fácil adicionar o Google Maps aos seus formulários de contato. Basta seguir as etapas que explicamos abaixo e você terá um formulário de contato do WordPress com o Google Maps em pouco tempo.

1. Instale e ative o Everest Forms Pro e o complemento de geolocalização

Antes de mais nada, vamos esclarecer que você precisa comprar um plugin premium, não importa qual plugin você use para adicionar o Google Maps ao seu formulário de contato.

Da mesma forma, você também precisa comprar o plano premium do Everest Forms para acessar esse recurso. Mas não se preocupe; os planos premium deste plugin têm um preço acessível.

Assim, você pode comprar seu plano premium visitando seu site oficial WPEverest.

Então , confira este artigo para instalar e ativar o Everest Forms Pro .

Agora, acreditamos que você ativou com sucesso o Everest Forms Pro. Então, para ativar o add-on Geolocation, vá para a seção Everest Forms >> Add-ons do seu painel do WordPress.

Ao rolar para baixo, você verá o complemento de geolocalização e, em seguida, clique na opção Instalar complemento.

Em seguida, pressione o botão Ativar .

2. Configure o complemento de geolocalização

Agora que você ativou com sucesso o add-on Geolocation, é hora de gerar uma chave de API (Application Programming Interface).

De maneira geral, uma API conecta um programa a outro e controla as requisições feitas entre esses programas. Por outro lado, as chaves de API conectam esses programas entre si para compartilhar dados e se conectar ao sistema.

I. Gerar chave de API do Google Console

Lembre-se de que você precisa de uma conta de faturamento para gerar chaves de API do Google Console para adicionar o Google Maps ao seu formulário de contato. Portanto, visite a página oficial de faturamento para obter um.

Agora, depois de comprar uma conta de faturamento, acesse o painel do Google Console. Em seguida, clique em Meu primeiro projeto .

Depois disso, selecione Novo Projeto .

Em seguida, pressione o menu de hambúrguer no lado esquerdo do seu painel e clique em APIs & Services .

Depois disso, ele abrirá a Biblioteca de APIs e, a partir daqui, pressione o botão + ATIVAR APIS E SERVIÇOS .

Depois de ativá-lo, você será direcionado para uma nova página onde precisará pesquisar a opção da API do Google Places .

Depois de encontrá-lo, clique nele e, em seguida, pressione o botão ENABLE .

Ao ativá-lo, clique no menu de hambúrguer que aparecerá na parte superior do seu lado esquerdo. Em seguida, navegue até APIs e serviços >> Credenciais.

Em seguida, clique na seção + CRIAR CREDENCIAIS . E a partir daqui, selecione a opção de chave de API para gerar uma chave de API.

Agora, a chave da API aparecerá em uma janela pop-up. Tudo que você precisa fazer é copiá-lo.

II. Adicione a chave de API às configurações de geolocalização no Everest Forms

Agora, volte ao seu painel do WordPress e adicione a API Key às configurações de geolocalização no Everest Forms.

Depois de copiar a chave, volte ao seu painel do WordPress. Navegue até Everest Forms >> Settings e clique na opção Geolocation na parte superior.

Aqui, você verá a opção Chave de API do Google Places na qual precisa colar sua chave de API, que você copiou anteriormente. Depois disso, pressione o botão Salvar alterações abaixo.

3. Crie um novo formulário de contato

Agora que você gerou uma API e a adicionou ao seu site, é hora de criar um formulário de contato.

Criar um formulário de contato com o Everest Forms é muito fácil. Primeiro, vá para o painel do WordPress e clique em Everest Forms >> Add New .

Everest Forms oferece uma série de modelos que você pode usar com um único clique de um botão ou construir seu formulário do zero.

Aqui, vamos construir o formulário do zero, e o nomeamos Contact Form .

Em seguida, você pode arrastar e soltar um campo em seu formulário de contato na seção Adicionar campos .

Além disso, com o Everest Forms, você pode alterar o Field Label do seu formulário , Meta Key , Description , etc. E para fazer isso, clique em qualquer campo do formulário e vá para Field Options e faça as alterações.

Se precisar de mais ajuda no processo de criação de formulários, consulte nosso artigo sobre como criar um formulário de contato usando o Everest Forms.

Após todas as personalizações necessárias, salve-as clicando no botão Salvar na parte superior. Você também pode visualizar a aparência do seu formulário no front-end.

4. Adicione o campo de endereço do Google Maps ao seu formulário

Primeiro, você precisa adicionar o campo Endereço em seu formulário de contato para adicionar o recurso de endereço do Google Maps em seu formulário de contato.

Portanto, vá para a seção Adicionar campos e role para baixo até Campos avançados .

E, em seguida, adicione o campo Endereço ao seu formulário de contato.

Depois disso, clique no campo Endereço à direita para abrir suas Opções avançadas no painel esquerdo.

Por padrão, o formulário exibe um endereço de texto. Como precisamos adicionar um mapa ao formulário em vez de um endereço de texto, altere a opção Estilo para Mapa no menu suspenso.

Isso adiciona o mapa e a Linha de Endereço 1 ao formulário de contato. Quando um usuário seleciona um local no mapa, o campo de endereço abaixo é preenchido automaticamente com o local selecionado.

É isso! Você adicionou com sucesso o Google Maps a um formulário de contato do WordPress usando o Everest Forms!

5. Publique o formulário do WordPress

Depois de concluir todas as etapas acima, é hora de publicar seu formulário de contato.

Basta copiar o código de acesso do seu formulário de contato na parte superior do construtor de formulários.

Em seguida, abra a postagem ou página em que deseja exibir seu formulário. Aqui, adicione um bloco Shortcode usando o insersor de bloco ( + ).

Em seguida, cole o shortcode no bloco.

Por fim, clique no botão Publicar na parte superior do canto esquerdo.

Alternativamente, para publicar seu formulário de contato, clique no botão de inserção de bloco ( + ) conforme mostrado na imagem. Digite Everest Forms na barra de pesquisa e clique no bloco quando ele aparecer nos resultados.

Depois disso, selecione o formulário de contato que você acabou de criar no menu suspenso e publique -o.

Com isso, seu formulário de contato com o Google Maps estará ativo em seu site.

Conclusão

Então, isso é tudo para o nosso artigo sobre como adicionar o Google Maps aos formulários de contato do WordPress. Como você pode ver, é super fácil com um plugin como o Everest Forms. No entanto, isso não é tudo.

Com o Everest Forms, você também pode adicionar campos de repetição a um formulário e alterar a cor do botão de envio. Você pode até enviar um e-mail de confirmação após o envio do formulário.

Mas isso é apenas a ponta do iceberg. Se você estiver interessado em aprender mais sobre este plugin, você pode visitar nosso blog e a página de documentação oficial.

Além disso, não se esqueça de nos seguir no Twitter e Facebook para receber atualizações sobre artigos mais úteis.