Como adicionar um seletor de retirada na loja ao seu formulário de pedido do WordPress

Imagine o seguinte cenário: um cliente acessa seu site, adiciona dois itens ao carrinho e segue para o checkout, pronto para comprar. Então, ao chegar à seção de frete, ele hesita. Ele mora a apenas três quarteirões da sua loja. Será que ele realmente quer pagar pelo frete 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 retirada, eles provavelmente fecharão a aba e entrarão em contato com você. Ou, pior ainda, comprarão de um concorrente que facilite a retirada.

O serviço “Compre online, retire na loja” (BOPIS) já não é exclusivo das grandes redes varejistas. Lojas locais, restaurantes, padarias e até mesmo floriculturas estão oferecendo esse serviço porque os clientes esperam isso. E a boa notícia é que você não precisa de uma plataforma completa de comércio eletrônico para que isso funcione. Com o WPForms e o complemento de geolocalização, você pode adicionar um seletor interativo de retirada na loja a qualquer um dos seus formulários de pedido do WordPress.

Posso te mostrar exatamente como fazer isso. Vamos lá!

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

O que você vai precisar antes de começar

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

• WPForms Pro ou versão 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. Ambos funcionam — vamos explicar como configurar qualquer um deles.
• Uma lista dos seus pontos de retirada com endereços completos, nomes das empresas e quaisquer detalhes que você queira que os clientes vejam (horário de funcionamento, informações sobre estacionamento, instruções de acesso).

É isso aí! Código personalizado? Não. Um plugin separado para localizador de lojas? Não é necessário. Ter que ficar alternando entre ferramentas? Nem pensar!

Mas também… Por quê?

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

Você poderia usar um campo suspenso comum que listasse os endereços das suas lojas. Isso funcionaria. Mas um mapa interativo oferece três vantagens que um menu suspenso nunca terá:

• Isso responde visualmente à pergunta “qual fica mais perto de mim?”. Isso é especialmente útil se os nomes dos locais não forem muito conhecidos (um cliente pode não saber a diferença entre “Riverside” e “Bridgeview” apenas pelo nome).
• Isso gera confiança. Um marcador de mapa real mostra aos clientes que você é uma empresa de verdade, com um endereço real. Isso é importante para quem compra pela primeira vez.
• Isso reduz os erros na retirada. Quando um cliente vê o marcador no mapa e o seleciona por conta própria, é muito menos provável que ele chegue ao local errado.

Passo 1: Instale e ative o complemento de geolocalização

Faça login no painel do WordPress e acesse WPForms » Complementos. Pesquise por “Geolocalização” e clique em Instalar complemento. O WordPress cuida do resto.

Assim que estiver ativada, você verá uma nova guia “Geolocalização” aparecer nas configurações do WPForms.

Passo 2: Conectar o Google Places

O campo "Mapa" obtém dados de mapas do Google Places. Você precisará de uma conta gratuita no Google Cloud e de uma chave de API.

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

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

Esta é a única etapa um pouco técnica de toda a configuração — leva cerca de 10 minutos e você só precisa fazê-la uma vez.

Passo 3: Comece com o modelo do formulário de pedido para retirada na loja

Você pode criar isso do zero, mas o WPForms já tem um modelo que faz 90% do trabalho por você. Em WPForms » Adicionar novo, procure por“Formulário de pedido para retirada na loja”.

O modelo vem pré-carregado com:

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

Com este modelo, você já tem um formulário de pedido funcional com um seletor de retirada integrado. A partir daqui, basta personalizar — não é preciso criar do zero.

Passo 4: Adicione seus pontos de retirada no campo “Mapa”

No criador de formulários, localize o campo “Mapa” na seção “Campos avançados”. Clique nele ou arraste-o para a visualização do formulário para adicioná-lo.

Em seguida, clique no campo “Mapa” na visualização para abrir as “Opções do campo”. Na guia “Geral”, você verá uma seção “Locais” com campos para cada ponto de retirada que deseja exibir.

