Como Adicionar um Seletor de Localização Interativo a Qualquer Formulário WordPress

Imagine o seguinte: um apoiante visita o site de uma organização sem fins lucrativos para doar casacos de inverno. Estão prontos para os entregar, mas o formulário mostra apenas uma lista suspensa com três moradas. Não há mapa nem contexto incluído. Abrem o Google Maps num novo separador, colam cada morada uma a uma, descobrem qual é a mais próxima e depois voltam para concluir o formulário.

Alguns vão. A maioria não vai…

Agora imagine um mapa interativo mesmo dentro do formulário. Os três locais de entrega estão marcados com ícones personalizados, rotulados como "Centro Comunitário Norte", "Biblioteca do Centro da Cidade" e "Igreja do Lado Leste". O utilizador toca no mais próximo, o marcador salta para confirmar e a sua seleção é capturada de forma limpa na sua entrada. É feito em segundos e sem sair da página.

Esse é o campo Mapa do WPForms em ação! E embora um formulário de reserva com seleção de localização seja provavelmente o primeiro caso de uso que vem à mente, está longe de ser o único. Recolha em loja, devoluções de produtos, check-in de eventos, seleção de área de serviço, inscrições de voluntários… qualquer formulário que envolva a escolha de um local físico melhora com ele.

Deixe-me mostrar-lhe como configurá-lo, juntamente com várias formas de o colocar a funcionar.

Como Adicionar um Seletor de Localização Interativo a Qualquer Formulário WordPress

O Que Vai Precisar

• WPForms Pro — o campo Mapa faz parte do addon de Geolocalização, incluído em todos os planos Pro
• Uma chave de API do Google Places — configuração gratuita; esta potencia o mapa e o preenchimento automático de moradas
• A versão mais recente do WPForms instalada no seu site WordPress

Se estiver no WPForms Lite, terá de atualizar para Pro para aceder ao addon de Geolocalização. Se for novo no WPForms, o Pro é o lugar para começar.

Crie o Seu Formulário WordPress Agora

Passo 1: Instalar o Addon de Geolocalização

No seu painel WordPress, vá a WPForms » Addons, procure por "Geolocation" e clique em Install Addon.

Uma vez ativo, vá a WPForms » Settings » Geolocation e introduza a sua chave de API do Google Places para se conectar ao Google Maps.

Para um guia completo de configuração da chave de API, consulte a documentação do Addon de Geolocalização.

Passo 2: Adicionar o Campo Mapa ao Seu Formulário

Abra qualquer formulário no construtor WPForms — novo ou existente. Encontre o campo Map em Fancy Fields no painel esquerdo e arraste-o para dentro.

Funciona em qualquer tipo de formulário: formulários de contacto, formulários de marcação, formulários de registo, formulários de doação, o que lhe ocorrer.

Passo 3: Adicionar as Suas Localizações

Clique no campo Mapa para abrir as definições das opções do campo. No separador General, em Locations, comece a digitar uma morada — o preenchimento automático do Google Places sugerirá correspondências.

Selecione a correta, depois dê-lhe um Name (como "Localização da Rua Principal") e uma Description opcional (horários, notas sobre estacionamento, qualquer coisa útil para o visitante).

Clique em + para adicionar mais localizações. Não há limite.

Ative Mostrar Lista de Localizações para exibir nomes e moradas de localizações numa lista clara abaixo do mapa.

Isto dá aos visitantes uma referência de texto ao lado do mapa visual, o que é especialmente útil em dispositivos móveis, onde tocar em marcadores pequenos pode ser complicado.

Passo 4: Ativar a Seleção de Localização

Com duas ou mais localizações adicionadas, ative Permitir Seleção de Localização, abaixo do interruptor da Lista de Localizações. Isto adiciona botões de rádio abaixo do mapa, transformando o campo de uma exibição visual num campo de formulário ativo.

