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

Imaginez ce scénario : un client arrive sur votre site, ajoute deux articles à son formulaire de commande et arrive à la caisse, prêt à acheter. Puis il arrive à la section d'expédition et s'arrête. Il habite à trois pâtés de maisons de votre boutique. Veut-il vraiment payer pour l'expédition et attendre deux jours alors qu'il pourrait passer à l'heure du déjeuner ?

Si votre formulaire ne propose pas d'option de retrait, il fermera probablement l'onglet et vous contactera à la place. Ou pire, il achètera chez un concurrent qui facilite le retrait.

Acheter en ligne, retirer en magasin (BOPIS) n'est plus réservé aux grandes enseignes. Les commerces locaux, les restaurants, les boulangeries et même les fleuristes le proposent car les clients s'y attendent. Et la bonne nouvelle, c'est que vous n'avez pas besoin d'une plateforme e-commerce complète pour que cela fonctionne. Avec WPForms et le module complémentaire Geolocation, vous pouvez ajouter un sélecteur interactif de retrait en magasin à n'importe lequel de vos formulaires de commande WordPress.

Je vais vous montrer exactement comment faire. Allons-y !

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

Vérification rapide de l'inventaire avant de commencer :

• WPForms Pro ou supérieur. Le module complémentaire Geolocation est inclus dans les plans Pro et supérieurs.
• Le module complémentaire Geolocation installé et activé.
• Une clé API Google Places ou un jeton d'accès Mapbox. Les deux fonctionnent — nous vous montrerons comment configurer l'un ou l'autre.
• Une liste de vos lieux de retrait avec les adresses complètes, les noms des entreprises et tous les détails que vous souhaitez que les clients voient (heures d'ouverture, notes sur le stationnement, instructions d'entrée).

C'est tout ! Du code personnalisé ? Non. Un plugin de localisation de magasin séparé ? Pas nécessaire. Jongler entre les outils ? Jamais !

Mais aussi... Pourquoi ?

Pourquoi ajouter un sélecteur de magasin au lieu d'une simple liste déroulante ?

Vous pourriez utiliser un champ de liste déroulante ordinaire qui répertorie vos emplacements de magasin. Cela fonctionnerait. Mais une carte interactive fait trois choses qu'une liste déroulante ne fera jamais :

• Elle répond visuellement à la question « lequel est le plus proche de moi ? ». C'est particulièrement utile si les noms de vos emplacements ne sont pas évidents (un client pourrait ne pas connaître la différence entre « Riverside » et « Bridgeview » par leur nom).
• Elle renforce la confiance. Une vraie épingle sur la carte indique aux clients que vous êtes une entreprise réelle avec une adresse réelle. Cela compte pour les nouveaux acheteurs.
• Elle réduit les erreurs de retrait. Lorsqu'un client voit l'épingle sur la carte et la sélectionne lui-même, il est beaucoup moins susceptible de se présenter au mauvais endroit.

Étape 1 : Installer et activer le module complémentaire Geolocation

Connectez-vous à votre tableau de bord WordPress et accédez à WPForms » Modules complémentaires. Recherchez « Geolocation » et cliquez sur Installer le module complémentaire. WordPress s'occupe du reste.

Une fois qu'il est actif, vous verrez un nouvel onglet Geolocation apparaître dans vos paramètres WPForms.

Étape 2 : Connecter Google Places

Le champ Carte récupère les données de la carte de Google Places. Vous aurez besoin d'un compte Google Cloud gratuit et d'une clé API.

Une fois que vous avez récupéré votre clé API, allez dans WPForms » Paramètres » Géolocalisation, collez la clé et enregistrez les paramètres.

Si vous êtes bloqué à l'étape de la clé API, nous avons un guide d'installation détaillé dans la documentation du module complémentaire de géolocalisation qui vous guide étape par étape dans la console Google Cloud.

C'est la seule étape un peu technique de toute l'installation — environ 10 minutes, et vous ne le faites qu'une seule fois.

Étape 3 : Commencez avec le modèle de formulaire de commande avec retrait en magasin

Vous pouvez créer cela à partir de zéro, mais WPForms dispose déjà d'un modèle qui fait 90 % du travail pour vous. Depuis WPForms » Ajouter nouveau, recherchez « Formulaire de commande avec retrait en magasin ».

Le modèle est pré-chargé avec :

• Sélection de produits basée sur des images
• Options de quantité et de couleur
• Champs de contact client
• Un champ Carte pour la sélection de l'emplacement
• Un champ de carte de crédit Stripe
• Un total calculé qui se met à jour en temps réel
• Cases à cocher d'acceptation des conditions

