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

Imagine o seguinte: um apoiador visita o site de uma ONG para doar casacos de inverno. Ele está pronto para entregá-los, mas o formulário mostra apenas um menu suspenso com três endereços. Nenhum mapa ou contexto incluído. Ele abre o Google Maps em uma nova aba, cola cada endereço um por um, descobre qual é o mais próximo e, em seguida, volta para concluir o formulário.

Alguns o farão. A maioria não...

Agora imagine um mapa interativo bem 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" e "Igreja do Lado Leste". O usuário toca no mais próximo, o pino quica para confirmar e sua seleção é capturada de forma limpa em sua entrada. Está 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 local seja provavelmente o primeiro caso de uso que vem à mente, está longe de ser o único. Retirada no varejo, devolução 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.

Vou mostrar como configurá-lo, juntamente com várias maneiras de colocá-lo em prática.

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

O Que Você 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; isso alimenta o mapa e o preenchimento automático de endereços
• A versão mais recente do WPForms instalada em seu site WordPress

Se você estiver usando o WPForms Lite, precisará fazer upgrade para o Pro para acessar o addon de Geolocalização. Se você é novo no WPForms, o Pro é o lugar para começar.

Crie seu formulário WordPress agora

Etapa 1: Instalar o Addon de Geolocalização

No painel do WordPress, vá para WPForms » Addons, procure por "Geolocation" e clique em Instalar Addon.

Uma vez ativo, vá para WPForms » Configurações » Geolocalização e insira sua chave de API do Google Places para se conectar ao Google Maps.

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

Etapa 2: Adicionar o Campo de Mapa ao Seu Formulário

Abra qualquer formulário no construtor do WPForms — novo ou existente. Encontre o campo Mapa em Campos Elegantes no painel esquerdo e arraste-o para dentro.

Funciona em qualquer tipo de formulário: formulários de contato, formulários de agendamento, formulários de registro, formulários de doação, o que você quiser.

Etapa 3: Adicionar Seus Locais

Clique no campo Mapa para abrir as configurações de opções do campo. Na aba Geral, em Locais, comece a digitar um endereço — o preenchimento automático do Google Places sugerirá correspondências.

Selecione o correto, em seguida, dê um Nome (como "Local da Rua Principal") e uma Descrição opcional (horários, notas de estacionamento, qualquer coisa útil para o visitante).

Clique em + para adicionar mais locais. Não há limite.

Ative Mostrar Lista de Locais para exibir nomes e endereços dos locais em uma lista organizada abaixo do mapa.

Isso oferece aos visitantes uma referência textual ao lado do mapa visual, o que é especialmente útil em dispositivos móveis, onde tocar em pinos pequenos pode ser complicado.

Etapa 4: Habilitar a Seleção de Localização

Com dois ou mais locais adicionados, ative Permitir Seleção de Local, abaixo do controle da Lista de Locais. Isso adiciona botões de rádio abaixo do mapa, transformando o campo de uma exibição visual em uma entrada de formulário ativa.

Quando um visitante clica em um pino ou seleciona na lista, o marcador quica para confirmar. A submissão deles captura o nome, endereço e coordenadas do local — mais um link Ver no Mapa — diretamente na entrada do seu formulário.

Observação: A seleção de local requer tanto a opção Mostrar Lista de Locais quanto pelo menos dois locais configurados.

Etapa 5: Personalizar Seus Marcadores

É aqui que o campo Mapa se diferencia de um embed genérico do Google Maps. Ao lado de cada local que você adicionou, há um dropdown Ícone.

Selecionar Ícone dá acesso a uma grande biblioteca de ícones do Font Awesome. Escolhas simples como pinos de mapa ou ícones de prédios tendem a funcionar bem como marcadores, mas opções mais específicas também estão disponíveis, como calendários, corações e assim por diante.

Cada pino é totalmente personalizável:

• Ícone — escolha entre mais de 2.000 ícones do Font Awesome. Uma sacola de compras para um local de varejo, um coração para um site de doação, um símbolo de reciclagem para um ponto de entrega de devolução.
• Imagem — faça upload do seu próprio logotipo ou marcador de marca da sua Biblioteca de Mídia.
• Cor — use o seletor de cores ou cole um valor hexadecimal para combinar exatamente com sua marca.
• Tamanho — defina os pinos como Pequeno, Médio ou Grande. Marcadores maiores fazem seus locais se destacarem imediatamente dos pontos de interesse padrão do Google Maps.

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

Etapa 6: Ajustar a Exibição

