Voulez-vous créer un formulaire d'adresse avec autocomplétion dans WordPress ?
Un formulaire d'adresse avec autocomplétion est la manière moderne de faire gagner du temps aux clients en suggérant automatiquement leur adresse lors du remplissage d'un formulaire.
Dès qu'un client commence à taper son adresse dans le champ d'adresse, il voit les options pour sélectionner et remplir son adresse à partir des emplacements Google.
Par défaut, WordPress ne propose pas d'option d'adresse avec autocomplétion. Vous devez utiliser un plugin comme WPForms pour créer un formulaire de contact et activer l'option d'adresse avec autocomplétion pour le champ d'adresse.
Dans cet article, nous vous montrerons comment créer un formulaire d'adresse avec autocomplétion dans WordPress.
Créer un formulaire d'adresse avec autocomplétion dans WordPress
Ci-dessous, vous trouverez le guide étape par étape pour ajouter un formulaire d'adresse avec autocomplétion à votre site WordPress.
Étape 1. Installer et activer le plugin WPForms
La première chose à faire est d'installer et d'activer le plugin WPForms.
WPForms permet à quiconque de créer rapidement et facilement tout type de formulaire pour son site web.
Que vous obteniez de nouveaux prospects ou que vous acceptiez des paiements de clients, ce plugin aura le formulaire dont vous avez besoin pour vous développer. C'est pourquoi c'est notre choix n°1 en matière de création de formulaires dans WordPress. Nous l'utilisons sur notre propre site pour créer tout type de formulaire dont nous avons besoin, y compris les formulaires de contact, de connexion, d'inscription, et plus encore.
La première étape consiste à vous inscrire à WPForms et à installer le plugin sur votre site. Pour plus de détails, consultez notre guide sur comment installer un plugin WordPress.
Après l'activation, vous devez saisir une clé de licence pour utiliser toutes les fonctionnalités du plugin WPForms.
Vous pouvez trouver la clé de licence sur votre compte WPForms.
Cliquez sur le bouton Vérifier la clé, et vous verrez un message de succès.
Étape 2. Installer et activer le module complémentaire de géolocalisation
Ensuite, vous devez visiter la page WPForms » Modules complémentaires. De là, vous pouvez installer et activer le module complémentaire de géolocalisation.
Ce module complémentaire aidera à activer l'option d'autocomplétion d'adresse sur votre formulaire de contact.
Étape 3. Activer l'option de remplissage automatique d'adresse et ajouter la clé API Google Places
Vous devez visiter la page WPForms » Paramètres. De là, vous pouvez accéder à l'onglet Géolocalisation depuis le menu de navigation supérieur.
Dans la section Fournisseur de lieux, vous pouvez sélectionner API Google Places et cocher l'option de localisation actuelle ci-dessous.
Ensuite, visitez la Google Cloud Platform pour obtenir la clé API de Google Places.
Sur cette page, vous devez cliquer sur l'option Activer les API et services.
Cela vous montrera la liste complète des API et services Google. Vous devez activer les API suivantes :
- API Google Places
- API JavaScript Google Maps
- API Geocoding
Si vous ne trouvez pas une API, vous pouvez taper son nom dans la boîte de recherche, et elle apparaîtra ci-dessous.
Allez maintenant dans API et services » Identifiants. De là, vous devez cliquer sur le lien + Créer des identifiants, puis cliquer sur l'option Clé d'API.
Une fenêtre contextuelle s'ouvrira, et vous pourrez voir la clé d'API. Cliquez sur l'option Restreindre la clé pour contrôler l'accès à l'utilisation de la clé d'API.
Dans la section Restrictions de l'application, vous devez sélectionner Référents HTTP (sites Web).
Dans la section Restrictions de l'API, cochez l'option Restreindre la clé et sélectionnez les 3 API que vous avez activées précédemment.
Cliquez sur le bouton Enregistrer pour continuer.
Votre clé d'API est prête. Copiez la clé d'API de cette page.
Revenez maintenant à l'espace d'administration de WordPress et collez la clé d'API sur la page des paramètres de géolocalisation.
Cliquez sur le bouton Enregistrer les paramètres.
Étape 4. Créer un nouveau formulaire de contact
Une fois que les paramètres de votre module complémentaire de géolocalisation sont finalisés, vous devez créer un nouveau formulaire de contact. Vous pouvez également utiliser l'option « activer la saisie semi-automatique de l'adresse » sur les formulaires précédemment créés.
Pour créer un nouveau formulaire, accédez à WPForms » Ajouter nouveau. Cela ouvrira le constructeur WPForms sur votre écran, et vous verrez plusieurs modèles de formulaires intégrés.
Commencez par entrer un nom pour votre nouveau formulaire et cliquez sur le modèle Formulaire de contact simple.
Cela lancera le modèle de formulaire de contact. Vous pouvez voir les champs sur le côté gauche et l'aperçu du formulaire sur le côté droit de votre écran.
Dans la section Champs fantaisie, vous trouverez le champ Adresse. Faites simplement glisser et déposez le champ Adresse dans l'aperçu de votre formulaire sur le côté droit.
Maintenant, cliquez sur ce champ d'adresse dans la section d'aperçu du formulaire, et vous verrez les options d'édition sur le côté gauche.
Dans les Options avancées, vous devez cocher l'option Activer la saisie semi-automatique de l'adresse.
Cliquez sur le bouton Enregistrer dans le coin supérieur droit de votre écran et quittez le constructeur WPForms.
Étape 5. Ajouter le formulaire d'adresse à saisie semi-automatique à votre page WordPress
Maintenant que votre formulaire d'adresse à saisie semi-automatique est prêt, vous pouvez visiter la page Pages » Ajouter nouveau depuis votre espace d'administration WordPress.
Commencez par ajouter un titre à votre page et cliquez sur l'icône plus. Vous pouvez maintenant rechercher le bloc personnalisé WPForms et cliquer dessus.
Dans le menu déroulant, sélectionnez le formulaire d'adresse avec saisie semi-automatique.
Cliquez sur le bouton Publier et visitez votre site Web pour voir le formulaire de contact avec le champ d'adresse à saisie semi-automatique en action. Voici un exemple de formulaire que nous avons créé où vous pouvez voir qu'au fur et à mesure que nous tapons l'adresse, il pré-remplit les adresses disponibles.
Et c'est tout ! Vous avez maintenant appris avec succès comment créer un formulaire d'adresse avec saisie semi-automatique dans WordPress.
Vous voudrez peut-être aussi consulter notre guide sur comment ajouter un formulaire de réservation personnalisé à votre site WordPress.
Cela peut vous aider davantage à créer un formulaire de réservation de rendez-vous en ligne et à ajouter le champ d'adresse avec saisie semi-automatique pour obtenir des inscriptions d'utilisateurs à la volée.
Ou, vous pouvez également consulter notre guide sur comment créer un formulaire de réservation pour une agence de voyage dans WordPress. Cet article vous aidera à créer un formulaire de réservation de voyage pour collecter les informations de réservation et de contact de vos clients sur votre site.
Merci pour ça ! Savez-vous s'il est possible d'ajouter une fonction de saisie semi-automatique similaire pour un champ de texte sur une seule ligne avec des suggestions personnalisées ?
Salut John, il est possible d'activer la saisie semi-automatique d'adresses sur les champs de texte sur une seule ligne et cela peut être activé dans l'onglet 'Avancé'. Si vous souhaitez utiliser des suggestions personnalisées, cela nécessiterait que vous écriviez du code. J'espère que cela vous aide !