Como adicionar um seletor de recolha na loja ao seu formulário de encomenda do WordPress

Imagine o seguinte cenário: um cliente acede ao seu site, adiciona dois artigos ao carrinho e avança para o checkout, pronto para comprar. Depois, chega à secção de envios e hesita. Ele mora a três quarteirões da sua loja. Será que quer mesmo pagar pelo envio e esperar dois dias, quando poderia simplesmente ir até lá a pé na hora do almoço?

Se o seu formulário não oferecer a opção de levantamento, é provável que eles fechem a página e, em vez disso, entrem em contacto consigo. Ou pior ainda, comprem a um concorrente que facilite o levantamento.

O serviço «Compre online, recolha na loja» (BOPIS) já não é exclusivo dos grandes retalhistas. Lojas locais, restaurantes, padarias e até floristas estão a oferecer este serviço porque os clientes já o esperam. E a boa notícia é que não precisa de uma plataforma de comércio eletrónico completa para o implementar. Com o WPForms e o complemento de geolocalização, pode adicionar um seletor interativo de recolha na loja a qualquer um dos seus formulários de encomenda do WordPress.

Posso mostrar-te exatamente como se faz. Vamos lá!

Como adicionar um seletor de recolha na loja ao seu formulário de encomenda do WordPress (passo a passo)

O que vai precisar antes de começar

Uma rápida verificação do inventário antes de começarmos:

• WPForms Pro ou superior. O complemento de geolocalização está incluído nos planos Pro e superiores.
• O complemento de geolocalização está instalado e ativado.
• Uma chave da API do Google Places ou um token de acesso do Mapbox. Qualquer uma delas funciona — vamos explicar como configurar ambas.
• Uma lista dos seus pontos de recolha com endereços completos, nomes das empresas e quaisquer detalhes que pretenda que os clientes vejam (horário de funcionamento, informações sobre estacionamento, instruções de acesso).

É isso mesmo! Código personalizado? Não. Um plugin separado para localizar lojas? Não é necessário. Ter de alternar entre várias ferramentas? Nem pensar!

Mas também… Porquê?

Por que adicionar um seletor de captadores em vez de um simples menu suspenso?

Pode utilizar um campo suspenso normal que liste as localizações das suas lojas. Funcionaria. Mas um mapa interativo faz três coisas que um menu suspenso nunca fará:

• Responde visualmente à pergunta «qual é o local mais próximo de mim?». Isto é especialmente útil se os nomes dos locais não forem muito conhecidos (um cliente pode não saber distinguir «Riverside» de «Bridgeview» apenas pelo nome).
• Isso gera confiança. Um marcador de mapa real mostra aos clientes que a sua empresa é real e tem um endereço real. Isso é importante para quem compra pela primeira vez.
• Isso reduz as confusões na recolha. Quando um cliente vê o marcador no mapa e o seleciona por si próprio, é muito menos provável que se dirija ao local errado.

Passo 1: Instalar e ativar o complemento de geolocalização

Inicie sessão no painel de controlo do WordPress e aceda a WPForms » Complementos. Procure por «Geolocalização» e clique em «Instalar complemento». O WordPress trata do resto.

Assim que estiver ativada, irá ver aparecer um novo separador «Geolocalização» nas definições do WPForms.

Passo 2: Ligar o Google Places

O campo «Mapa» obtém dados de mapas do Google Places. É necessário ter uma conta gratuita no Google Cloud e uma chave de API.

Depois de obter a sua chave API, aceda a WPForms » Configurações » Geolocalização, cole a chave e guarde as configurações.

Se tiver dificuldades na etapa da chave API, temos um guia de configuração detalhado na documentação do Complemento de Geolocalização que o orienta passo a passo pela Consola do Google Cloud.

Este é o único passo um pouco técnico de toda a configuração — demora cerca de 10 minutos e só é necessário fazê-lo uma vez.

Passo 3: Comece com o modelo do formulário de encomenda para levantamento na loja

Pode criar isto do zero, mas o WPForms já tem um modelo que faz 90% do trabalho por si. Em WPForms » Adicionar novo, procure por«Formulário de encomenda para levantamento na loja».

O modelo vem pré-carregado com:

• Seleção de produtos com base em imagens
• Opções de quantidade e cor
• Campos de contacto do cliente
• Um campo de mapa para seleção da localização
• Um campo para cartão de crédito Stripe
• Um total calculado que é atualizado em tempo real
• Caixas de seleção de aceitação dos termos