Avec ce modèle, vous avez un formulaire de commande fonctionnel avec un sélecteur de retrait déjà intégré. À partir de là, vous personnalisez — vous ne construisez pas à partir de zéro.

Étape 4 : Ajoutez vos lieux de retrait au champ Carte

Dans le constructeur de formulaires, trouvez le champ Carte dans la section Fancy Fields. Cliquez dessus ou faites-le glisser dans l'aperçu du formulaire pour l'ajouter.

Ensuite, cliquez sur le champ Carte dans l'aperçu pour ouvrir ses Options de champ. Sous l'onglet Général, vous verrez une section Emplacements avec des champs pour chaque lieu de retrait que vous souhaitez afficher.

Pour chaque emplacement :

1. Tapez une adresse dans le champ Adresse. Google Places se complétera automatiquement — choisissez la bonne correspondance.
2. Ajoutez un Nom (quelque chose que les clients reconnaîtront, comme « Magasin phare du centre-ville » ou « Comptoir de retrait Est »).
3. Ajoutez une Description facultative — c'est là que vous mettez les détails qui évitent les appels au service client (heures de retrait, quelle porte utiliser, s'il faut appeler à l'arrivée).
4. Cliquez sur le bouton + pour ajouter l'emplacement suivant.

Quelques paramètres côté administrateur à connaître :

