Como adicionar um seletor de localização interativo a qualquer formulário do WordPress

Imagine o seguinte: um doador acessa o site de uma organização sem fins lucrativos para doar alguns casacos de inverno. Ele está pronto para entregá-los, mas o formulário mostra apenas um menu suspenso com três endereços. Não há mapa nem contexto. Ele abre o Google Maps em uma nova aba, cola cada endereço um por um, descobre qual é o mais próximo e, então, volta para preencher o formulário.

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

Agora imagine um mapa interativo bem dentro do formulário. Os três pontos de entrega estão marcados com ícones personalizados, identificados como “Centro Comunitário Norte”, “Biblioteca do Centro” e “Igreja do Leste”. O usuário toca no que estiver mais próximo, o marcador salta para confirmar e a seleção é registrada de forma clara no seu registro. Tudo isso em segundos e sem precisar 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. Retirada em loja, devoluções de produtos, check-in em eventos, seleção de área de atendimento, inscrições de voluntários… qualquer formulário que envolva a escolha de um local físico fica melhor com ele.

Vou mostrar como configurá-lo, além de 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 complemento de geolocalização, incluído em todos os planos Pro
• Uma chave da API do Google Places — de configuração gratuita; ela permite o funcionamento do mapa e do preenchimento automático de endereços
• A versão mais recente do WPForms instalada no seu site WordPress

Se você estiver usando o WPForms Lite, precisará fazer o upgrade para a versão Pro para ter acesso ao complemento de geolocalização. Se você ainda não conhece o WPForms, a versão Pro é o melhor ponto de partida.

Crie seu formulário WordPress agora

Passo 1: Instale o complemento de geolocalização

No painel do WordPress, acesse WPForms » Complementos, procure por “Geolocalização” e clique em Instalar complemento.

Depois de ativar, acesse WPForms » Configurações » Geolocalização e insira sua chave da API do Google Places para conectar-se ao Google Maps.

Para obter um guia passo a passo completo sobre a configuração da chave de API, consulte a documentação do complemento de geolocalização.

Passo 2: Adicione o campo do mapa ao seu formulário

Abra qualquer formulário no construtor do WPForms — novo ou já existente. Encontre o campo “Mapa” na seção “Campos avançados” do painel esquerdo e arraste-o para dentro do formulário.

Funciona com qualquer tipo de formulário: formulários de contato, de agendamento, de inscrição, de doação, entre outros.

Passo 3: Adicione seus locais

Clique no campo "Mapa" para abrir as configurações de opções do campo. Na guia "Geral", na seção " Locais", comece a digitar um endereço — o preenchimento automático do Google Places irá sugerir resultados correspondentes.

Selecione a opção correta e, em seguida, atribua um nome (como “Localização na Rua Principal”) e uma descrição opcional (horário de funcionamento, informações sobre estacionamento, qualquer informação útil para o visitante).

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

Ative a opção “Mostrar lista de locais ” para exibir os nomes e endereços dos locais em uma lista organizada abaixo do mapa.

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

Passo 4: Ativar a seleção de localização

Depois de adicionar dois ou mais locais, ative a opção “Permitir seleção de local”, abaixo do botão de alternância “Lista de locais”. Isso adiciona botões de opção abaixo do mapa, transformando o campo de uma exibição visual em um campo de formulário interativo.

Quando um visitante clica em um marcador ou seleciona um item da lista, o marcador salta para confirmar. O envio captura o nome, o endereço e as coordenadas do local — além de um link “Ver no mapa” — diretamente no campo de preenchimento do formulário.

Observação: a seleção de localizações requer tanto a opção “Mostrar lista de localizações” quanto pelo menos duas localizações configuradas.

Passo 5: Personalize seus marcadores

É aqui que o campo “Mapa” se diferencia de uma incorporação genérica do Google Maps. Ao lado de cada local que você adicionou, há um menu suspenso “Ícone ”.

Ao selecionar “Ícone”, você terá acesso a uma ampla biblioteca de ícones do Font Awesome. Opções simples, como pinos de mapa ou ícones de prédios, costumam funcionar bem como marcadores, mas também há opções mais específicas disponíveis, como calendários, corações e assim por diante.

Cada broche é totalmente personalizável:

• Ícone — escolha entre mais de 2.000 ícones do Font Awesome. Uma sacola de compras para uma loja, um coração para um site de doações, um símbolo de reciclagem para um ponto de coleta de devoluções.
• Imagem — carregue seu próprio logotipo ou marcador da marca a partir da sua Biblioteca de mídia.
• Cor — use o seletor de cores ou cole um código hexadecimal para combinar exatamente com a identidade visual da sua marca.
• Tamanho — defina os marcadores como Pequeno, Médio ou Grande. Marcadores maiores fazem com que seus locais se destaquem imediatamente dos pontos de interesse padrão do Google Maps.