Na aba Avançado, você pode limpar a interface do mapa ocultando elementos que os visitantes não precisam — o controle de tela cheia, o seletor de tipo de mapa (satélite/terreno), o controle Street View e os cartões de informações de locais de outros negócios.

Você também pode desativar o arrastar ou o zoom com a roda do mouse para manter o foco em seus locais fixados.

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

Etapa 7: Configurar Notificações Cientes de Localização

Antes de publicar seu formulário de reserva com múltiplos locais, vale a pena reservar um momento para configurar notificações e confirmações. No construtor de formulários, vá para Configuraçõ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 é enviado. A partir desta tela, você pode ajustar as configurações padrão — coisas como a linha de assunto ou os endereços de e-mail do destinatário.

Com Tags Inteligentes, você também pode configurar uma notificação que vai diretamente para a pessoa que preencheu o formulário, confirmando o recebimento e informando que alguém entrará em contato. Esta é uma etapa particularmente útil para formulários de vários locais no WordPress. Para obter orientações mais detalhadas, consulte a documentação sobre como configurar notificações de formulário no WordPress.

Quando isso for feito, vá para Confirmações no menu Configurações para decidir o que acontece após o 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 contato adicionais.
• Ir para URL (Redirecionar): Envia o visitante para um URL externo, o que funciona bem quando um sistema de reserva de terceiros ou uma página de destino personalizada está envolvido.

Escolha a opção que melhor se adapta à sua configuração. Se você optar pela opção Mensagem, o texto padrão pode ser personalizado, por exemplo: “Obrigado por reservar conosco! 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 configuração de confirmações de formulário.

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

Estes são dois recursos separados do complemento Geolocation que fazem coisas opostas e são fáceis de confundir:

	Campo de Mapa	Autocompletar Endereço
O que ele mostra	Suas localizações predefinidas	Sugestões de digitação para qualquer endereço
O que ele captura	A localização que um visitante seleciona	O endereço que um visitante digita
Melhor para	Escolher entre suas filiais, locais ou estabelecimentos	Coletar um endereço de entrega, cobrança ou serviço

Você pode usar ambos no mesmo formulário. Um formulário de pedido de entrega de comida pode usar o campo Mapa para permitir que o cliente escolha uma filial do restaurante e um campo de Endereço com autocompletar para coletar o endereço de entrega.

Para ativar o autocompletar de endereço, abra qualquer campo de Endereço, vá para a aba Avançado 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.

Visualizando Dados de Localização em Suas Entradas

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

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

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

Pronto para começar? O campo Mapa está disponível no construtor de formulários do WPForms para todos os usuários Pro. Se o complemento Geolocation já estiver instalado, você o encontrará na seção Campos Elegantes.

Crie seu formulário WordPress agora

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

O campo Mapa funciona no celular?

Sim. O campo Mapa é totalmente responsivo. A lista de locais com botões de rádio abaixo do mapa facilita a seleção em celulares — não é necessário tocar precisamente em um pino pequeno.

Preciso pagar extra pelo complemento Geolocation?

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

O que acontece se eu adicionar apenas um local?

Com um único local, o campo Mapa funciona como uma exibição — seu pino de marca no mapa, sem necessidade de seleção. A seleção de local só é ativada com dois ou mais locais e a opção Mostrar Lista de Locais ativada.

Posso usar lógica condicional com base no local que um visitante seleciona?

Sim. Usando a lógica condicional do WPForms, você pode mostrar ou ocultar campos, rotear notificações para diferentes destinatários ou acionar diferentes mensagens de confirmação com base no local selecionado.

Posso fazer upload do meu próprio logotipo como marcador de mapa?

Sim. Na seção Locais das Opções de Campo, escolha Imagem no menu suspenso de ícones e faça upload de qualquer imagem da sua Biblioteca de Mídia como marcador de pino.

Aprofunde-se com estes Casos de Uso

Quer explorar mais sobre um caso de uso específico? Acho que você achará estes guias úteis:

• Como Criar um Formulário de Reserva WordPress com Vários Locais — guia completo para empresas de serviços e agendamento por horário
• Como Criar um Formulário de Pedido Online de Restaurante — adicione seleção de local a um fluxo completo de pedidos e pagamentos
• Como Criar um Formulário de Várias Etapas no WordPress — divida formulários complexos em páginas com a seleção de local como primeira etapa
• Como Criar um Formulário de Endereço com Autocompletar do Google Maps — complemente o campo Mapa com autocompletar de endereço do visitante

Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.

Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.