Comment ajouter la saisie semi-automatique pour les champs d'adresse dans WordPress

Récemment, un de nos utilisateurs nous a demandé comment ajouter la saisie semi-automatique pour les champs d'adresse dans les formulaires WordPress. La saisie semi-automatique permet aux utilisateurs de sélectionner rapidement une adresse parmi les suggestions générées en temps réel au fur et à mesure de la frappe. Dans cet article, nous allons vous montrer comment ajouter la saisie semi-automatique pour les champs d'adresse dans WordPress à l'aide de l'API Google Adresses..

Didacticiel vidéo

Si vous n'aimez pas la vidéo ou si vous avez besoin de plus d'instructions, continuez à lire..

La première chose à faire est d’installer et d’activer la complétion automatique d’adresses à l’aide du plug-in Api de Google Place. Pour plus de détails, consultez notre guide étape par étape pour installer un plugin WordPress..

Lors de l'activation, vous devez visiter Paramètres »Google Autocomplete page pour configurer les paramètres du plugin.

Il vous sera demandé de saisir la clé API Google Adresses. Cette clé API permet à votre site Web de se connecter à Google Maps et de récupérer des suggestions de saisie semi-automatique à partir de leur base de données en temps réel..

Rendez-vous sur le site Web de la console pour développeurs Google et créez un nouveau projet..

Une fenêtre contextuelle apparaîtra vous demandant de donner un nom à votre projet. Utilisez un nom qui vous aidera à identifier plus tard le projet, puis cliquez sur le bouton Créer..

La popup disparaitra, attendez quelques secondes et vous serez automatiquement redirigé vers votre nouveau projet.

Vous verrez maintenant la liste des API Google populaires que vous pouvez activer pour votre projet. Vous devez localiser et cliquer sur "Service Web de l'API Google Adresses"..

Cela vous mènera à une page de présentation expliquant le fonctionnement de cette API. Vous devez cliquer sur le lien Activer pour continuer..

La console de développeur activera désormais l'API Google Places pour votre projet..

Cependant, vous aurez toujours besoin d'informations d'identification pour utiliser l'API sur votre site Web. Alors allez-y et cliquez sur le bouton créer les informations d'identification pour continuer.

Sur l'écran suivant, vous devez cliquer sur 'De quelles informations d'identification ai-je besoin?' bouton.

La console développeur va maintenant vous montrer la clé API. Vous devez copier cette clé et la coller sous les paramètres du plug-in sur votre site Web WordPress..

Vous devez toujours activer une autre API sur votre projet Google Developers. Cliquez sur la bibliothèque dans la console de développeur Google, puis sur "API Google Maps JavaScript"..

Cela vous mènera à la page de présentation de l'API où vous devrez cliquer sur le lien "Activer" pour continuer..

Cette API n'a pas besoin d'une clé API supplémentaire, vous êtes donc prêt à partir.

Activation de l'adresse de saisie semi-automatique dans les champs de formulaire WordPress

Vous pouvez ajouter une fonctionnalité d’adresse de complétion automatique à n’importe quel champ de formulaire créé par n’importe quel plugin de création de formulaire WordPress..

Nous allons utiliser WPForms dans ce tutoriel. Cependant, ces instructions fonctionneront quel que soit le plugin de formulaire de contact que vous utilisez..

Tout d'abord, vous devez créer un formulaire comportant un champ d'adresse ou un ensemble de champs d'adresse..

Une fois que vous avez terminé, ajoutez ce formulaire à votre site Web comme vous le feriez normalement..

Ensuite, allez au message ou à la page où vous avez ajouté votre formulaire. Vous devez cliquer avec le bouton droit sur le champ d'adresse et sélectionner "Inspecter" dans le menu du navigateur..

Vous verrez le nom, l'ID et les valeurs de la classe CSS pour le champ d'adresse.

Par exemple, dans cette capture d'écran, la valeur du nom de notre formulaire est wpforms [champs] [9] [adresse1], La valeur de l'ID est wpforms-352-field_9, et la classe css est wpforms-field-address-address1.

Vous devez copier une seule de ces valeurs et la coller dans la page des paramètres du plugin..

Si vous souhaitez cibler plusieurs champs dans plusieurs formulaires, vous pouvez simplement ajouter une virgule et ajouter une autre valeur..

N'oubliez pas de cliquer sur le bouton Enregistrer pour enregistrer vos modifications..

C'est tout, vous pouvez maintenant visiter votre page de formulaire et essayer d'entrer une adresse. Le champ du formulaire commencera automatiquement à afficher des suggestions utilisant Google Lieux et Google Maps..

Nous espérons que cet article vous a aidé à apprendre comment ajouter la saisie semi-automatique pour les champs d'adresse dans WordPress. Vous pouvez également consulter notre liste de 24 plugins WordPress indispensables pour les sites Web professionnels..

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.