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

Imagine o seguinte: um colaborador visita o site de uma organização sem fins lucrativos para doar alguns casacos de inverno. Está pronto para os entregar, mas o formulário apresenta apenas um menu suspenso com três endereços. Não há mapa nem contexto. Abre o Google Maps numa nova aba, cola cada endereço um a um, descobre qual é o mais próximo e, depois, volta para concluir o formulário.

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

Agora imagine um mapa interativo dentro do próprio formulário. Os três locais de entrega estão marcados com ícones personalizados, identificados como «Centro Comunitário Norte», «Biblioteca do Centro» e «Igreja do Leste». O utilizador toca no que estiver mais próximo, o marcador salta para confirmar e a sua seleção é registada de forma clara no seu registo. Tudo isto em segundos e sem nunca sair da página.

É assim que o campo «Mapa» do WPForms funciona! E embora um formulário de reservas com seleção de localização seja provavelmente o primeiro caso de utilização que nos vem à cabeça, está longe de ser o único. Recolha em loja, devoluções de produtos, check-in em 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 fica melhor com esta funcionalidade.

Deixa-me mostrar-te como configurá-lo, bem como várias formas de o utilizar.

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

O que é necessário

• 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; esta 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 estiver a utilizar o WPForms Lite, terá de atualizar para a versão Pro para aceder ao complemento de geolocalização. Se ainda não conhece o WPForms, a versão Pro é o ponto de partida ideal.

Crie seu formulário WordPress agora

Passo 1: Instalar o complemento de geolocalização

No painel de controlo do WordPress, aceda a WPForms » Complementos, procure por «Geolocalização» e clique em «Instalar complemento».

Depois de ativado, aceda a WPForms » Definições » Geolocalização e introduza a sua chave da API do Google Places para estabelecer a ligação ao Google Maps.

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

Passo 2: Adicione o campo «Mapa» ao seu formulário

Abra qualquer formulário no construtor do WPForms — novo ou já existente. Encontre o campo «Mapa» na secçã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 contacto, de marcação, de inscrição, de doação, entre outros.

Passo 3: Adicione as suas localizações

Clique no campo «Mapa» para abrir as definições das opções do campo. No separador «Geral», na secção «Localizações», comece a escrever um endereço — a funcionalidade de preenchimento automático do Google Places irá sugerir correspondências.

Selecione a opção correta e, em seguida, atribua-lhe 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 apresentar os nomes e endereços dos locais numa lista organizada abaixo do mapa.

Isto proporciona aos visitantes uma referência textual a par do 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». Isto adiciona botões de opção abaixo do mapa, transformando o campo de uma exibição visual num campo de preenchimento ativo.

Quando um visitante clica num marcador ou seleciona uma opção da lista, o marcador salta para confirmar. O envio captura o nome, a morada e as coordenadas do local — além de um link «Ver no mapa» — diretamente no campo do formulário.

Nota: A seleção de localizações requer tanto a opção «Mostrar lista de localizações» como, pelo menos, duas localizações configuradas.

Passo 5: Personalize os seus marcadores

É aqui que o campo «Mapa» se distingue de uma incorporação genérica do Google Maps. Ao lado de cada local que adicionou, existe um menu suspenso «Ícone ».

Ao selecionar «Icon», terá acesso a uma vasta biblioteca de ícones Font Awesome. Opções simples, como pinos de mapa ou ícones de edifícios, costumam funcionar bem como marcadores, mas também estão disponíveis opções mais específicas, como calendários, corações e assim por diante.

Cada alfinete é totalmente personalizável:

• Ícone — escolha entre mais de 2.000 ícones do Font Awesome. Um saco de compras para uma loja, um coração para um site de doações, um símbolo de reciclagem para um ponto de recolha de devoluções.
• Imagem — carregue o seu próprio logótipo ou marcador da marca a partir da sua Biblioteca de multimédia.
• Cor — utilize o seletor de cores ou cole um valor hexadecimal para corresponder exatamente à sua marca.
• Tamanho — defina os marcadores como Pequeno, Médio ou Grande. Os marcadores maiores fazem com que as suas localizações se destaquem imediatamente dos pontos de interesse predefinidos 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 todo o contexto sem saírem do formulário.

Passo 6: Ajustar a visualização

No separador «Avançado», pode simplificar a interface do mapa ocultando elementos desnecessários para os visitantes — o botão para alternar para ecrã inteiro, o seletor de tipo de mapa (satélite/terreno), o controlo do Street View e os cartões de informação de localização de outras empresas.

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