Com este modelo, já dispõe de um formulário de encomenda funcional com um seletor de recolha já integrado. A partir daqui, basta personalizar — não precisa de criar tudo do zero.

Passo 4: Adicione os seus pontos de recolha no campo «Mapa»

No criador de formulários, procure o campo «Mapa» na secção «Campos avançados». 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 «Opções do campo». No separador «Geral», verá uma secção «Localizações» com campos para cada local de recolha que pretenda mostrar.

Para cada local:

1. Digite um endereço no campo «Endereço». O Google Places irá sugerir opções — escolha a correspondência correta.
2. Adicione um nome (algo que os clientes reconheçam, como «Loja principal no centro» ou «Balcão de recolha na zona leste»).
3. Adicione uma descrição opcional — é aqui que deve indicar os detalhes que evitam chamadas para o serviço de apoio ao cliente (horário de recolha, porta a utilizar, se deve ligar à chegada).
4. Clique no botão + para adicionar o próximo local.

Algumas configurações do painel de administração que vale a pena conhecer:

• Encontrar locais próximos — quando ativar esta opção no construtor, o seu navegador solicitará a sua localização (a do administrador) e o preenchimento automático de endereços dará prioridade às sugestões próximas de si. É útil se todos os seus pontos de recolha se encontrarem na mesma cidade que o seu escritório. Isto não afeta o que os clientes veem na interface do utilizador.
• Nível de zoom — o valor predefinido é 15, o que corresponde a um bom nível de zoom ao nível da rua. Esta configuração só é utilizada quando existe um único local; assim que adicionar vários locais e ativar a seleção, o mapa ajusta-se automaticamente para os mostrar a todos e esta configuração é desativada.

Passo 5: Transforme o mapa num seletor (este é o passo mais importante)

Por predefinição, o campo «Mapa» é apenas para visualização — os clientes podem ver as suas localizações, mas não podem selecionar nenhuma. Para o transformar num verdadeiro seletor de levantamento, ative estas duas opções na separador «Geral»:

• Mostrar lista de locais — apresenta o nome e a morada de cada local numa lista de texto abaixo do mapa. Isto é importante para a acessibilidade e para os utilizadores de dispositivos móveis que têm dificuldade em visualizar os pequenos marcadores no mapa.
• Permitir seleção de localização — adiciona botões de opção ao lado de cada local na lista. É isto que transforma o mapa num campo de formulário.

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

Algumas pequenas 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 selecione:

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

Em seguida, defina o tamanho (Pequeno, Médio ou Grande) e a cor utilizando o seletor (cores predefinidas, um seletor personalizado de arrastar e soltar ou um valor hexadecimal). Um marcador com a marca de maiores dimensões ajuda as suas lojas a destacarem-se das outras empresas no mapa.

Definições do separador «Avançado» — clique no separador «Avançado» em «Opções de campo» para aceder aos 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 (janelas pop-up que aparecem ao clicar num marcador), Ocultar Street View. A maioria está oculta por predefinição, para uma apresentação mais simples.
• Interativo: Ocultar controlo da câmara, Ocultar zoom, Desativar arrastar, Desativar zoom com o rato.
• Outros: Mostrar na entrada, Mostrar miniatura na entrada (como o mapa aparece nos registos de envio), Ocultar etiqueta.

Passo 7: Utilize lógica condicional para mostrar detalhes relativos apenas à recolha

Eis um pormenor que a maioria dos tutoriais ignora: o seu formulário de encomenda provavelmente tem campos que se aplicam apenas à recolha ou ao envio — não a ambos. Se estiver a oferecer ambas as opções, adicione um botão de opção no topo do formulário: «Como gostaria de receber a sua encomenda?», com as opções «Recolha» e «Envio».

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

• O campo «Mapa» só aparece quando se seleciona «Recolha».
• Os campos de endereço de entrega só aparecem quando se seleciona «Enviar».

Isto permite que o formulário seja curto e relevante para aquilo que o cliente realmente pretende.

Passo 8: Teste e, em seguida, publique

Guarde o seu formulário e incorpore-o numa página utilizando o bloco WPForms. Antes de o divulgar em qualquer lugar, teste-o você mesmo tanto no computador como no telemóvel:

• O mapa carrega rapidamente?
• O local que selecionou aparece realmente no e-mail de confirmação?
• A submissão aparece corretamente em WPForms » Entradas quando a visualiza?