Quando um visitante clica num marcador ou seleciona da lista, o marcador salta para confirmar. A sua submissão captura o nome, morada e coordenadas da localização — mais uma ligação Ver no Mapa — diretamente na entrada do seu formulário.

Nota: A seleção de localização requer tanto a opção Mostrar Lista de Localizações como pelo menos duas localizações configuradas.

Passo 5: Personalizar os Seus Marcadores

É aqui que o campo Mapa se distingue de um incorporamento genérico do Google Maps. Ao lado de cada localização que adicionou, existe um menu suspenso Ícone.

Selecionar Ícone dá-lhe acesso a uma grande biblioteca de ícones Font Awesome. Escolhas simples como marcadores de mapa ou ícones de edifícios tendem a funcionar bem como marcadores, mas opções mais específicas também estão disponíveis, como calendários, corações, etc.

Cada marcador pode ser totalmente personalizado:

• Ícone — escolha entre mais de 2.000 ícones Font Awesome. Um saco de compras para uma localização de retalho, um coração para um local de doação, um símbolo de reciclagem para um ponto de devolução.
• Imagem — carregue o seu próprio logótipo ou marcador de marca da sua Biblioteca de Média.
• Cor — use o seletor de cores ou cole um valor hexadecimal para corresponder exatamente à sua marca.
• Tamanho — defina os marcadores como Pequenos, Médios ou Grandes. Marcadores maiores fazem com que as suas localizações se destaquem imediatamente dos pontos de interesse padrão do Google Maps.

Cada marcador pode também exibir um popup de nome e descrição quando clicado, para que os visitantes obtenham o contexto completo sem sair do formulário.

Passo 6: Ajustar a Exibição

No separador Avançadas, pode limpar a interface do mapa ocultando elementos de que os visitantes não precisam — o alternador de ecrã inteiro, o seletor de tipo de mapa (satélite/terreno), o controlo Street View e os cartões de informação de localização para outros negócios.

Também pode desativar o arrastar ou o zoom com a roda do rato para manter o foco nas suas localizações marcadas.

Para as entradas, ative Mostrar Miniatura na Entrada para ver uma pré-visualização do mapa diretamente na página de submissão em WPForms » Entradas.

Passo 7: Configurar Notificações Cientes da Localização

Antes de publicar o seu formulário de reserva de múltiplas localizações, vale a pena dedicar um momento para configurar notificações e confirmações. No construtor de formulários, vá a Definições » Notificações.

O WPForms envia automaticamente uma notificação para o seu e-mail de administrador do WordPress cada vez que o formulário é submetido. A partir deste ecrã, pode ajustar as definições padrão — coisas como a linha de assunto ou os endereços de e-mail do destinatário.

Com Etiquetas Inteligentes, pode também configurar uma notificação que vai diretamente para a pessoa que preencheu o formulário, acusando a receção e informando que alguém irá dar seguimento. Este é um passo particularmente útil para formulários com várias localizações no WordPress. Para orientações mais detalhadas, consulte a documentação sobre como configurar notificações de formulário no WordPress.

Quando isso estiver feito, dirija-se a Confirmações no menu Definições para decidir o que acontece após um envio bem-sucedido.

Existem três opções:

• Mensagem: Exibe uma mensagem de agradecimento na mesma página — uma boa opção quando a simplicidade é a prioridade.
• Mostrar Página: Redireciona o visitante para outra página do seu site, como uma que descreva os próximos passos ou forneça detalhes de contacto adicionais.
• Ir para URL (Redirecionamento): Envia o visitante para um URL externo, o que funciona bem quando um sistema de reservas de terceiros ou uma página de destino personalizada está envolvido.

Escolha a opção que melhor se adapta à sua configuração. Se optar pela opção Mensagem, o texto predefinido pode ser personalizado, por exemplo: “Obrigado por reservar connosco! Enviaremos um e-mail de confirmação para o endereço fornecido em breve.”

Para obter orientações sobre os outros tipos de confirmação, consulte a documentação sobre configurar confirmações de formulário.

