Récemment, l’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 l’adresse à partir des suggestions générées en temps réel au fur et à mesure de leur saisie. 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 Places.
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 le Saisie semi-automatique des adresses à l’aide de l’API Google Place brancher. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, vous devez visiter Paramètres » Saisie semi-automatique Google page pour configurer les paramètres du plugin.
Il vous sera demandé de saisir la clé API Google Places. Cette clé API permet à votre site Web de se connecter à Google Maps et de récupérer des suggestions de saisie semi-automatique de leur base de données en temps réel.
Dirigez-vous vers Console de développement Google site Web et créer un nouveau projet.
Une fenêtre contextuelle apparaîtra vous demandant de fournir un nom pour votre projet. Utilisez un nom qui vous aidera plus tard à identifier le projet, puis cliquez sur le bouton Créer.
La popup disparaîtra, 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 ‘Google Places API Web Service’.
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 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 des 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 dans les paramètres du plugin sur votre site WordPress.
Vous devez toujours activer une autre API sur votre projet Google Developers. Cliquez sur la bibliothèque dans Google Developer Console, puis sur « Google Maps JavaScript API ».
Cela vous mènera à la page de présentation de l’API où vous devez 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.
Activer l’adresse de saisie semi-automatique dans les champs de formulaire WordPress
Vous pouvez ajouter une fonction d’adresse de saisie semi-automatique à n’importe quel champ de formulaire créé par n’importe quel plugin de création de formulaire WordPress.
nous utiliserons WPForms dans ce tutoriel. Cependant, ces instructions fonctionneront quel que soit le plugin de formulaire de contact que vous utilisez.
Vous devez d’abord créer un formulaire contenant 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 à la publication 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 classe CSS pour le champ d’adresse.
Par exemple, dans cette capture d’écran, la valeur du nom de notre formulaire est wpforms[fields][9][address1]
, 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 de saisir une adresse. Le champ du formulaire commencera automatiquement à afficher des suggestions à l’aide de Google Adresses et de 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 d’entreprise.