Comment ajouter un sélecteur de retrait en magasin à votre formulaire de commande WordPress

Imaginez le scénario suivant : un client arrive sur votre site, ajoute deux articles à son panier et passe à la caisse, prêt à acheter. Puis, lorsqu'il arrive à la section « Livraison », il s'arrête. Il habite à trois pâtés de maisons de votre boutique. Va-t-il vraiment payer des frais de livraison et attendre deux jours alors qu'il pourrait venir à pied pendant sa pause déjeuner ?

Si votre formulaire ne propose pas d'option de retrait, ils fermeront probablement l'onglet et vous contacteront à la place. Ou pire encore, ils achèteront chez un concurrent qui facilite le retrait.

Le service « Acheter en ligne, retirer en magasin » (BOPIS) n'est plus réservé aux grands détaillants. Les commerces de proximité, les restaurants, les boulangeries et même les fleuristes le proposent désormais, car c'est ce qu'attendent les clients. Et la bonne nouvelle, c'est qu'il n'est pas nécessaire de disposer d'une plateforme de commerce électronique complète pour le mettre en place. Grâce à WPForms et à l'extension Geolocation, vous pouvez ajouter un sélecteur interactif de retrait en magasin à n'importe lequel de vos formulaires de commande WordPress.

Je peux vous montrer exactement comment faire. C'est parti !

Comment ajouter un sélecteur de retrait en magasin à votre formulaire de commande WordPress (étape par étape)

Ce dont vous aurez besoin avant de commencer

Petit tour d'horizon avant de se lancer :

• WPForms Pro ou version supérieure. L'extension de géolocalisation est incluse dans les formules Pro et supérieures.
• L'extension de géolocalisation est installée et activée.
• Une clé API Google Places ou un jeton d'accès Mapbox. Les deux fonctionnent — nous vous expliquerons comment configurer l'un ou l'autre.
• Une liste de vos points de retrait avec leurs adresses complètes, les noms des commerces et toutes les informations que vous souhaitez communiquer à vos clients (horaires d'ouverture, remarques concernant le stationnement, indications pour accéder à l'entrée).

Et voilà ! Du code personnalisé ? Non. Un plugin dédié pour localiser les magasins ? Pas besoin. Jongler entre plusieurs outils ? Jamais !

Mais aussi… Pourquoi ?

Pourquoi ajouter un sélecteur de micro plutôt qu'un simple menu déroulant ?

Vous pourriez utiliser un simple menu déroulant répertoriant les adresses de vos magasins. Ça fonctionnerait. Mais une carte interactive offre trois avantages qu’un menu déroulant ne pourra jamais offrir :

• Cela permet de répondre visuellement à la question « lequel est le plus proche de chez moi ? ». C'est particulièrement utile si les noms de vos lieux ne sont pas évidents (un client pourrait ne pas connaître la différence entre « Riverside » et « Bridgeview » de par leur nom).
• Cela renforce la confiance. Une véritable épingle sur la carte montre aux clients que vous êtes une véritable entreprise disposant d'une adresse réelle. C'est important pour les nouveaux clients.
• Cela permet d'éviter les confusions lors du retrait. Lorsqu'un client voit le repère sur la carte et le sélectionne lui-même, il y a beaucoup moins de risques qu'il se présente au mauvais endroit.

Étape 1 : Installez et activez l'extension de géolocalisation

Connectez-vous à votre tableau de bord WordPress et rendez-vous dans WPForms » Extensions. Recherchez « Géolocalisation » et cliquez sur « Installer l'extension ». WordPress s'occupe du reste.

Une fois cette fonctionnalité activée, un nouvel onglet « Géolocalisation » apparaîtra dans les paramètres de WPForms.

Étape 2 : Connecter Google Places

Le champ « Carte » récupère les données cartographiques depuis Google Places. Vous aurez besoin d'un compte Google Cloud gratuit et d'une clé API.

Une fois que vous avez obtenu votre clé API, rendez-vous dans WPForms » Paramètres » Géolocalisation, collez-y la clé, puis enregistrez les paramètres.

Si vous rencontrez des difficultés à l'étape de la clé API, vous trouverez dans la documentation du module complémentaire de géolocalisation un guide de configuration détaillé qui vous guide étape par étape à travers la console Google Cloud.