Para as entradas, ative a opção «Mostrar miniatura na entrada» para ver uma pré-visualização do mapa diretamente na página de envio, em WPForms » Entradas.

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

Antes de publicar o seu formulário de reserva para vários locais, vale a pena dedicar um momento a configurar as notificações e as confirmações. No criador de formulários, aceda a Definiçõ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. A partir deste ecrã, pode ajustar as definições predefinidas — como o assunto ou os endereços de e-mail dos destinatários.

Com as Smart Tags, também pode configurar uma notificação que é enviada diretamente à pessoa que preencheu o formulário, confirmando a receção e informando-a de que alguém entrará em contacto. Este é um passo 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ários no WordPress.

Quando terminar, aceda à secção «Confirmações» no menu «Definições» para definir o que acontece após o envio bem-sucedido.

Existem três opções:

• Mensagem: Apresenta uma mensagem de agradecimento na mesma página — uma boa opção quando a simplicidade é a prioridade.
• Página de destino: 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 o URL (Redirecionamento): Envia o visitante para um URL externo, o que funciona bem quando está envolvido um sistema de reservas de terceiros ou uma página de destino personalizada.

Escolha a opção que melhor se adequar à sua configuração. Se optar pela opção «Mensagem», o texto predefinido pode ser personalizado, por exemplo: «Obrigado por reservar connosco! Em breve enviaremos um e-mail de confirmação para o endereço que nos forneceu.»

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

Campo de mapa vs. preenchimento automático de endereços: qual é a diferença?

Estas são duas funcionalidades distintas do complemento de geolocalização que têm efeitos opostos e são fáceis de confundir:

	Campo do mapa	Preenchimento automático de endereços
O que isso mostra	As suas localizações predefinidas	Sugestões de preenchimento automático para qualquer endereço
O que capta	O local que o visitante seleciona	O endereço que um visitante digita
Melhor para	Escolher entre as suas filiais, locais ou espaços	Indicar um endereço de entrega, de faturação ou de prestação de serviços

Pode utilizar ambos no mesmo formulário. Um formulário de encomenda de entrega de comida pode utilizar o campo «Mapa» para permitir que o cliente escolha uma filial do restaurante e um campo «Endereço» com preenchimento automático para recolher o endereço de entrega.

Para ativar o preenchimento automático de endereços, abra qualquer campo de endereço, aceda ao separador «Avançado» e ative a opção «Ativar preenchimento automático de endereços». Para obter um guia passo a passo completo, consulte como criar um formulário de endereço com preenchimento automático do Google Maps.

Visualizar dados de localização nas suas entradas

Todos os dados de localização encontram-se em WPForms » Entradas.

Abra qualquer registo para ver o nome e a morada do local selecionado, bem como um link «Ver no mapa ». Se tiver ativado a miniatura do mapa nas «Definições avançadas», verá uma pré-visualização diretamente na página do registo.

Se exportar para o Google Sheets, associe os campos de localização selecionados utilizando o complemento do Google Sheets — útil para criar listas de distribuição organizadas por local de recolha 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 utilizadores Pro. Se o complemento de geolocalização já estiver instalado, irá encontrá-lo na secçã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 localizações com botões de opção abaixo do mapa facilita a seleção nos telemóveis — não é necessário tocar com precisão num pequeno marcador.

Tenho de pagar um valor adicional pelo complemento de geolocalização?

Não. Está incluído em todos os planos do WPForms Pro sem custos adicionais, 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?

Com uma única localização, o campo «Mapa» funciona apenas como uma visualização — o seu marcador com a marca no mapa, sem necessidade de seleção. A seleção de localizações só é ativada quando existem duas ou mais localizações e a opção «Mostrar lista de localizações» está ativada.

Posso utilizar lógica condicional com base na localização que o visitante selecionar?

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

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

Sim. Na secção «Localizações» das «Opções de campo», selecione «Imagem» no menu suspenso de ícones e carregue qualquer imagem da sua biblioteca multimédia para utilizar como marcador.

Aprofunde os seus conhecimentos com estes casos de utilização

Queres saber mais sobre um caso de utilização específico? Acho que vais 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 encomendas online para um restaurante — adicionar a seleção da localização a um fluxo completo de encomendas e pagamentos
• Como criar um formulário em várias etapas no WordPress — dividir formulários complexos em páginas, com a seleção da localização como primeira etapa
• Como criar um formulário de endereço com preenchimento automático do Google Maps — complementar o campo «Mapa» com o preenchimento automático do endereço do visitante

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

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