Como exibir um mapa com seu formulário de contato do WordPress

Deseja adicionar um mapa ao seu formulário de contato do WordPress para que os visitantes possam encontrar facilmente a localização da sua empresa? Adicionar um mapa ao seu formulário ajuda os visitantes a saber exatamente onde você está localizado antes de entrarem em contato.

Isso é especialmente útil se você tiver uma loja física, escritório ou área de atendimento que os clientes precisam visitar. Mas os mapas nos formulários de contato podem fazer mais do que apenas exibir sua localização.

Com a configuração correta, você também pode ajudar os visitantes a preencher os campos de endereço mais rapidamente com o preenchimento automático ou até mesmo exibir vários locais, caso tenha vários escritórios ou lojas.

Neste tutorial, vou mostrar duas maneiras de adicionar mapas aos seus formulários de contato no WordPress. Ambos os métodos utilizam o WPForms e seu complemento Geolocation. Vamos começar!

Crie seu formulário WordPress agora

Por que adicionar um mapa em um formulário de contato?

Claro, não é segredo que a maioria dos proprietários de pequenas empresas com sites sabe por que você precisa de um formulário de contato. Mas você pode estar se perguntando por que adicionaria um mapa a esse formulário de contato.

Se você administra uma empresa local, adicionar um mapa ao seu formulário de contato deixa imediatamente claro onde você está localizado. Isso pode ser uma ótima ideia por vários motivos:

• Se os clientes precisarem visitar sua empresa pessoalmente, um mapa elimina qualquer dúvida. Eles podem ver exatamente onde você está localizado antes de entrar em contato, o que reduz as perguntas do tipo “onde você está localizado?” em sua caixa de entrada.
• Quando você ativa o preenchimento automático de endereços, os visitantes podem digitar algumas letras e selecionar seu endereço completo em uma lista suspensa. Isso agiliza o preenchimento do formulário e reduz erros de digitação que poderiam causar problemas de comunicação.
• Tem mais de um escritório ou loja? Você pode incorporar um mapa interativo que mostra todos os seus locais e permite que os visitantes selecionem aquele que desejam contatar ou visitar. Isso encaminha as consultas para a equipe certa automaticamente.
• Um mapa na sua página de contato sinaliza que você é uma empresa real com presença física. Isso é especialmente importante para serviços locais, lojas de varejo ou escritórios profissionais.

A melhor parte? Em vez de ter que codificar um mapa no seu site ou pagar um desenvolvedor web, você pode fazer isso facilmente com o WPForms Pro. É um dos melhores plugins de mapas para WordPress!

Como adicionar um mapa ao seu formulário de contato do WordPress

Com o WPForms Pro e o complemento Geolocation, você pode adicionar recursos de mapa aos seus formulários de contato em pouco tempo. Siga estas instruções fáceis e passo a passo para começar:

Etapa 1: Faça o download do plug-in WPForms

O WPForms é um poderoso criador de formulários que facilita a criação de formulários de contato, formulários de registro e muito mais. Ele tem mais de 2.100 modelos de formulários WordPress que você pode usar.

O que mais gosto no WPForms é a forma como combina a criação de formulários com ferramentas de geolocalização integradas. Não é necessário juntar vários plugins ou escrever código personalizado para adicionar mapas aos 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.

Para começar, adquira uma licença WPForms Pro. Em seguida, instale e ative o WPForms no seu site. Se precisar de ajuda com a instalação, siga este guia passo a passo sobre como instalar um plugin do WordPress.

Faça o upgrade para o WPForms Pro agora! 🙂

Passo 2: Instalar e 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.

No painel do WordPress, acesse WPForms » Complementos. Use a barra de pesquisa para localizar o complemento Geolocalização e clique em Instalar complemento. Após a instalação (geralmente leva apenas alguns segundos), clique em Ativar.

Com o complemento ativado, agora você tem acesso a três maneiras de usar mapas em seus formulários:

• Exiba os locais da sua empresa: mostre aos visitantes exatamente onde sua empresa está localizada com um mapa incorporado ao seu formulário. Isso funciona muito bem para empresas locais, escritórios ou lojas onde os clientes visitam pessoalmente.
• Ativar preenchimento automático de endereço: os visitantes podem preencher os campos de endereço mais rapidamente com sugestões de preenchimento automático. À medida que digitam, o endereço completo aparece em um menu suspenso, reduzindo erros e acelerando o preenchimento do formulário.

Sei que parece técnico, mas o WPForms tem um guia passo a passo que torna tudo muito mais fácil do que parece. Para obter instruções completas de configuração, consulte a documentação do complemento Geolocation.

Depois de adicionar sua chave API e salvar as configurações, está tudo pronto. O complemento de geolocalização está pronto para uso e você pode começar a adicionar mapas interativos aos seus formulários.

Passo 3: Crie seu formulário de contato

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 forem necessários. O criador de formulários usa o recurso arrastar e soltar, portanto, reorganizar os campos é simples.

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.