Cada marcador também pode exibir uma janela pop-up com o nome e a descrição quando clicado, para que os visitantes tenham acesso a todas as informações sem precisar sair do formulário.

Passo 6: Ajustar a exibição

Na guia “Avançado”, você pode simplificar a interface do mapa ocultando elementos desnecessários para os visitantes — o botão de alternância para tela cheia, o seletor de tipo de mapa (satélite/terreno), o controle do Street View e os cartões de informações de localização de outras empresas.

Você também pode desativar o arrastar ou o zoom com a roda de rolagem para manter o foco nos locais fixados.

Para as entradas, ative a opção “Mostrar miniatura na entrada” para visualizar uma prévia do mapa diretamente na página de envio, em WPForms » Entradas.

Passo 7: Configurar notificações baseadas na localização

Antes de publicar seu formulário de reserva para vários locais, vale a pena reservar um momento para configurar as notificações e confirmações. No criador de formulários, acesse Configurações » Notificações.

O WPForms envia automaticamente uma notificação para o seu e-mail de administrador do WordPress sempre que o formulário é enviado. Nesta tela, você pode ajustar as configurações padrão — como o assunto ou os endereços de e-mail dos destinatários.

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

Quando terminar, acesse a seção “Confirmações” no menu “Configurações” para definir o que acontecerá 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 o URL (redirecionamento): encaminha o visitante para um URL externo, o que funciona bem quando se trata de um sistema de reservas de terceiros ou de uma página de destino personalizada.

Escolha a opção que melhor se adequar à sua configuração. Se você optar pela opção “Mensagem”, o texto padrão pode ser personalizado, por exemplo: “Obrigado por fazer sua reserva conosco! Em breve, enviaremos um e-mail de confirmação para o endereço que você forneceu.”

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

Campo de mapa x Autocompletar endereço: qual é a diferença?

Essas são duas funcionalidades distintas do complemento de geolocalização que têm funções opostas e são fáceis de confundir:

	Campo do mapa	Preenchimento automático de endereços
O que isso mostra	Seus locais predefinidos	Sugestões de preenchimento automático para qualquer endereço
O que ele capta	O local que o visitante seleciona	O endereço que um visitante digita
Melhor para	Escolhendo entre suas filiais, locais ou espaços	Inserir um endereço de entrega, cobrança ou atendimento

Você pode usar os dois 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 “Endereço” com preenchimento automático para coletar o endereço de entrega.

Para ativar o preenchimento automático de endereços, abra qualquer campo de endereço, acesse a guia “Avançado” e ative a opção “Ativar preenchimento automático de endereços”. Para um passo a passo completo, veja como criar um formulário de endereço com preenchimento automático do Google Maps.

Como visualizar dados de localização nas suas entradas

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

Abra qualquer envio para ver o nome e o endereço do local selecionado, além de um link “Ver no mapa ”. Se você ativou a miniatura do mapa nas configurações avançadas, verá uma pré-visualização diretamente na página de entrada.

Se você exportar para o Google Sheets, mapeie os campos de localização selecionados usando o complemento do Google Sheets — útil para criar listas de atendimento organizadas por local de retirada ou para acompanhar o número de inscrições de voluntários por local.

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

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 em dispositivos móveis?

Sim. O campo “Mapa” é totalmente responsivo. A lista de locais com botões de opção abaixo do mapa facilita a seleção em celulares — não é preciso tocar com precisão em um pequeno marcador.

Preciso pagar a mais pelo complemento de geolocalização?

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

O que acontece se eu adicionar apenas um local?

Quando há apenas um local, o campo “Mapa” funciona como uma exibição — o seu marcador com a marca no mapa, sem necessidade de seleção. A seleção de locais só é ativada quando há dois ou mais locais e a opção “Mostrar lista de locais” está ativada.

Posso usar lógica condicional com base na localização selecionada pelo visitante?

Sim. Usando a lógica condicional do WPForms, você 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 enviar meu próprio logotipo como um marcador no mapa?

Sim. Na seção “Locais” das “Opções de campo”, selecione “Imagem” no menu suspenso de ícones e faça o upload de qualquer imagem da sua Biblioteca de mídia para usar como marcador.

Aprofunde-se com estes casos de uso

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

• Como criar um formulário de reservas no WordPress para vários locais — guia passo a passo completo para empresas de serviços e agendamento de consultas
• Como criar um formulário de pedidos online para restaurantes — inclua a seleção de localização em um fluxo completo de pedidos e pagamentos
• Como criar um formulário em várias etapas no WordPress — dividir formulários complexos em páginas, com a seleção de localização como primeira etapa
• Como criar um formulário de endereço com autocompletar do Google Maps — integrar o campo do mapa com a função de autocompletar do endereço do visitante

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.