Como Adicionar um Seletor de Recolha na Loja ao Seu Formulário de Encomenda WordPress

Imagine este cenário: um cliente acede ao seu site, adiciona dois artigos ao seu formulário de encomenda e chega ao checkout pronto para comprar. Depois, chega à secção de envio e pausa. Vive a três quarteirões da sua loja. Quer realmente pagar pelo envio e esperar dois dias quando poderia ir buscar ao almoço?

Se o seu formulário não oferecer uma opção de recolha, eles provavelmente fecharão o separador e contactá-lo-ão em vez disso. Ou pior, comprarão a um concorrente que facilita a recolha.

Comprar Online, Recolher na Loja (BOPIS) já não é apenas para grandes retalhistas. Lojas locais, restaurantes, padarias e até floristas oferecem-no porque os clientes o esperam. E a boa notícia é que não precisa de uma plataforma de eCommerce completa para que funcione. Com o WPForms e o addon Geolocation, pode adicionar um seletor interativo de recolha na loja a qualquer um dos seus formulários de encomenda WordPress.

Posso mostrar-lhe exatamente como fazê-lo. Vamos a isso!

Como Adicionar um Seletor de Recolha na Loja ao Seu Formulário de Encomenda WordPress (Passo a Passo)

O que precisará antes de começar

Verificação rápida do inventário antes de começar:

• WPForms Pro ou superior. O addon Geolocation está incluído nos planos Pro e acima.
• O addon Geolocation instalado e ativado.
• Uma chave de API do Google Places ou um token de acesso Mapbox. Ambos funcionam — cobriremos como configurar qualquer um deles.
• Uma lista das suas localizações de recolha com moradas completas, nomes de empresas e quaisquer detalhes que queira que os clientes vejam (horários, notas sobre estacionamento, instruções de entrada).

É tudo! Código personalizado? Não. Plugin de localizador de lojas separado? Não é necessário. A alternar entre ferramentas? Nunca!

Mas também... Porquê?

Porquê adicionar um seletor de recolha em vez de um simples menu suspenso?

Poderia usar um campo de menu suspenso normal que lista as localizações da sua loja. Funcionaria. Mas um mapa interativo faz três coisas que um menu suspenso nunca fará:

• Responde visualmente a "qual está mais perto de mim?". Isto é especialmente útil se os nomes das suas localizações não forem óbvios (um cliente pode não conhecer "Riverside" vs. "Bridgeview" pelo nome).
• Constrói confiança. Um pino de mapa real diz aos clientes que você é um negócio real com uma morada real. Isso importa para compradores de primeira viagem.
• Reduz erros de recolha. Quando um cliente vê o pino do mapa e o seleciona ele próprio, é muito menos provável que apareça na localização errada.

Passo 1: Instalar e ativar o addon Geolocation

Inicie sessão no seu painel WordPress e vá para WPForms » Addons. Procure por "Geolocation" e clique em Instalar Addon. O WordPress trata do resto.

Assim que estiver ativo, verá um novo separador Geolocation nas suas definições do WPForms.

Passo 2: Ligar o Google Places

O campo Mapa puxa dados do mapa do Google Places. Precisará de uma conta gratuita do Google Cloud e de uma chave de API.

Assim que tiver a sua chave de API, vá a WPForms » Definições » Geolocation, cole a chave e guarde as definições.

Se ficar preso na etapa da chave de API, temos um guia de configuração detalhado na documentação do Addon Geolocation que o orienta passo a passo pela consola do Google Cloud.

Este é o único passo ligeiramente técnico em toda a configuração — cerca de 10 minutos, e só o faz uma vez.

Passo 3: Começar com o modelo de Formulário de Encomenda para Recolha na Loja

Pode construir isto de raiz, mas o WPForms já tem um modelo que faz 90% do trabalho por si. Em WPForms » Adicionar Novo, procure por “Formulário de Encomenda com Levantamento na Loja.”

O modelo vem pré-carregado com:

• Seleção de produto baseada em imagem
• Opções de quantidade e cor
• Campos de contacto do cliente
• Um campo de Mapa para seleção de localização
• Um campo de cartão de crédito Stripe
• Um total calculado que se atualiza em tempo real
• Caixas de verificação de reconhecimento de termos

Com este modelo, tem um formulário de encomenda funcional com um seletor de levantamento já configurado. A partir daqui, está a personalizar — não a construir do zero.

Passo 4: Adicionar as suas localizações de recolha ao campo Mapa

No construtor de formulários, encontre o campo Mapa na secção Campos Fantasia. Clique nele ou arraste-o para a pré-visualização do formulário para o adicionar.