No separador «Avançado», certifique-se de que a opção «Mostrar na entrada» (e, opcionalmente, «Mostrar miniatura na entrada») está ativada — é isto que torna a localização selecionada pelo cliente visível para quem estiver a preparar as encomendas na área de recolha.

É aqui que muitos lojistas cometem o seguinte erro

Depois de ter a funcionalidade básica de recolha a funcionar, há duas melhorias que vale a pena conhecer:

• Integração com o Google Calendar. Ligue o formulário ao calendário partilhado da sua equipa para que cada recolha apareça automaticamente como um evento. Alguns clientes da WPForms disseram-nos que isto substituiu o caderno de papel que estava no balcão e que causava constantemente reservas duplicadas.
• Guardar e retomar. Se o seu formulário de encomenda for extenso, a opção «Guardar e retomar» permite que os clientes voltem mais tarde sem perderem o progresso.

Nenhum dos dois é necessário para que o seletor de captadores funcione; são apenas melhorias interessantes para quando estiver pronto.

E é isso! Basta o campo «Mapa», o complemento «Geolocalização» e alguns minutos de configuração para ter um seletor de pontos de recolha verdadeiramente interativo.

Pronto para adicionar a opção de levantamento ao seu site? Adquira o WPForms Pro, se ainda não o fez, instale o complemento de geolocalização e comece com o modelo de formulário de encomenda para levantamento na loja. Em pouco tempo terá um formulário funcional e pronto a usar!

Perguntas frequentes sobre como adicionar um seletor de recolha na loja

Preciso do WPForms Pro para utilizar o campo «Mapa»?

Sim. O campo «Mapa» faz parte do complemento de geolocalização, que está incluído na licença Pro ou superior. Se estiver a utilizar o WPForms Lite ou Basic, terá de atualizar a sua licença para que o complemento fique disponível.

A API do Google Places é gratuita?

O Google Cloud requer uma conta de faturação, mas o Google Places inclui um crédito mensal generoso que cobre a utilização gratuita para a maioria das pequenas empresas. A menos que esteja a direcionar um tráfego massivo para o seu formulário, é quase certo que permanecerá dentro do plano gratuito. Também pode definir limites máximos de utilização no Google Cloud, se quiser ter tranquilidade.

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

O campo «Endereço» recolhe o endereço do cliente — este introduz o endereço e a funcionalidade de preenchimento automático ajuda-o a selecionar o endereço correto. O campo «Mapa» apresenta as suas localizações pré-configuradas num mapa e permite que os clientes selecionem uma. Para um seletor de levantamento, deve utilizar o campo «Mapa». Para um endereço de envio, deve utilizar o campo «Endereço». Muitos formulários de encomenda utilizam ambos.

Quantos locais de recolha posso adicionar a um único campo do mapa?

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

Posso ocultar outras empresas e pontos de interesse no meu mapa?

Sim, mas é necessário um passo adicional. Para ocultar pontos de interesse (POIs), como restaurantes e lojas nas proximidades, de modo a que apenas os seus marcadores personalizados sejam visíveis, terá de criar umestilo de mapa personalizadono Google Cloud Console e aplicá-lo ao campo «Mapa» utilizando um trecho de código. O WPForms disponibilizadocumentação para programadores sobre como aplicar estilos de mapa personalizados, caso opte por seguir este caminho.

Como posso ver qual a localização que um cliente selecionou depois de enviar o formulário?

Vá a WPForms » Entradas e abra o formulário preenchido. A localização selecionada aparece nos detalhes da entrada, incluindo o nome e a morada. Certifique-se de que a opção «Mostrar na entrada» está ativada no separador «Avançado» do campo «Mapa» (está ativada por predefinição), para que a localização seja apresentada nos registos das entradas e nas notificações por e-mail.

Posso associar os pedidos de recolha ao Google Calendar?

Sim — e é uma das melhorias mais úteis para um formulário de recolha. Instale o complemento do Google Calendar e ligue o seu formulário a um calendário partilhado da equipa, para que cada pedido de recolha crie automaticamente um evento no calendário. Isto resolve o problema do caderno no balcão com que muitas lojas se deparam.

A seguir, crie um formulário de reservas do WordPress para vários locais

Incluir um seletor de local de recolha no seu formulário de encomenda não é a única forma de utilizar esta funcionalidade poderosa. Está a marcar consultas ou eventos através dos seus formulários do WordPress? Porque não transformá-lo num formulário de marcação com vários locais? Com o campo de mapa, é possível! Consulte o tutorial completo para saber como.

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.