Resumo de IA
Quer adicionar um mapa ao seu formulário de contato do WordPress para que os visitantes possam encontrar facilmente a localização do seu negócio? Adicionar um mapa ao seu formulário ajuda os visitantes a saberem exatamente onde você está localizado antes de entrar em contato.
É especialmente útil se tiver uma loja física, escritório ou área de serviço que os clientes precisam de visitar. Mas os mapas nos formulários de contacto podem fazer mais do que apenas exibir a sua localização.
Com a configuração correta, também pode ajudar os visitantes a preencherem os campos de endereço mais rapidamente com preenchimento automático, ou mesmo exibir várias localizações se tiver vários escritórios ou lojas.
Neste tutorial, mostrarei duas formas de adicionar mapas aos seus formulários de contacto no WordPress. Ambos os métodos utilizam o WPForms e o seu complemento Geolocation. Vamos começar!
Crie o Seu Formulário WordPress Agora
Porquê Adicionar um Mapa a um Formulário de Contato?
Claro, não é segredo que a maioria dos proprietários de pequenas empresas com websites sabem porque precisa de um formulário de contato. Mas, pode estar a perguntar-se porque adicionaria um mapa a esse formulário de contato.
Se tem um negócio local, adicionar um mapa ao seu formulário de contato torna a sua localização instantaneamente clara. Esta pode ser uma ótima ideia por várias razões:
- Se os clientes precisam de visitar o seu negócio pessoalmente, um mapa elimina qualquer adivinhação. Eles podem ver exatamente onde você está localizado antes de entrar em contato, o que reduz as perguntas "onde você está localizado?" na sua caixa de entrada.
- Quando ativa a autocompletação de endereços, os visitantes podem digitar algumas letras e selecionar o seu endereço completo a partir de uma lista suspensa. Isto acelera o preenchimento do formulário e reduz erros de digitação que poderiam causar problemas de comunicação.
- Tem mais do que um escritório ou loja? Pode incorporar um mapa interativo que mostra todas as suas localizações e permite aos visitantes selecionar qual delas querem contatar ou visitar. Isto encaminha as consultas para a equipa certa automaticamente.
- Um mapa na sua página de contato sinaliza que você é um negócio real com uma presença física. Isto é especialmente importante para serviços locais, lojas de varejo ou escritórios profissionais.
A melhor parte? Em vez de ter de codificar um mapa no seu website sozinho ou pagar a um desenvolvedor web, pode fazê-lo facilmente com o WPForms Pro. É um dos melhores plugins de mapa para WordPress!
Como Adicionar um Mapa ao Seu Formulário de Contato do WordPress
Com o WPForms Pro e o complemento Geolocation, pode adicionar funcionalidades de mapa aos seus formulários de contato num instante. Siga estas instruções fáceis, passo a passo, para começar:
Passo 1: Descarregar o Plugin WPForms
WPForms é um construtor de formulários poderoso que facilita a criação de formulários de contato, formulários de registro e muito mais. Tem mais de 2.100+ modelos de formulários WordPress que pode usar.
O que mais gosto no WPForms é como ele combina a construção de formulários com ferramentas de geolocalização integradas. Você não precisa de juntar vários plugins ou escrever código personalizado para adicionar mapas aos seus formulários.
Para adicionar mapas aos seus formulários de contacto, precisará do WPForms Pro, que inclui o complemento Geolocation e todas as funcionalidades de mapa que abordaremos neste tutorial.
Para começar, compre uma licença WPForms Pro. Em seguida, instale e ative o WPForms no seu website. Se precisar de ajuda com a instalação, siga este guia passo a passo sobre como instalar um plugin do WordPress.
Atualize para o WPForms Pro Agora! :)
Passo 2: Instalar e Ativar o Complemento Geolocation
Agora que o WPForms Pro está instalado, você precisa de ativar o complemento Geolocation. É isso que alimenta todas as funcionalidades de mapa nos seus formulários de contato.
No seu painel WordPress, vá para WPForms » Addons. Use a barra de pesquisa para localizar o addon Geolocation e, em seguida, clique em Instalar Addon. Assim que instalar (geralmente apenas alguns segundos), clique em Ativar.
Com o addon ativado, tem agora acesso a três formas de usar mapas nos seus formulários:
- Exibir as Localizações do Seu Negócio: Mostre aos visitantes exatamente onde o seu negócio está localizado com um mapa incorporado no seu formulário. Isto funciona muito bem para negócios locais, escritórios ou lojas onde os clientes visitam pessoalmente.
- Ativar Autocompletar Endereço: Os visitantes podem preencher campos de endereço mais rapidamente com sugestões de autocompletar. À medida que digitam, o endereço completo aparece num menu suspenso, reduzindo erros e acelerando o preenchimento do formulário.
Sei que isto soa técnico, mas o WPForms tem um guia passo a passo que o torna muito mais fácil do que parece. Para instruções completas de configuração, consulte a documentação do Addon de Geolocalização.
Depois de adicionar a sua chave de API e guardar as definições, está tudo pronto. O Addon de Geolocalização está agora pronto a usar, e pode começar a adicionar mapas interativos aos seus formulários.
Passo 3: Criar o Seu Formulário de Contato
Com o suplemento de Geolocalização configurado, está pronto para construir o seu formulário de contacto. Isto demora cerca de 5 minutos. Aceda a WPForms » Adicionar Novo no seu painel WordPress para abrir o construtor de formulários.
Dê um nome ao seu formulário no campo Nomear Formulário. Algo como “Entrar em Contato” funciona bem. Verá aqui algumas opções. Se quiser poupar tempo, pode escolher entre os nossos mais de 2.100 modelos de formulários WordPress.
Recomendo escolher o Modelo de Formulário de Contato Simples. Isto dá-lhe um formulário de contato pronto a usar com os campos essenciais já adicionados.
O modelo inclui um campo de Nome, um campo de Email e um campo de Comentário ou Mensagem. Pode personalizar estes campos, adicionar novos ou remover os que não necessita. O construtor de formulários usa arrastar e soltar, pelo que reorganizar campos é simples.
Agora, provavelmente há mais algumas configurações de formulário que pode querer configurar, como notificações e confirmações. Se for o caso (e recomendo vivamente), consulte o nosso guia detalhado sobre como criar o seu primeiro formulário.
Dica Pro
Outra opção, se não quiser configurar manualmente todos os campos mas tiver requisitos personalizados, é deixar o Construtor de Formulários IA do WPForms tratar disso por si.
Basta pairar o rato sobre o botão roxo Gerar com IA e clicar em Gerar Formulário. Irá para o ecrã do construtor de formulários IA. É aqui que descreve que tipo de formulário pretende.
Pode digitar o seu próprio prompt ou escolher entre as sugestões à esquerda. Assim que clicar em gerar, a IA demora alguns segundos a construir o seu formulário.
Experimente o Construtor de IA do WPForms! :)
Passo 4: Adicionar um Mapa ao Seu Formulário de Contato
Agora vem a parte importante de adicionar um mapa ao seu formulário de contacto. O WPForms oferece duas formas de o fazer, dependendo do que pretende alcançar:
- Opção 1: Exibir a Localização do Seu Negócio (Campo de Mapa)
- Opção 2: Adicionar Autocompletar Endereço para Visitantes (Campo de Texto de Linha Única ou Endereço)
Vamos percorrer ambas as opções para que possa escolher a que melhor se adapta às suas necessidades.
Opção 1: Exibir a Sua Localização com o Campo de Mapa
Use esta opção se quiser mostrar aos visitantes onde o seu negócio está localizado. Isto incorpora um mapa interativo diretamente no seu formulário de contacto.
No construtor de formulários, percorra o painel esquerdo até Campos Elaborados e verá o campo Mapa listado lá. Arraste-o para a pré-visualização do seu formulário à direita.
Onde o coloca depende da sua preferência. Algumas pessoas gostam de o colocar no topo para que seja imediatamente visível. Outras preferem-no 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 as suas opções de configuração à esquerda. Encontre a secção Localizações, pois é aqui que irá introduzir os endereços do seu negócio.
Clique na caixa Endereço e comece a introduzir a sua localização. Notará que sugestões de autocompletar aparecem à medida que digita. Escolha a correspondência correta para fixar as coordenadas precisas do mapa.
Agora adicione um Nome para este local. Use algo descritivo como “Sucursal Oeste” ou “Sede Corporativa”. Os visitantes verão este rótulo quando interagirem com o marcador, pelo que a clareza é importante.
Existe também um campo de Descrição se desejar adicionar informações suplementares como horários de funcionamento, detalhes de contacto específicos ou notas específicas do local.
Pronto para adicionar outra localização?
Clique no bot ildeo mais (+) abaixo da sua entrada atual. Um novo conjunto de campos de entrada aparece. Siga os mesmos passos: insira o endere ildeo, aguarde a autocompleta extsuperscript{c} extsuperscript{ extasciitilde}ao, selecione a correspond extsuperscript{e}ncia, nomeie-o e, opcionalmente, descreva-o.
Quando terminar, o mapa preenche automaticamente com marcadores para cada endere ildeo que voc extsuperscript{e} inseriu. Os visitantes podem interagir com esses marcadores para ver os nomes e descri extsuperscript{c} extsuperscript{ extasciitilde}oes que voc extsuperscript{e} forneceu.
Agora que configurou o seu mapa com v extsuperscript{a}rias localiza extsuperscript{c} extsuperscript{ extasciitilde}oes, pode optar por exibir as localiza extsuperscript{c} extsuperscript{ extasciitilde}oes ou at extsuperscript{e} mesmo torn extsuperscript{a}-las selecion extsuperscript{a}veis (principalmente ideal para formul extsuperscript{a}rios de reserva).
No painel de op extsuperscript{c} extsuperscript{ extasciitilde}oes do campo Mapa, procure o interruptor Mostrar Lista de Localiza extsuperscript{c} extsuperscript{ extasciitilde}oes e ative-o. Isto exibe todos os endere extsuperscript{c}os das suas localiza extsuperscript{c} extsuperscript{ extasciitilde}oes numa lista organizada logo abaixo do pr extsuperscript{o}prio mapa.
Notar extsuperscript{a} imediatamente que algo extsuperscript{u}til aparece abaixo disso: a op extsuperscript{c} extsuperscript{ extasciitilde}ao Permitir Sele extsuperscript{c} extsuperscript{ extasciitilde}ao de Localiza extsuperscript{c} extsuperscript{ extasciitilde}ao. Os visitantes podem agora clicar em qualquer local para o selecionar como o seu local de reserva preferido.
Op extsuperscript{c} extsuperscript{ extasciitilde}ao 2: Adicionar Autocompleta extsuperscript{c} extsuperscript{ extasciitilde}ao de Endere extsuperscript{c}os para Visitantes
Use esta op extsuperscript{c} extsuperscript{ extasciitilde}ao se precisar que os visitantes preencham um campo de endere extsuperscript{c}o no seu formul extsuperscript{a}rio de contacto (como para pedidos de or extsuperscript{c}amento, reservas de servi extsuperscript{c}os ou consultas de envio). O mapa ajuda-os a inserir o seu endere extsuperscript{c}o com precis extsuperscript{a}o.
No construtor de formul extsuperscript{a}rios, adicione um campo de Texto de Linha extsuperscript{U}nica ou um campo de Endere extsuperscript{c}o ao seu formul extsuperscript{a}rio. Pode clicar no nome do campo ou arrast extsuperscript{a}-lo para o seu formul extsuperscript{a}rio.
Clique no campo que acabou de adicionar para abrir as suas defini extsuperscript{c} extsuperscript{ extasciitilde}oes. Altere o r extsuperscript{o}tulo para “O Seu Endere extsuperscript{c}o” ou algo semelhante. Em seguida, clique no separador Avan extsuperscript{c}ado nas defini extsuperscript{c} extsuperscript{ extasciitilde}oes do campo.
Desloque-se para baixo e ative Ativar Autocompleta extsuperscript{c} extsuperscript{ extasciitilde}ao de Endere extsuperscript{c}os. Isto permite que os visitantes comecem a digitar o seu endere extsuperscript{c}o e o selecionem a partir de uma lista suspensa.
Em seguida, ative Exibir Mapa. 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 extsuperscript{a}o um mapa que se atualiza extsuperscript{a} medida que digitam. Tamb extsuperscript{e}m podem arrastar o marcador do mapa para ajustar a sua localiza extsuperscript{c} extsuperscript{ extasciitilde}ao exata.
Esta op extsuperscript{c} extsuperscript{ extasciitilde}ao funciona muito bem para empresas de servi extsuperscript{c}os, formul extsuperscript{a}rios de entrega ou qualquer situa extsuperscript{c} extsuperscript{ extasciitilde}ao em que precise do endere extsuperscript{c}o do visitante. Depois de adicionar o seu mapa usando qualquer uma das op extsuperscript{c} extsuperscript{ extasciitilde}oes, clique em Guardar no canto superior direito.
Passo 5: Publicar o Mapa do Seu Formulário de Contato
Pronto para publicar o seu formul extsuperscript{a}rio de contacto com um mapa? Com o seu plugin WPForms Pro, extsuperscript{e} f extsuperscript{a}cil incorporar o seu formul extsuperscript{a}rio no seu site. Com o formul extsuperscript{a}rio ainda aberto no construtor, clique no bot extsuperscript{a}o Incorporar no canto superior direito.
Aqui, pode selecionar qualquer p extsuperscript{a}gina do WordPress que desejar, seja uma p extsuperscript{a}gina existente ou uma nova p extsuperscript{a}gina. Neste tutorial, clicarei em Criar Nova P extsuperscript{a}gina.
D extsuperscript{e} um t extsuperscript{ exttextasciitilde}tulo extsuperscript{a} sua p extsuperscript{a}gina. algo como “Contacte-nos” ou “Entre em Contacto”, o que quiser e se adequar extsuperscript{a}s suas necessidades e, em seguida, clique no bot extsuperscript{a}o Vamos a Isso!.
O WPForms insere automaticamente o seu formul extsuperscript{a}rio na p extsuperscript{a}gina. Ver extsuperscript{a} o seu formul extsuperscript{a}rio de contacto com o mapa j extsuperscript{a} no lugar. A partir daqui, pode adicionar texto introdut extsuperscript{o}rio acima do formul extsuperscript{a}rio, ajustar o layout da p extsuperscript{a}gina ou estilizar um pouco o seu formul extsuperscript{a}rio.
Para ajustar a aparência do seu formulário de contato, clique em qualquer lugar à volta do formulário no editor de páginas. Isto abre o painel de estilo no lado direito, onde pode personalizar a aparência do formulário.
Para um estilo rápido, escolha um design pré-definido no menu suspenso Tema do Formulário. Opções como Moderno, Clássico ou Minimalista dão ao seu formulário um aspeto profissional instantâneo que combina com o design do seu site.
Se quiser mais controlo, o painel também lhe permite personalizar elementos individuais como cores, tipos de letra, espaçamento e estilos de botões.
Depois de tudo parecer correto e o mapa exibir a sua localização corretamente, clique em Publicar. O seu formulário de contato com mapa está agora ativo. Eis uma ideia de como ficará:
Perguntas Frequentes sobre Como Adicionar um Formulário de Contato com Mapa no WordPress
Tem perguntas sobre como adicionar mapas aos seus formulários de contato do WordPress? Aqui estão as respostas às perguntas mais comuns que ouvimos:
Preciso de uma chave de API do Google Maps para usar mapas no WPForms?
Sim, precisa de uma chave de API do Google Maps ou de uma chave de API do Mapbox para usar as funcionalidades de mapa no WPForms. O add-on Geolocation requer uma destas para se conectar ao serviço de mapeamento.
Não se preocupe! O WPForms fornece instruções passo a passo para obter a sua chave de API na documentação do add-on Geolocation. A configuração geralmente leva cerca de 10 minutos.
Qual é a diferença entre o campo Mapa e a autocompletação de endereço com um mapa?
- O campo Mapa exibe os seus locais de negócio aos visitantes. Mostra-lhes onde você está. Use isto quando quiser que as pessoas vejam o seu escritório, loja ou área de serviço no seu formulário de contato.
- A autocompletação de endereço com um mapa ajuda os visitantes a preencherem o seu próprio endereço mais rapidamente. À medida que digitam, sugere o seu endereço e exibe-o num mapa. Use isto quando precisar de recolher a localização do visitante.
Posso mostrar vários locais de negócio num só mapa?
Sim. O campo Mapa permite adicionar quantos locais precisar, como vários escritórios, lojas, filiais ou centros de serviço.
Cada local recebe o seu próprio marcador no mapa, e pode personalizar os ícones e cores dos marcadores. Os visitantes podem clicar em cada marcador para ver o nome e os detalhes do local.
Para instruções passo a passo, consulte a documentação do campo Mapa.
O mapa funcionará em dispositivos móveis?
Absolutamente. Os mapas criados com o WPForms são totalmente responsivos e funcionam perfeitamente em smartphones e tablets.
Os visitantes podem ampliar, mover e interagir com o mapa tal como fariam no desktop. A funcionalidade de autocompletação de endereço também funciona perfeitamente em dispositivos móveis.
Adicionar um mapa torna o meu formulário de contato mais lento?
Não. O WPForms carrega mapas de forma eficiente para que não tornem a sua página mais lenta. O mapa só carrega quando necessário e não afeta o desempenho do seu formulário.
O WPForms é otimizado para manter o seu site rápido, mesmo com funcionalidades interativas como mapas.
Posso personalizar a aparência do mapa no meu formulário?
Sim. Com o campo Mapa, pode personalizar os ícones e cores dos marcadores para corresponder à sua marca.
Também pode controlar quais controlos do mapa aparecem (zoom, ecrã inteiro, tipo de mapa, etc.) e ajustar o nível de zoom inicial.
Para mapas de preenchimento automático de endereços, pode escolher se o mapa aparece acima ou abaixo do campo de introdução.
Verei de onde vêm os envios de formulários num mapa?
Sim. Quando o suplemento Geolocation está ativo, o WPForms captura automaticamente dados de localização (com permissão do visitante) para cada envio de formulário.
Pode ver estes dados num mapa no seu painel WordPress ao ver as entradas individuais do formulário. Isto ajuda-o a compreender de onde vêm geograficamente os seus contactos e clientes.
Em seguida, veja outras funcionalidades do WPForms Pro
Obtenha o WPForms Pro hoje para aceder ao suplemento Geolocation que lhe permite adicionar estes mapas fantásticos.
Terá também acesso a imensas outras funcionalidades úteis.
- Um Construtor Fácil de Usar – Crie os seus próprios formulários em minutos sem escrever uma única linha de código.
- Inquéritos – Recolha dados através de inquéritos e questionários e veja-os em relatórios bonitos. Pode também adicionar uma funcionalidade Guardar e Continuar a inquéritos longos para que os utilizadores possam pausar e completar os seus formulários mais tarde.
- Páginas de Formulário – Obtenha mais pessoas para completar os seus formulários criando páginas de formulário sem distrações num único clique.
- Formulários de Encomenda – Integre Stripe (todos os planos), Square (Pro) e PayPal (Pro) diretamente nos seus formulários e aceite dinheiro online.
- Relatórios de Jornada do Utilizador – Veja onde as pessoas estavam no seu site antes de preencherem o seu formulário.
- Formulários Seguros – Proteja formulários com opções anti-spam como captcha personalizado, hCaptcha ou Google reCAPTCHA v2 ou v3.
- Formulários Conversacionais – Veja as taxas de conversão dispararem com formulários altamente envolventes e de aspeto moderno.
- Mais de 2.100 Modelos – Nunca mais crie um formulário do zero com modelos pré-construídos dos tipos de formulário mais populares que existem.
- Suporte Premium – Aceda a uma equipa amigável e conhecedora que o ajudará a orientá-lo na direção certa se precisar de ajuda com os formulários do seu site.
- ...e muito mais.
Na verdade, se olhar para WPForms Lite vs Pro, verá que há imensas razões pelas quais o Pro é tão popular.
Crie o Seu Formulário WordPress Agora
Pronto para construir o seu formulário? Comece hoje com o plugin construtor de formulários WordPress mais fácil. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo o ajudou, por favor siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
Olá,
É possível usar um mapa personalizado como referência base para verificar se o endereço introduzido pelo utilizador se enquadra numa determinada área ou não?
Olá Elia – Atualmente não temos a opção de usar um mapa personalizado como referência para ver se o endereço introduzido pelo utilizador se enquadra numa área. Concordo que seria útil e adicionarei isto ao nosso rastreador de pedidos de funcionalidades para que esteja no radar dos nossos programadores.