Experimente o WPForms AI Builder! 🙂

Etapa 4: Adicione um mapa ao seu formulário de contato

Agora vem a parte importante de adicionar um mapa ao seu formulário de contato. O WPForms oferece duas maneiras de fazer isso, dependendo do que você deseja realizar:

• Opção 1: Exibir a localização da sua empresa (campo Mapa)
• Opção 2: Adicionar preenchimento automático de endereço para visitantes (texto de linha única ou campo de endereço)

Vamos examinar ambas as opções para que você possa escolher a que melhor atende às suas necessidades.

Opção 1: Exiba sua localização com o campo Mapa

Use esta opção se desejar mostrar aos visitantes onde sua empresa está localizada. Isso incorpora um mapa interativo diretamente no seu formulário de contato.

No criador de formulários, role o painel esquerdo até Fancy Fields e você verá o campo Mapa listado lá. Vá em frente e arraste-o para a visualização do seu formulário à direita.

Onde colocá-lo depende da sua preferência. Algumas pessoas gostam de colocá-lo na parte superior para que seja imediatamente visível. Outras preferem colocá-lo mais abaixo. Escolha o que parecer mais natural para o layout do seu formulário.

Após adicionar o campo Mapa, selecione-o para exibir suas opções de configuração à esquerda. Localize a seção Locais, pois é aqui que você inserirá os endereços da sua empresa.

Clique na caixa Endereço e comece a digitar sua localização. Você verá sugestões de preenchimento automático à medida que digita. Escolha a opção correta para definir as coordenadas precisas no mapa.

Agora, adicione um nome para este local. Use algo descritivo, como “Filial Oeste” ou “Sede Corporativa”. Os visitantes verão esse rótulo quando interagirem com o marcador, portanto, a clareza é importante.

Há também um campo Descrição, caso você queira adicionar informações complementares, como horário de funcionamento, detalhes de contato específicos ou notas específicas sobre a localização.

Opção 2: Adicionar preenchimento automático de endereço para visitantes

Use esta opção se precisar que os visitantes preencham um campo de endereço no seu formulário de contato (como para solicitações de orçamento, reservas de serviços ou consultas de envio). O mapa ajuda-os a inserir o endereço com precisão.

No criador de formulários, adicione um campo de texto de linha única ou um campo de endereço ao seu formulário. Você pode clicar no nome do campo ou arrastá-lo para o seu formulário.

Clique no campo que você acabou de adicionar para abrir suas configurações. Altere o rótulo para “Seu endereço” ou algo semelhante. Em seguida, clique na guia Avançado nas configurações do campo.

Role para baixo e ative a opção Ativar preenchimento automático de endereço. Isso permite que os visitantes comecem a digitar seu endereço e o selecionem em um menu suspenso.

Em seguida, ative a opção Exibir mapa. Você pode escolher se o mapa aparece acima ou abaixo do campo de entrada usando o menu suspenso.

Agora, quando os visitantes preencherem este campo, verão um mapa que é atualizado à medida que digitam. Também podem arrastar o marcador do mapa para ajustar a sua localização exata.

Esta opção funciona muito bem para empresas de serviços, formulários de entrega ou qualquer situação em que você precise do endereço do visitante. Depois de adicionar seu mapa usando qualquer uma das opções, clique em Salvar no canto superior direito.

Etapa 5: Publique seu mapa do formulário de contato

Pronto para publicar seu formulário de contato com um mapa? Com o plugin WPForms Pro, é muito fácil incorporar seu formulário ao seu site. Com o formulário ainda aberto no construtor, clique no botão Incorporar no canto superior direito.

Aqui, você pode selecionar qualquer página do WordPress que desejar, seja uma página existente ou uma nova página. Neste tutorial, vou clicar em Criar nova página.

Dê um título à sua página. Algo como “Entre em contato conosco” ou “Fale conosco”, o que você quiser e que atenda às suas necessidades, e clique no botão Vamos lá!

O WPForms insere automaticamente o seu formulário na página. Você verá o seu formulário de contato com o mapa já posicionado. A partir daqui, você pode adicionar um texto introdutório acima do formulário, ajustar o layout da página ou estilizar um pouco o seu formulário.

Para ajustar a aparência do seu formulário de contato, clique em qualquer lugar ao redor do formulário no editor de páginas. Isso abre o painel de estilo no lado direito, onde você pode personalizar a aparência do formulário.

Para uma personalização rápida, escolha um design pré-criado no menu suspenso Tema do formulário. Opções como Moderno, Clássico ou Minimalista conferem ao seu formulário uma aparência profissional instantânea que combina com o design do seu site.

Se você deseja ter mais controle, o painel também permite personalizar elementos individuais, como cores, fontes, espaçamento e estilos de botões.

Quando tudo estiver correto e o mapa exibir sua localização corretamente, clique em Publicar. Seu formulário de contato com mapa agora está ativo. Veja como ele ficará:

Perguntas frequentes sobre como adicionar um formulário de contato com mapa no WordPress