C'est la seule étape un peu technique de toute la configuration : elle prend environ 10 minutes, et vous ne la faites qu'une seule fois.

Étape 3 : Commencez par le modèle de formulaire de commande à retirer en magasin

Vous pouvez le créer de A à Z, mais WPForms propose déjà un modèle qui vous épargne 90 % du travail. Dans WPForms, sous « Ajouter », recherchez «Formulaire de commande avec retrait en magasin ».

Le modèle comprend d'emblée :

• Sélection de produits à partir d'images
• Options de quantité et de couleur
• Champs relatifs aux coordonnées du client
• Un champ « Carte » pour la sélection d'un lieu
• Un champ de carte de crédit Stripe
• Un total calculé qui s'actualise en temps réel
• Cases à cocher de acceptation des conditions

Avec ce modèle, vous disposez d'un formulaire de commande fonctionnel, avec un sélecteur de retrait déjà intégré. À partir de là, il s'agit de le personnaliser, et non de le créer de toutes pièces.

Étape 4 : Ajoutez vos points de retrait dans le champ « Carte »

Dans le générateur de formulaires, recherchez le champ « Carte » dans la section « Champs avancés ». Cliquez dessus ou faites-le glisser dans l'aperçu du formulaire pour l'ajouter.

Cliquez ensuite sur le champ « Carte » dans l'aperçu pour ouvrir ses options. Sous l'onglet « Général », vous trouverez une section « Emplacements » contenant des champs pour chaque point de retrait que vous souhaitez afficher.

Pour chaque site :

1. Saisissez une adresse dans le champ « Adresse ». Google Places proposera des suggestions automatiques : sélectionnez celle qui correspond.
2. Ajoutez un nom (quelque chose que les clients reconnaîtront, comme « Magasin phare du centre-ville » ou « Point de retrait Eastside »).
3. Ajoutez une description facultative : c'est là que vous indiquez les informations qui permettent d'éviter les appels au service client (horaires de retrait, porte à utiliser, s'il faut appeler à l'arrivée).
4. Cliquez sur le bouton + pour ajouter le lieu suivant.

Quelques paramètres administratifs qu'il est bon de connaître :

• Rechercher des points de retrait à proximité — lorsque vous activez cette option dans l'éditeur, votre navigateur vous demande votre emplacement (celui de l'administrateur), et la fonction de saisie semi-automatique de l'adresse privilégie les suggestions situées près de chez vous. Cette fonctionnalité est pratique si tous vos points de retrait se trouvent dans la même ville que votre bureau. Elle n'a aucune incidence sur ce que les clients voient sur l'interface publique.
• Niveau de zoom — la valeur par défaut est 15, ce qui correspond à un bon niveau de zoom au niveau de la rue. Ce paramètre n'est utilisé que lorsque vous n'avez qu'un seul emplacement ; dès que vous ajoutez plusieurs emplacements et activez la sélection, la carte s'ajuste automatiquement pour les afficher tous et ce paramètre est désactivé.

Étape 5 : Transformer la carte en sélecteur (c'est l'étape la plus importante)

Par défaut, le champ « Carte » est en lecture seule : les clients peuvent consulter vos points de retrait, mais ne peuvent pas en sélectionner un. Pour en faire un véritable sélecteur de point de retrait, activez ces deux boutons dans l'onglet « Général » :

• Afficher la liste des lieux — affiche le nom et l'adresse de chaque lieu sous forme de liste de texte sous la carte. Cette fonctionnalité est importante pour l'accessibilité et pour les utilisateurs mobiles qui ont du mal à distinguer les petits repères sur la carte.
• Autoriser la sélection d'un lieu — ajoute des boutons radio à côté de chaque lieu de la liste. C'est ce qui transforme la carte en champ de saisie.

Étape 6 : Personnaliser les repères et l'affichage de la carte

Quelques petites modifications qui permettent à la carte de refléter l'identité de la marque plutôt que de paraître générique :

Marqueurs personnalisés — Pour chaque emplacement, ouvrez le menu déroulant « Icône » et sélectionnez :