Em seguida, clique no campo Mapa na pré-visualização para abrir as suas Opções de Campo. No separador Geral, verá uma secção de Localizações com campos para cada local de levantamento que pretende mostrar.

Para cada localização:

1. Digite um endereço no campo Endereço. O Google Places irá autocompletar — escolha a correspondência correta.
2. Adicione um Nome (algo que os clientes reconheçam, como “Loja Principal do Centro” ou “Balcão de Levantamento Leste”).
3. Adicione uma Descrição opcional — é aqui que coloca os detalhes que poupam chamadas ao serviço de apoio ao cliente (horário de levantamento, qual a porta a usar, se deve ligar à chegada).
4. Clique no botão + para adicionar a próxima localização.

Algumas definições do lado do administrador que vale a pena conhecer:

• Encontrar Localizações Próximas — quando ativa esta opção no construtor, o seu navegador pede a sua localização (a do administrador) e o autocompletar de endereços prioriza sugestões perto de si. Útil se todas as suas localizações de levantamento estiverem na mesma cidade que a sua secretária. Não afeta o que os clientes veem no frontend.
• Nível de Zoom — o padrão é 15, que é um bom zoom ao nível da rua. Esta definição só é utilizada quando tem uma única localização; assim que adicionar várias localizações e ativar a seleção, o mapa ajusta-se automaticamente para as mostrar a todas e esta definição é desativada.

Passo 5: Transformar o mapa num seletor (este é o importante)

Por defeito, o campo Mapa é apenas para visualização — os clientes podem ver as suas localizações, mas não podem escolher uma. Para o transformar num verdadeiro seletor de levantamento, ative ambos estes interruptores no separador Geral:

• Mostrar Lista de Localizações — exibe o nome e endereço de cada localização numa lista de texto abaixo do mapa. Isto é importante para acessibilidade e para utilizadores de telemóvel que têm dificuldade com os marcadores pequenos do mapa.
• Permitir Seleção de Localização — adiciona botões de rádio ao lado de cada localização na lista. É isto que transforma o mapa num campo de formulário.

Passo 6: Personalizar os marcadores do mapa e a exibição

Algumas alterações que fazem com que o mapa pareça personalizado em vez de genérico:

Marcadores personalizados — Para cada localização, abra o menu suspenso Ícone e escolha:

• Ícone — escolha entre mais de 2.000 ícones do Font Awesome (pesquise no seletor de ícones). O predefinido é uma estrela.
• Imagem — clique em Carregar imagem para usar o seu logótipo ou um marcador personalizado da sua biblioteca de multimédia.

Em seguida, defina o Tamanho (Pequeno, Médio ou Grande) e a cor usando o seletor (cores predefinidas, um seletor personalizado de arrastar e largar, ou um valor hexadecimal). Um marcador personalizado maior ajuda as suas lojas a destacarem-se de outros negócios no mapa.

Definições do separador Avançadas — clique no separador Avançadas em Opções de Campo para controlos de apresentação e interação:

• Apresentação: Ocultar Ecrã Inteiro, Ocultar Tipo de Mapa (satélite/terreno), Ocultar Informações de Localização (pop-ups que aparecem ao clicar num marcador), Ocultar Vista de Rua. A maioria está oculta por predefinição para um aspeto mais limpo.
• Interativo: Ocultar Controlo da Câmara, Ocultar Zoom, Desativar Arrastar, Desativar Zoom do Rato.
• Outros: Mostrar na Entrada, Mostrar Miniatura na Entrada (como o mapa aparece nos registos de submissão), Ocultar Etiqueta.

Passo 7: Usar lógica condicional para mostrar detalhes apenas para recolha

Aqui está um detalhe que a maioria dos tutoriais omite: o seu formulário de encomenda provavelmente tem campos que só se aplicam à recolha ou ao envio — não a ambos. Se estiver a oferecer ambas as opções, adicione um botão de rádio no topo do formulário: “Como gostaria de receber a sua encomenda?” com as opções Recolha e Envio.

Em seguida, use a lógica condicional (integrada no WPForms Pro) para mostrar:

• O campo Mapa apenas quando "Recolha" for selecionado.
• Os campos de morada de envio apenas quando "Envio" for selecionado.

Isto mantém o seu formulário curto e relevante para o que o cliente realmente deseja.

Passo 8: Testar, depois publicar

Guarde o seu formulário e incorpore-o numa página usando o bloco WPForms. Antes de o promover em qualquer lugar, teste-o você mesmo em ambiente de secretária e telemóvel:

• O mapa carrega rapidamente?
• A sua localização selecionada aparece realmente no e-mail de confirmação?
• Aparece corretamente em WPForms » Entradas quando olha para a submissão?