• Trouver les emplacements à proximité — lorsque vous activez ce paramètre dans le constructeur, votre navigateur vous demande votre emplacement (celui de l'administrateur), et la complétion automatique des adresses privilégie les suggestions proches de vous. Pratique si tous vos lieux de retrait sont dans la même ville que votre bureau. Cela n'affecte pas ce que les clients voient sur le frontend.
• Niveau de zoom — par défaut, il est réglé sur 15, ce qui correspond à un bon zoom au niveau de la rue. Ce paramètre n'est utilisé que lorsque vous avez un seul emplacement ; une fois que vous ajoutez plusieurs emplacements et activez la sélection, la carte s'ajuste automatiquement pour tous les afficher et ce paramètre est désactivé.

Étape 5 : Transformez la carte en sélecteur (c'est le point important)

Par défaut, le champ Carte est en lecture seule — les clients peuvent consulter vos emplacements mais ne peuvent pas en choisir un. Pour en faire un véritable sélecteur de retrait, activez ces deux options sous l'onglet Général :

• Afficher la liste des emplacements — affiche le nom et l'adresse de chaque emplacement dans une liste textuelle sous la carte. C'est important pour l'accessibilité et pour les utilisateurs mobiles qui ont du mal avec les petites épingles de carte.
• Autoriser la sélection d'emplacement — ajoute des boutons radio à côté de chaque emplacement dans la liste. C'est ce qui transforme la carte en un champ de formulaire.

Étape 6 : Personnalisez les marqueurs de la carte et l'affichage

Quelques ajustements pour que la carte reflète votre marque au lieu d'être générique :

Marqueurs personnalisés — Pour chaque lieu, ouvrez le menu déroulant Icône et choisissez :

• Icône — choisissez parmi plus de 2 000 icônes Font Awesome (recherchez dans le sélecteur d'icônes). L'icône par défaut est une étoile.
• Image — cliquez sur Télécharger l'image pour utiliser votre logo ou une épingle personnalisée de votre médiathèque.

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

Paramètres de l'onglet Avancé — cliquez sur l'onglet Avancé dans Options de champ pour les contrôles de présentation et d'interaction :

• Présentation : Masquer plein écran, Masquer le type de carte (satellite/terrain), Masquer les informations de lieu (pop-ups qui apparaissent en cliquant sur un marqueur), Masquer la vue de rue. La plupart sont masqués par défaut pour un aspect plus épuré.
• Interactif : Masquer le contrôle de caméra, Masquer le zoom, Désactiver le glisser, Désactiver le zoom de la souris.
• Autre : Afficher dans l'entrée, Afficher la miniature dans l'entrée (comment la carte apparaît dans les enregistrements de soumission), Masquer l'étiquette.

Étape 7 : Utilisez la logique conditionnelle pour afficher les détails de retrait uniquement

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

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

• Le champ Carte uniquement lorsque « Collecte » est sélectionné.
• Les champs d'adresse de livraison uniquement lorsque « Expédition » est sélectionné.

Cela permet de garder votre formulaire court et pertinent par rapport à ce que le client souhaite réellement.

Étape 8 : Testez, puis publiez

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

• La carte se charge-t-elle rapidement ?
• Le lieu sélectionné apparaît-il réellement dans l'e-mail de confirmation ?
• Apparaît-il correctement dans WPForms » Entrées lorsque vous consultez la soumission ?

Dans l'onglet Avancé, assurez-vous que Afficher dans l'entrée (et éventuellement Afficher la miniature dans l'entrée) est activé — c'est ce qui rend le lieu sélectionné par le client visible pour la personne qui prépare les commandes côté collecte.

C'est là que beaucoup de propriétaires de magasins vont ensuite

Une fois que le formulaire de collecte de base fonctionne, deux améliorations valent la peine d'être connues :

• Intégration Google Agenda. Connectez le formulaire au calendrier partagé de votre équipe afin que chaque collecte apparaisse automatiquement comme un événement. Quelques clients WPForms nous ont dit que cela avait remplacé un carnet papier à la réception qui entraînait des doubles réservations.
• Enregistrer et reprendre. Si votre formulaire de commande est long, Enregistrer et reprendre permet aux clients de revenir plus tard sans perdre leur progression.

Aucune des deux n'est requise pour que le sélecteur de collecte fonctionne, ce sont juste de bonnes améliorations lorsque vous êtes prêt.

Et voilà le montage ! Un champ Carte, le module complémentaire Géolocalisation et quelques minutes de configuration vous donnent un sélecteur de retrait réel et interactif.

Prêt à ajouter le retrait sur votre site ? Procurez-vous WPForms Pro si ce n’est pas déjà fait, installez le module complémentaire Géolocalisation et commencez avec le modèle de formulaire de commande de retrait en magasin. Vous pouvez avoir un formulaire fonctionnel en ligne en un rien de temps !

FAQ 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 du module complémentaire Géolocalisation, qui est inclus avec la licence Pro ou supérieure. Si vous utilisez WPForms Lite ou Basic, vous devrez passer à une version supérieure avant que le module complémentaire ne soit disponible.

L'API Google Places est-elle gratuite ?

Google Cloud nécessite un compte de facturation, mais Google Places inclut un généreux crédit mensuel qui couvre une utilisation gratuite pour la plupart des petites entreprises. À moins que vous n’ayez un trafic énorme sur votre formulaire, vous resterez presque certainement dans la limite de gratuité. Vous pouvez également définir des plafonds d’utilisation stricts 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 recueille l’adresse du client — il la saisit, et l’autocomplétion l’aide à choisir la bonne. Le champ Carte affiche vos emplacements préconfigurés sur une carte et permet aux clients d’en choisir un. Pour un sélecteur de retrait, vous voulez le champ Carte. Pour une adresse de livraison, vous voulez le champ Adresse. De nombreux formulaires de commande utilisent les deux.

Combien d’emplacements de retrait puis-je ajouter à un seul champ Carte ?

Il n’y a pas de limite stricte — vous pouvez continuer à cliquer sur le bouton + pour en ajouter d’autres. En pratique, je le limiterais à moins de 10 sur un seul formulaire. Si vous êtes une chaîne régionale avec plus de 30 emplacements, envisagez d’ajouter d’abord un champ code postal et d’utiliser la logique conditionnelle pour afficher uniquement les magasins à proximité pertinents.

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

Oui, mais cela demande une étape supplémentaire. Pour masquer les POI tels que les restaurants et les magasins voisins afin que seuls vos marqueurs personnalisés s’affichent, vous devrez créer un style de carte personnalisé dans Google Cloud Console et l’appliquer au champ Carte à l’aide d’un extrait de code. WPForms dispose d’une documentation pour les développeurs sur l’application de styles de carte personnalisés si vous souhaitez suivre cette voie.

Comment savoir quel emplacement un client a choisi après avoir soumis le formulaire ?

Accédez à WPForms » Entrées et ouvrez la soumission. L’emplacement sélectionné apparaît dans le détail de l’entrée, y compris le nom et l’adresse. Assurez-vous que « Afficher dans l’entrée » est activé dans l’onglet Avancé du champ Carte (il l’est par défaut) afin que l’emplacement s’affiche dans les enregistrements d’entrée et les notifications par e-mail.

Puis-je connecter les soumissions de retrait à Google Agenda ?

Oui — et c’est l’une des améliorations les plus utiles pour un formulaire de retrait. Installez le module complémentaire Google Agenda et connectez votre formulaire à un calendrier d’équipe partagé afin que chaque commande de retrait crée automatiquement un événement de calendrier. Cela résout le problème du bloc-notes à la caisse auquel de nombreux magasins sont confrontés.

Ensuite, créez un formulaire de réservation WordPress multi-emplacements

Ajouter un sélecteur de point de retrait à votre formulaire de commande n’est pas la seule façon d’utiliser cette fonctionnalité puissante. Réservez-vous des rendez-vous ou des événements avec vos formulaires WordPress ? Pourquoi ne pas le transformer en formulaire de réservation multi-lieux ? Avec le champ carte, vous pouvez ! Consultez le tutoriel complet pour en savoir plus.

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

Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.