• Icône — choisissez parmi plus de 2 000 icônes Font Awesome (effectuez une recherche dans le sélecteur d'icônes). L'icône par défaut est une étoile.
• Image — cliquez sur « Télécharger une image » pour utiliser votre logo ou un pin personnalisé issu de votre bibliothèque multimédia.

Définissez ensuite la taille (Petit, Moyen ou Grand) et la couleur à l'aide du sélecteur (couleurs prédéfinies, sélecteur personnalisé par glisser-déposer ou valeur hexadécimale). Un marqueur de marque plus grand permet à vos magasins de se démarquer des autres commerces sur la carte.

Paramètres de l'onglet Avancé — cliquez sur l'onglet Avancé dans les Options de champ pour accéder aux commandes de présentation et d'interaction :

• Présentation : Masquer le mode plein écran, masquer le type de carte (satellite/terrain), masquer les informations de localisation (fenêtres contextuelles qui s'affichent lorsque l'on clique sur un repère), masquer Street View. La plupart de ces éléments sont masqués par défaut pour une interface plus épurée.
• Interactif : Masquer les commandes de la caméra, masquer le zoom, désactiver le glisser-déposer, désactiver le zoom à la souris.
• Autres : Afficher dans l'entrée, Afficher la vignette dans l'entrée (comment la carte s'affiche dans les fiches de soumission), Masquer le libellé.

Étape 7 : Utilisez la logique conditionnelle pour afficher les informations relatives au retrait en magasin

Voici un détail que la plupart des tutoriels omettent : votre formulaire de commande comporte probablement des champs qui ne s'appliquent qu'au retrait ou à l'expédition — et non aux deux. Si vous proposez ces deux options, ajoutez un bouton radio en haut du formulaire : « Comment souhaitez-vous recevoir votre commande ? » avec les options « Retrait » et « Expédition ».

Utilisez ensuite la logique conditionnelle (intégrée à WPForms Pro) pour afficher :

• Le champ « Carte » n'apparaît que lorsque l'option « Enlèvement » est sélectionnée.
• Les champs relatifs à l'adresse de livraison ne s'affichent que lorsque l'option « Expédier » est sélectionnée.

Cela permet de garder votre formulaire concis et adapté aux besoins réels du client.

Étape 8 : Testez-le, puis publiez-le

Enregistrez votre formulaire et intégrez-le à une page à l'aide du bloc WPForms. Avant de le diffuser, testez-le vous-même sur ordinateur et sur mobile :

• La carte se charge-t-elle rapidement ?
• Le lieu que vous avez sélectionné apparaît-il bien dans l'e-mail de confirmation ?
• Est-ce que cela s'affiche correctement dans WPForms » Entrées lorsque vous consultez la soumission ?

Dans l'onglet « Avancé », assurez-vous que l'option « Afficher dans la commande » (et, si vous le souhaitez, « Afficher la vignette dans la commande ») est activée : c'est ce qui permet à la personne chargée de préparer les commandes au point de retrait de voir le lieu choisi par le client.

C'est là que beaucoup de commerçants se trompent

Une fois que votre formulaire de prise en charge de base fonctionne, il y a deux améliorations qu'il est utile de connaître :

• Intégration à Google Agenda. Reliez le formulaire au calendrier partagé de votre équipe afin que chaque retrait apparaisse automatiquement sous forme d'événement. Plusieurs clients de WPForms nous ont confié que cette solution avait remplacé le carnet papier utilisé au comptoir, qui était souvent à l'origine de doubles réservations.
• Enregistrer et reprendre. Si votre formulaire de commande est long, la fonction « Enregistrer et reprendre » permet aux clients de revenir plus tard sans perdre leur progression.

Aucun des deux n'est indispensable au bon fonctionnement du sélecteur de micro ; ce ne sont que des améliorations intéressantes lorsque vous êtes prêt à les installer.

Et voilà, c'est tout ! Il suffit d'un champ « Carte », de l'extension « Géolocalisation » et de quelques minutes de configuration pour obtenir un véritable sélecteur de point de retrait interactif.

Prêt à ajouter la fonction de retrait en magasin à votre site ? Procurez-vous WPForms Pro si ce n'est pas déjà fait, installez l'extension de géolocalisation, puis lancez-vous avec le modèle de formulaire de commande avec retrait en magasin. Vous aurez un formulaire opérationnel en un rien de temps !

Foire aux questions sur l'ajout d'un sélecteur de retrait en magasin

Ai-je besoin de WPForms Pro pour utiliser le champ « Carte » ?

Oui. Le champ « Carte » fait partie de l'extension « Géolocalisation », qui est incluse dans la licence Pro ou supérieure. Si vous utilisez WPForms Lite ou Basic, vous devrez passer à une version supérieure pour pouvoir utiliser cette extension.

L'API Google Places est-elle gratuite ?

Google Cloud nécessite un compte de facturation, mais Google Places offre un crédit mensuel généreux qui couvre l'utilisation gratuite pour la plupart des petites entreprises. À moins que votre formulaire ne génère un trafic massif, vous resterez très certainement dans les limites du forfait gratuit. Vous pouvez également définir des limites d'utilisation strictes dans Google Cloud si vous souhaitez avoir l'esprit tranquille.

Quelle est la différence entre le champ « Adresse » et le champ « Carte » ?

Le champ « Adresse » permet de saisir l'adresse du client : celui-ci la saisit, puis la fonction de saisie semi-automatique l'aide à sélectionner la bonne adresse. Le champ « Carte » affiche vos points de vente préconfigurés sur une carte et permet aux clients d'en choisir un. Pour un sélecteur de retrait, utilisez le champ « Carte ». Pour une adresse de livraison, utilisez le champ « Adresse ». De nombreux formulaires de commande utilisent les deux.

Combien de points de retrait puis-je ajouter dans un seul champ « Carte » ?

Il n'y a pas de limite stricte : vous pouvez continuer à cliquer sur le bouton « + » pour en ajouter d'autres. Dans la pratique, je vous conseille de ne pas dépasser 10 champs par formulaire. Si vous êtes une chaîne régionale comptant plus de 30 points de vente, pensez à ajouter d'abord un champ « code postal » et à utiliser une logique conditionnelle pour n'afficher que les magasins à proximité qui sont pertinents.

Puis-je masquer d'autres entreprises et points d'intérêt sur ma carte ?

Oui, mais cela nécessite une étape supplémentaire. Pour masquer les points d'intérêt (POI) tels que les restaurants et les commerces à proximité afin que seuls vos marqueurs personnalisés s'affichent, vous devrez créer unstyle de carte personnalisédans la Google Cloud Console et l'appliquer au champ « Carte » à l'aide d'un extrait de code. WPForms proposeune documentation destinée aux développeurs sur l'application de styles de carte personnaliséssi vous souhaitez suivre cette voie.

Comment puis-je savoir quel lieu un client a sélectionné après avoir envoyé le formulaire ?

Accédez à WPForms » Entrées et ouvrez le formulaire. Le lieu sélectionné apparaît dans les détails de l'entrée, avec le nom et l'adresse. Assurez-vous que l'option « Afficher dans l'entrée » est activée dans l'onglet « Avancé » du champ « Carte » (c'est le cas par défaut) afin que le lieu s'affiche dans les enregistrements des entrées et les notifications par e-mail.

Puis-je synchroniser les demandes de retrait avec Google Agenda ?

Oui, et c'est l'une des améliorations les plus utiles pour un formulaire de retrait. Installez l'extension Google Agenda et reliez votre formulaire à un agenda d'équipe partagé afin que chaque commande à retirer crée automatiquement un événement dans l'agenda. Cela permet d'éviter le problème du carnet de notes au comptoir auquel sont confrontés de nombreux magasins.

Ensuite, créez un formulaire de réservation WordPress pour plusieurs sites

Ajouter un sélecteur de retrait à votre formulaire de commande n'est pas la seule façon de tirer parti de cette fonctionnalité puissante. Vous utilisez vos formulaires WordPress pour prendre des rendez-vous ou gérer des événements ? Pourquoi ne pas en faire un formulaire de réservation multi-sites? Grâce au champ « carte », c'est possible ! Consultez le tutoriel complet pour découvrir comment faire.

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de construction de formulaire WordPress le plus facile à utiliser. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, n'hésitez pas à nous suivre sur Facebook et Twitter pour d'autres tutoriels et guides gratuits sur WordPress.