skip to Main Content

Comment ajouter l’auto-complétion sur les champs d’adresses

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Récemment, un de nos utilisateurs nous a demandé comment ajouter l’auto-complétion pour les champs d’adresse sur les formulaires de WordPress. L’auto-complétion permet aux utilisateurs de sélectionner rapidement l’adresse de suggestions générées en temps réel au fur et à mesure qu’ils le tapent.

Dans ce tutoriel, nous allons vous montrer comment ajouter l’auto-complétion pour les champs d’adresse sur WordPress en utilisant « Google Adresses API ».

La première chose que vous devez faire est d’installer et d’activer le plugin « Address Autocomplete Using Google Place Api ». Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.

Après l’activation, vous devez visiter l’emplacement « Réglages > Google Autocomplete » page pour configurer les paramètres du plugin.

Vous serez invité à entrer la clé API Google Places. Cette clé API permet à votre site Web pour de se connecter avec Google Maps et de récupérer des suggestions sur leur base de données en temps réel.

Rendez-vous sur « Google Developer Console » pour créer un nouveau projet.

Une fenêtre s’affichera en vous demandant de fournir un nom pour votre projet. Utilisez un nom qui vous aidera à identifier plus tard, 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.

Maintenant, vous allez voir la liste des API Google que vous pouvez activer pour votre projet. Vous avez besoin de localiser et de cliquer sur « Google Places API Web Service ».

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Cela vous mènera à une page de prévisualisation vous expliquant comment cette API fonctionne. Vous devez cliquer sur le lien « Activer » pour continuer.

Developper Console activera Google Place API pour votre projet.

Toutefois, vous aurez toujours besoin des informations d’identification à utiliser l’API sur votre site. Alors allez-y et cliquez sur le bouton créer des informations d’identification pour continuer.

Sur l’écran suivant, vous devez cliquer sur le bouton « What credentials do I need ».

Developper Console va maintenant vous présenter la clé API. Vous devez copier cette clé et la coller dans les réglages sur votre site WordPress.

Vous devez toujours activer une autre clé API sur votre projet Google Developers. Cliquez sur la bibliothèque dans la console Google Developer et cliquez ensuite sur « Google Maps API JavaScript ».

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Cela vous mènera à la page « API Overview » où vous devez cliquer sur le lien «Activer» pour continuer.

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

Comment activer l’autocomplétion dans les champs des formulaires

Vous pouvez ajouter une fonctionnalité de l’autocomplétion dans les champs créé par des plugins de création de formulaires.

Nous utiliserons WPForms dans ce tutoriel. Cependant, ce plugin peut fonctionner avec à peu près n’importe quel plugin de création de formulaire.

Vous devez d’abord créer un formulaire qui a un champ d’adresse ou d’un ensemble de champs d’adresse.

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

Ensuite, aller accédez à l’article ou la page où vous avez ajouté votre formulaire. Vous devez faire un clic droit sur le champ et sélectionnez «Inspecter» à partir du menu du navigateur.

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

Par exemple, dans cette capture, l’attribut name « wpforms[fields][9][address1] », la valeur ID est « wpforms-352-field_9 », et la classe css est « wpforms-field-address-address1 ».

Vous devez copier une seule de ces valeurs et pour la coller dans la page des réglages du plugin.

Si vous souhaitez cibler plusieurs champs dans des formulaires multiples, alors vous pouvez simplement ajouter une virgule et ajouter d’autres valeurs.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

N’oubliez pas de cliquer sur le bouton « Enregistrer » pour sauvegarder vos modifications.

C’est tout, vous pouvez maintenant visiter la page du formulaire et essayez d’entrer une adresse. Le champ du formulaire commencera à afficher des suggestions en utilisant Google Places et Google Maps.

C’est tout pour ce tutoriel, j’espère qu’il vous permettra d’ajouter l’autocomplétion dans les champs de WordPress.

Cet article comporte 1 commentaire
  1. Est-ce que je sais quoi faire pour bloquer le remplissage automatique des formulaires sur la page?
    Parce que souvent, si quelqu’un a beaucoup de données, en cliquant, par exemple, sur le nom de la saisie semi-automatique, le reste nous saute dessus et est souvent incorrect et le client ne le voit pas et envoie le mauvais formulaire? Bien sûr, il s’agit de WordPress.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
15 Partages
Partagez12
Tweetez
Enregistrer3