Para cada local:

1. Digite um endereço no campo "Endereço". O Google Places irá sugerir opções — escolha a opção correta.
2. Adicione um nome (algo que os clientes reconheçam, como “Loja Principal no Centro” ou “Balcão de Retirada na Zona Leste”).
3. Adicione uma descrição opcional — é aqui que você coloca os detalhes que evitam ligações para o atendimento ao cliente (horário de retirada, qual porta usar, se é preciso ligar ao chegar).
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 você ativa essa opção no construtor, o navegador solicita sua localização (a do administrador) e o preenchimento automático de endereços prioriza sugestões próximas a você. É útil se todos os seus pontos de retirada estiverem na mesma cidade que o seu escritório. Isso não afeta o que os clientes veem no front-end.
• Nível de zoom — o padrão é 15, o que é um bom nível de zoom para visualização ao nível da rua. Essa configuração só é usada quando há um único local; assim que você adicionar vários locais e ativar a seleção, o mapa se ajusta automaticamente para mostrá-los todos e essa configuração é desativada.

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

Por padrão, o campo “Mapa” é apenas para visualização — os clientes podem ver seus locais, mas não podem selecionar um. Para transformá-lo em um seletor de retirada de verdade, ative estas duas opções na guia “Geral”:

• Mostrar lista de locais — exibe o nome e o endereço de cada local em uma lista de texto abaixo do mapa. Isso é importante para a acessibilidade e para usuários 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. É isso que transforma o mapa em um campo de formulário.

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

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

Marcadores personalizados — Para cada local, 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 usar seu logotipo ou um pin personalizado da sua biblioteca de mí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 soltar ou um valor hexadecimal). Um marcador com a marca maior ajuda suas lojas a se destacarem em relação a outras empresas no mapa.

Configurações da guia "Avançado" — clique na guia "Avançado" em "Opções de campo" para acessar os controles de apresentação e interação:

• Apresentação: Ocultar tela cheia, ocultar tipo de mapa (satélite/terreno), ocultar informações de localização (janelas pop-up que aparecem ao clicar em um marcador), ocultar Street View. A maioria está oculta por padrão para proporcionar uma aparência mais limpa.
• Interativo: Ocultar controle da câmera, Ocultar zoom, Desativar arrastar, Desativar zoom com o mouse.
• Outros: Mostrar na entrada, Mostrar miniatura na entrada (como o mapa aparece nos registros de envio), Ocultar legenda.

Passo 7: Use lógica condicional para mostrar detalhes exclusivos para retirada

Aqui está um detalhe que a maioria dos tutoriais deixa de lado: seu formulário de pedido provavelmente tem campos que se aplicam apenas à retirada ou ao envio — não a ambos. Se você estiver oferecendo as duas opções, adicione um botão de opção na parte superior do formulário: “Como você gostaria de receber seu pedido?”, com as opções Retirada e Envio.

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

• O campo "Mapa" só aparece quando a opção "Retirada" estiver selecionada.
• Os campos de endereço de entrega só aparecem quando a opção “Enviar” é selecionada.

Isso mantém o formulário conciso e relevante para o que o cliente realmente deseja.

Passo 8: Teste e, em seguida, publique

Salve seu formulário e incorpore-o em uma página usando o bloco do WPForms. Antes de divulgá-lo em qualquer lugar, teste-o você mesmo tanto no computador quanto no celular:

• O mapa carrega rapidamente?
• O local que você selecionou aparece mesmo no e-mail de confirmação?
• A informação aparece corretamente em WPForms » Entradas quando você visualiza o envio?

Na guia “Avançado”, certifique-se de que a opção “Mostrar na entrada” (e, opcionalmente, “Mostrar miniatura na entrada”) esteja ativada — é isso que torna a localização selecionada pelo cliente visível para quem estiver preparando os pedidos na área de retirada.

É aí que muitos donos de lojas cometem o seguinte erro

Depois de ter o formulário básico de captação funcionando, vale a pena conhecer duas atualizações:

• Integração com o Google Agenda. Conecte o formulário ao calendário compartilhado da sua equipe para que cada retirada apareça automaticamente como um evento. Alguns clientes do WPForms nos contaram que isso substituiu o caderno de papel que ficava no balcão e que sempre causava reservas duplicadas.
• Salvar e retomar. Se o seu formulário de pedido for extenso, a opção “Salvar e retomar” permite que os clientes voltem mais tarde sem perder o progresso.

Nenhum dos dois é necessário para que o seletor de captadores funcione; são apenas ótimas opções de upgrade para quando você estiver pronto.

E é isso! O campo de mapa, o complemento de geolocalização e alguns minutos de configuração são tudo o que você precisa para ter um seletor de pontos de retirada interativo e funcional.

Pronto para adicionar a opção de retirada na loja ao seu site? Adquira o WPForms Pro, caso ainda não o tenha feito, instale o complemento de geolocalização e comece com o modelo de formulário de pedido para retirada na loja. Você terá um formulário funcional em pouco tempo!

Perguntas frequentes sobre como adicionar um seletor de retirada na loja

Preciso do WPForms Pro para usar 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 você estiver usando o WPForms Lite ou Basic, precisará fazer o upgrade para que o complemento fique disponível.

A API do Google Places é gratuita?

O Google Cloud exige uma conta de cobrança, mas o Google Places oferece um generoso crédito mensal que cobre o uso gratuito para a maioria das pequenas empresas. A menos que você esteja direcionando um tráfego enorme para o seu formulário, é quase certo que você permanecerá dentro do plano gratuito. Você também pode definir limites rígidos de uso no Google Cloud, se quiser ter tranquilidade.

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

O campo “Endereço” coleta o endereço do cliente — ele o digita, e o preenchimento automático o ajuda a escolher o endereço correto. O campo “Mapa” exibe seus locais pré-configurados em um mapa e permite que os clientes escolham um. Para um seletor de retirada, use o campo “Mapa”. Para um endereço de entrega, use o campo “Endereço”. Muitos formulários de pedido utilizam ambos.

Quantos pontos de retirada posso adicionar a um único campo de mapa?

Não há um limite rígido — você pode continuar clicando no botão + para adicionar mais. Na prática, eu recomendaria não ultrapassar 10 em um único formulário. Se você for uma rede regional com mais de 30 lojas, considere adicionar primeiro um campo de CEP e usar 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 próximas, de modo que apenas seus marcadores personalizados sejam exibidos, você precisará criar umestilo de mapa personalizadono Google Cloud Console e aplicá-lo ao campo “Mapa” usando um trecho de código. O WPForms disponibilizadocumentação para desenvolvedores sobre como aplicar estilos de mapa personalizados, caso você opte por seguir esse caminho.

Como posso saber qual local o cliente selecionou após enviar o formulário?

Acesse WPForms » Entradas e abra o formulário enviado. O local selecionado aparece nos detalhes da entrada, incluindo o nome e o endereço. Certifique-se de que a opção “Mostrar na entrada” esteja ativada na guia “Avançado” do campo “Mapa” (ela vem ativada por padrão) para que o local seja exibido nos registros das entradas e nas notificações por e-mail.

Posso vincular os pedidos de retirada ao Google Agenda?

Sim — e essa é uma das melhorias mais úteis para um formulário de retirada. Instale o complemento do Google Agenda e conecte seu formulário a um calendário compartilhado da equipe para que cada pedido de retirada crie automaticamente um evento no calendário. Isso resolve o problema do caderno no balcão com o qual muitas lojas se deparam.

Em seguida, crie um formulário de reservas do WordPress para vários locais

Incluir um seletor de retirada no seu formulário de pedido não é a única maneira de usar esse recurso poderoso. Você está agendando consultas ou eventos com seus formulários do WordPress? Por que não transformá-lo em um formulário de agendamento com vários locais? Com o campo de mapa, você consegue! Confira o tutorial completo para saber como.

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.