Comment ajouter les suggestions d’adresses Google dans Contact Form 7

Tuto-suggestion-adresses-Google-01

Ce que nous avons besoin :

  • Le plugin Adress Autocomplete Using Google Api
  • Un compte Google Developer Console pour obtenir nos clés API

Installation du plugin Adress Autocomplete

Nous devons dans un premier temps, installer et activer le plugin Adress Autocomplete Place API pour WordPress. Pour plus de détails, regardez le guide disponible pour savoir comment installer un plugin WordPress.

Une fois activé, nous devons nous rendre dans « Réglages »  » « Google Autocomplete » pour accéder à la configuration du plugin.

Réglage-plugin-Google-autocomplete-01

Nous devons renseigner notre clé Google Place API. Cette clé API autorise votre site internet à se connecter avec Google Map et ainsi obtenir les suggestions d’adresses depuis la base de données Google en temps réel.

Création des clés Google API

Rendez-vous sur le site Google Developer Console et créer un nouveau project.

Google-API-01

Une nouvelle fenêtre apparait vous demandant de renseigner un nom de project. Utiliser un nom qui vous aidera à identifier facilement votre project et cliquer sur le bouton « Créer »

La fenêtre disparaitra après quelques secondes et vous serez automatiquement redirigé vers votre nouveau project.

Pour créer notre clé Google API Place, cliquer sur « Bibliothèque » en haut à gauche puis « Google Places API Web Service »

Creation-API-Google

Cliquer ensuite sur « Activer »

Activer-Google-API

La console Google Developer à maintenant activé votre Google Places API dans votre project.

Cependant, nous avons besoin de créer un identifiant pour utiliser notre API sur notre site internet. Cliquer donc en haut à droite sur « Créer un identifiant »

Creer-id-Google-API

Sur l’écran suivant, cliquer sur « De quels identifiants ai-je besoin »

quels-identifiant-ai-je-besoin-Google-API

La console Google API nous montre désormais notre clé API. Nous devons copier cette clé et la coller dans les paramètres du plugin sur notre site WordPress, dans la case « Google Place API key »

Réglage-plugin-Google-autocomplete-01

Nous avons besoin d’activer une autre clé API dans notre console Google. Cliquer donc encore une fois sur « Bibliothèque » à gauche, puis sur « Google Maps JavaScript API »

API-JavaScript

Activer cette clé API en cliquant sur « Activer »

Activer-API-JS

Nous n’avons pas besoin de cette clé API dans notre configuration de WordPress. Seule la première clé API devra être copiée dans les paramètres du plugin Google Autocomplete.

Activer les suggestions d’adresses dans nos formulaires de contacts

Nous pouvons ajouter les suggestions d’adresses dans tous les formulaires de contacts.

Dans ce tutoriel, nous utilisons le plugin Contact Form 7. Cependant, ces instructions sont valables pour tous les autres plugins de contacts.

Dans un premier temps nous devons créer un champs « Adresse » dans notre formulaire.

Ensuite rendez-vous sur la page du formulaire. Celui où vous souhaitez ajouter les suggestions d’adresses Google.

Une fois sur la page, nous devons cliquer droit dans le champs « Adresse » de notre formulaire et sélectionner « Inspecter l’élément » depuis le menu du navigateur.

Menu-inspecter-adresse

Nous aurons une ligne écrit « Input type = texte > name =********

Champ-name-adresse

Nous devons copier le champs « Name » dans les paramètres du plugin Google Autocomplete. Pour exemple içi, nous écrirons donc « pickup-adress« , dans le champ « Name » du plugin :

champ-name-plugin-Google-autocomplete

Si vous souhaitez ajouter les suggestions d’adresses pour d’autres champs, répéter l’opération pour tous les autres champs adresses de vos différents formulaires.

Cliquer ensuite sur le bouton « Save » pour enregistrer les modifications.

C’est terminé ! Nous pouvons maintenant nous rendre sur le formulaire et ainsi nous voir proposer les suggestions d’adresses Google.

Suggestions-adresse-Google

Donc voici comment intégrer facilement les suggestions d’adresses à notre site WordPress sans difficultés apparentes.

2 commentaires

  • Surely together with your thoughts here and that i adore your blog! Ive bookmarked it making sure that I can come back &amp read more inside the foreseeable future.

  • You are my inhalation, I have few blogs and sometimes run out from to brand.

Laisser un commentaire

Votre adresse email ne sera pas publiée.

Dépannage informatique à domicile et à distance

SOS PC 06

top