Tem dúvidas sobre como adicionar mapas aos seus formulários de contato do WordPress? Aqui estão as respostas para as perguntas mais comuns que recebemos:

Preciso de uma chave API do Google Maps para usar mapas no WPForms?

Sim, você precisa de uma chave API do Google Maps ou uma chave API do Mapbox para usar os recursos de mapa no WPForms. O complemento Geolocalização requer uma dessas chaves para se conectar ao serviço de mapeamento.

Não se preocupe! O WPForms fornece instruções passo a passo para obter sua chave API na documentação do complemento Geolocalização. A configuração geralmente leva cerca de 10 minutos.

Qual é a diferença entre o campo Mapa e o preenchimento automático de endereços com um mapa?

• O campo Mapa exibe a(s) localização(ões) da sua empresa aos visitantes. Ele mostra a eles onde você está. Use-o quando quiser que as pessoas vejam seu escritório, loja ou área de atendimento no seu formulário de contato.
• O preenchimento automático do endereço com um mapa ajuda os visitantes a preencherem o seu endereço mais rapidamente. À medida que digitam, o sistema sugere o seu endereço e o mostra num mapa. Utilize esta função quando precisar de recolher a localização do visitante.

Posso mostrar vários locais comerciais em um único mapa?

Sim. O campo Mapa permite adicionar quantos locais forem necessários, como vários escritórios, lojas, filiais ou centros de serviços.

Cada local recebe seu próprio marcador no mapa, e você pode personalizar os ícones e as cores dos marcadores. Os visitantes podem clicar em cada marcador para ver o nome e os detalhes do local.

Para obter instruções passo a passo, consulte a documentação do campo Mapa.

O mapa funcionará em dispositivos móveis?

Com certeza. Os mapas criados com o WPForms são totalmente responsivos e funcionam perfeitamente em smartphones e tablets.

Os visitantes podem ampliar, deslocar e interagir com o mapa da mesma forma que fariam em um computador. O recurso de preenchimento automático de endereços também funciona perfeitamente em dispositivos móveis.

Adicionar um mapa torna meu formulário de contato mais lento?

Não. O WPForms carrega os mapas de forma eficiente, para que não tornem sua página mais lenta. O mapa só é carregado quando necessário e não afeta o desempenho do seu formulário.

O WPForms é otimizado para manter seu site rápido, mesmo com recursos interativos como mapas.

Posso personalizar a aparência do mapa no meu formulário?

Sim. Com o campo Mapa, você pode personalizar ícones e cores de marcadores para combinar com sua marca.

Você também pode controlar quais controles do mapa aparecem (zoom, tela cheia, tipo de mapa, etc.) e ajustar o nível de zoom inicial.

Para mapas de preenchimento automático de endereços, você pode escolher se o mapa aparece acima ou abaixo do campo de entrada.

Poderei ver em um mapa de onde vêm os envios de formulários?

Sim. Quando o complemento de geolocalização está ativo, o WPForms captura automaticamente os dados de localização (com a permissão do visitante) para cada envio de formulário.

Você pode visualizar esses dados em um mapa no painel do WordPress ao consultar entradas individuais do formulário. Isso ajuda a entender de onde vêm seus leads e clientes geograficamente.

A seguir, confira outros recursos do WPForms Pro

Adquira hoje mesmo o WPForms Pro para acessar o complemento Geolocalização, que permite adicionar esses mapas incríveis.

Você também terá acesso a uma série de outros recursos úteis.

• Um construtor fácil de usar - Crie seus próprios formulários em minutos sem escrever uma única linha de código.
• Pesquisas - Colete dados por meio de pesquisas e enquetes e veja-os em belos relatórios. Também é possível adicionar um recurso Save and Continue a pesquisas longas para que os usuários possam pausar e concluir os formulários posteriormente.
• Páginas de formulário - Faça com que mais pessoas concluam seus formulários criando páginas de formulário sem distrações com apenas um clique.
• Formulários de pedidos - Integre o Stripe (todos os planos), Square (Pro) e PayPal (Pro) diretamente em seus formulários e aceite dinheiro on-line.
• Relatórios de jornada do usuário - Veja onde as pessoas estavam em seu site antes de preencherem o formulário.
• Formulários seguros - Proteja os formulários com opções anti-spam, como captcha personalizado, hCaptcha ou Google reCAPTCHA v2 ou v3.
• Formulários de conversação - Veja as taxas de conversão dispararem com formulários altamente envolventes e de aparência moderna.
• Mais de 2.100 modelos – Nunca mais crie um formulário do zero com modelos pré-construídos dos tipos de formulários mais populares que existem.
• Suporte Premium - Acesse uma equipe amigável e experiente que o ajudará a orientá-lo na direção certa se precisar de ajuda com os formulários do seu site.
• ...e muito mais.

De fato, se você analisar o WPForms Lite vs. Pro, verá que há vários motivos pelos quais o Pro é tão popular.

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.