No separador Avançadas, certifique-se de que Mostrar na Entrada (e opcionalmente Mostrar Miniatura na Entrada) está ativado — isto é o que torna a localização selecionada pelo cliente visível para quem estiver a preparar as encomendas do lado da recolha.

Onde muitos proprietários de lojas levam isto a seguir

Depois de ter o formulário básico de recolha a funcionar, duas atualizações valem a pena conhecer:

• Integração com o Google Calendar. Conecte o formulário ao calendário partilhado da sua equipa para que cada recolha apareça automaticamente como um evento. Alguns clientes do WPForms disseram-nos que isto substituiu um bloco de notas no balcão que levava a reservas duplicadas.
• Guardar e Retomar. Se o seu formulário de encomenda for longo, Guardar e Retomar permite aos clientes voltar mais tarde sem perder o progresso.

Nenhum deles é obrigatório para que o seletor de recolha funcione, são apenas atualizações úteis quando estiver pronto.

E essa é toda a configuração! Um campo de Mapa, mais o complemento Geolocation e alguns minutos de configuração proporcionam um seletor de recolha interativo e real.

Pronto para adicionar a recolha ao seu site? Adquira o WPForms Pro, se ainda não o fez, instale o complemento Geolocation e comece com o modelo de Formulário de Pedido de Recolha na Loja. Pode ter um formulário a funcionar em pouco tempo!

FAQs Sobre a Adição de um Seletor de Recolha na Loja

Preciso do WPForms Pro para usar o campo de Mapa?

Sim. O campo de Mapa faz parte do complemento Geolocation, que está incluído na licença Pro ou superior. Se estiver a usar o WPForms Lite ou Basic, terá de atualizar antes que o complemento fique disponível.

A API do Google Places é gratuita para usar?

O Google Cloud requer uma conta de faturação, mas o Google Places inclui um crédito mensal generoso que cobre o uso gratuito para a maioria das pequenas empresas. A menos que esteja a gerar um tráfego massivo para o seu formulário, ficará quase certamente dentro do nível gratuito. Também pode definir limites de uso rígidos no Google Cloud, se quiser ter tranquilidade.

Qual é a diferença entre o campo de Endereço e o campo de Mapa?

O campo de Endereço recolhe o endereço do cliente — ele digita-o e o autocompletar ajuda-o a escolher o correto. O campo de Mapa exibe as suas localizações pré-configuradas num mapa e permite que os clientes escolham uma. Para um seletor de recolha, quer o campo de Mapa. Para um endereço de envio, quer o campo de Endereço. Muitos formulários de pedido usam ambos.

Quantas localizações de recolha posso adicionar a um único campo de Mapa?

Não há um limite rígido — pode continuar a clicar no botão + para adicionar mais. Na prática, eu manteria abaixo de 10 num único formulário. Se for uma cadeia regional com mais de 30 localizações, considere adicionar primeiro um campo de código postal e usar a lógica condicional para mostrar apenas as lojas próximas relevantes.

Posso ocultar outros neg ilde{A³}}cios e pontos de interesse no meu mapa?

Sim, mas requer um passo extra. Para ocultar POIs como restaurantes e lojas vizinhas, para que apenas os seus marcadores personalizados sejam exibidos, terá de criar um estilo de mapa personalizado na Google Cloud Console e aplicá-lo ao campo de Mapa usando um trecho de código. O WPForms tem documentação para programadores sobre a aplicação de estilos de mapa personalizados se quiser seguir este caminho.

Como vejo qual localização um cliente escolheu após o envio do formulário?

Vá a WPForms » Entradas e abra o envio. A localização selecionada aparece nos detalhes da entrada, incluindo o nome e o endereço. Certifique-se de que Mostrar na Entrada está ativado no separador Avançado do campo de Mapa (está por defeito) para que a localização seja exibida nos registos de entrada e nas notificações por e-mail.

Posso conectar envios de recolha ao Google Calendar?

Sim — e é uma das atualizações mais úteis para um formulário de recolha. Instale o complemento Google Calendar e conecte o seu formulário a um calendário de equipa partilhado para que cada pedido de recolha crie automaticamente um evento de calendário. Isto substitui o problema do caderno no balcão com que muitas lojas lidam.

Em seguida, Crie um Formulário de Reserva WordPress com Múltiplas Localizações

Colocar um seletor de recolha no seu formulário de encomenda não é a única forma de utilizar esta funcionalidade poderosa. Está a reservar compromissos ou eventos com os seus formulários WordPress? Porque não transformá-lo num formulário de reserva multilocação? Com o campo de mapa, pode! Veja o tutorial completo para saber como.

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.