Campo de Mapa vs. Autocompletar Endereço: Qual é a Diferença?

Estas são duas funcionalidades separadas do suplemento de Geocalização que fazem coisas opostas e são fáceis de confundir:

	Campo de Mapa	Preenchimento Automático de Moradas
O que mostra	As suas localizações predefinidas	Sugestões de digitação para qualquer endereço
O que captura	A localização que um visitante seleciona	O endereço que um visitante digita
Melhor para	Escolher entre as suas filiais, locais ou espaços	Recolher um endereço de entrega, faturação ou serviço

Pode usar ambos no mesmo formulário. Um formulário de pedido de entrega de comida pode usar o campo Mapa para permitir ao cliente escolher uma filial de restaurante e um campo de Endereço com autocompletar para recolher o seu endereço de entrega.

Para ativar o autocompletar de endereço, abra qualquer campo de Endereço, vá ao separador Avançadas e ative Ativar Autocompletar de Endereço. Para um guia completo, veja como criar um formulário de endereço com autocompletar do Google Maps.

Visualizar Dados de Localização nas Suas Entradas

Todos os dados de localização residem em WPForms » Entradas.

Abra qualquer submissão para ver o nome da localização selecionada, endereço e um link Ver no Mapa. Se ativou a miniatura do mapa nas definições Avançadas, verá uma pré-visualização visual diretamente na página da entrada.

Se exportar para o Google Sheets, mapeie os campos de localização selecionados usando o suplemento Google Sheets — útil para criar listas de processamento organizadas por local de recolha, ou para rastrear contagens de inscrições de voluntários por local.

Pronto para começar? O campo Mapa está disponível no construtor de formulários WPForms para todos os utilizadores Pro. Se o suplemento Geocalização já estiver instalado, encontrá-lo-á na secção Campos Fantasia.

Crie o Seu Formulário WordPress Agora

FAQs Sobre Adicionar um Seletor de Localização Interativo a Qualquer Formulário WordPress

O campo Mapa funciona em dispositivos móveis?

Sim. O campo Mapa é totalmente responsivo. A lista de localizações com botões de rádio abaixo do mapa facilita a seleção em telemóveis — não é necessário tocar precisamente num pequeno marcador.

Preciso de pagar extra pelo suplemento de Geolocalização?

Não. Está incluído em todos os planos WPForms Pro sem custo adicional, juntamente com mais de 2.000 modelos de formulários e todos os outros suplementos pro.

O que acontece se eu adicionar apenas uma localização?

Com uma única localização, o campo Mapa funciona como uma exibição — o seu marcador de marca no mapa, sem necessidade de seleção. A seleção de localização só é ativada com duas ou mais localizações e com a opção "Mostrar Lista de Localizações" ativada.

Posso usar lógica condicional com base na localização que um visitante seleciona?

Sim. Usando a lógica condicional do WPForms, pode mostrar ou ocultar campos, encaminhar notificações para diferentes destinatários ou acionar diferentes mensagens de confirmação com base na localização selecionada.

Posso carregar o meu próprio logótipo como marcador de mapa?

Sim. Na secção "Localizações" das Opções de Campo, escolha Imagem no menu suspenso de ícones e carregue qualquer imagem da sua Biblioteca de Média como marcador.

Aprofunde com Estes Casos de Uso

Quer explorar mais sobre um caso de uso específico? Acho que estes guias serão úteis:

• Como Criar um Formulário de Reserva WordPress com Várias Localizações — guia completo para empresas de serviços e agendamento por marcação
• Como Criar um Formulário de Pedido Online de Restaurante — adicione seleção de localização a um fluxo completo de pedidos e pagamentos
• Como Criar um Formulário de Vários Passos no WordPress — divida formulários complexos em páginas com a seleção de localização como primeiro passo
• Como Criar um Formulário de Morada com Autocompletar do Google Maps — complemente o campo Mapa com o autocompletar de moradas do visitante

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.