Comment ajouter des champs d'adresse de saisie semi-automatique dans un formulaire WordPress ?

Vous vous demandez comment ajouter un formulaire WordPress de saisie semi-automatique d'adresse à votre site Web ? Alors, cet article est exactement ce dont vous avez besoin en ce moment.

Si votre formulaire WordPress a un champ d'adresse, nous vous suggérons d'y ajouter la fonctionnalité de saisie semi-automatique. De cette façon, il est plus facile pour vos utilisateurs de remplir le champ d'adresse et de soumettre le formulaire avec succès.

C'est pourquoi nous avons préparé un guide détaillé sur la façon de créer un formulaire WordPress d'adresse à saisie semi-automatique. Alors, lisez jusqu'au bout.

Mais avant le didacticiel, discutons des avantages de la fonction de saisie semi-automatique d'adresse et de la meilleure façon de l'ajouter à votre formulaire.

En quoi l'option de saisie semi-automatique d'adresse est-elle utile dans un formulaire en ligne ?

Vous pouvez simplement utiliser un champ d'adresse standard pour n'importe quel formulaire WordPress. Alors, pourquoi y ajouter l'option d'auto-complétion d'adresse ?

Eh bien, voici quelques façons importantes dont l'option de saisie semi-automatique de l'adresse est utile :

• Le champ de saisie semi-automatique de l'adresse suggère automatiquement des lieux à vos utilisateurs en fonction de leur saisie.
• Les utilisateurs peuvent sélectionner des adresses précises dans la liste des suggestions d'adresses disponibles.
• Comme les utilisateurs n'ont pas à saisir l'adresse complète, ils peuvent remplir le formulaire relativement plus rapidement.
• La fonction de saisie semi-automatique rend le remplissage de formulaire facile et rapide. Cela peut aider à augmenter les soumissions de formulaires réussies et à réduire les abandons de formulaires.

Par conséquent, il est judicieux d'inclure un champ d'adresse de saisie semi-automatique dans vos formulaires.

Cependant, WordPress n'offre pas cette fonctionnalité par défaut. Alors, quelle est votre meilleure alternative ?

Nous couvrirons la meilleure façon d'ajouter un champ de saisie semi-automatique d'adresse dans la section suivante.

Meilleur moyen de créer un formulaire WordPress de saisie semi-automatique d'adresse

Étant donné que WordPress n'autorise pas l'ajout de la fonctionnalité de saisie semi-automatique d'adresse par défaut, vous devrez plutôt vous fier aux plugins.

Le bon plugin WordPress vous permettra d'ajouter la fonctionnalité à votre formulaire sans tracas. Et l'un de ces plugins est Everest Forms.

Le populaire plugin de création de formulaires par glisser-déposer peut être le complément parfait à votre site Web WordPress.

Cet outil puissant fait tout ! Il vous permet de créer des formulaires personnalisés sans toucher à une seule ligne de code.

Vous pouvez utiliser ses plus de 20 champs de formulaire pour créer des formulaires de contact, des formulaires de demande de congé, des formulaires de commande ou tout autre formulaire dont vous avez besoin.

De plus, il offre un champ Adresse où vous pouvez facilement activer l'option de saisie semi-automatique. Ainsi, nous recommandons le plugin Everest Forms comme le meilleur moyen d'équiper vos formulaires de cette fonctionnalité.

Comment ajouter des champs d'adresse de saisie semi-automatique dans un formulaire WordPress ?

Dans ce didacticiel, nous avons utilisé Everest Forms pour démontrer le processus de création d'un formulaire WordPress d'adresse à saisie semi-automatique.

Suivez ces 7 étapes simples pour ajouter l'option de saisie semi-automatique de l'adresse Google WordPress dans votre formulaire.

Étape 1 : Installer et activer Everest Forms Pro

Commencez par installer et activer le plugin Everest Forms Pro sur votre site. Cette version premium fonctionne en plus du plug-in gratuit Everest Forms.

Ainsi, vous devrez configurer les versions gratuite et premium du plugin pour que la fonction de saisie semi-automatique des adresses fonctionne.

Nous avons un guide séparé sur la façon de configurer correctement Everest Forms Pro sur votre site Web. Alors, vérifiez cela si vous avez besoin d'aide pour installer et activer le plugin.

Étape 2 : Installer et activer le module complémentaire de géolocalisation

Si vous avez correctement configuré Everest Forms Pro, vous devriez pouvoir accéder à tous les modules complémentaires disponibles. N'oubliez pas que les modules complémentaires auxquels vous avez accès dépendent du plan que vous avez acheté.

Alors, ouvrez Everest Forms >> Modules complémentaires dans votre tableau de bord WordPress.

Faites défiler vers le bas pour trouver le module complémentaire de géolocalisation et cliquez sur Installer le module complémentaire . Pour terminer l'installation, appuyez ensuite sur le bouton Activer .

Cela configurera le module complémentaire que vous pourrez utiliser dans vos formulaires WordPress.

Étape 3 : Obtenez la clé API à partir de la console Google

La troisième étape consiste à obtenir la clé API de Google Console. Cela vous aidera à connecter le plugin Everest Forms à Google Console.

Tout d'abord, visitez le tableau de bord de la console Google. Vous devez être connecté via votre compte Google pour accéder à ce tableau de bord.

Ensuite, sélectionnez votre projet en haut du tableau de bord.

Si vous n'avez pas encore de projet, vous pouvez en créer un en cliquant sur Nouveau projet . Ensuite, donnez un nom à votre projet et appuyez sur Créer .

Après avoir choisi le projet, vous arriverez sur la page API et services du projet.

Supposons que vous n'êtes pas automatiquement redirigé vers cette page. Dans ce cas, vous pouvez l'ouvrir chaque année à partir du menu de navigation en haut à gauche.

Appuyez sur le menu et ouvrez API et services >> API et services activés .

Ici, cliquez sur + ACTIVER LES API ET LES SERVICES .

Dans la bibliothèque d'API, recherchez l' API Places et activez -la.

Remarque : Pour activer l'API avec succès, vous devez disposer d'un compte de facturation. Par conséquent, activez la facturation pour votre Google Cloud Console avant de continuer.

Une fois que vous avez activé l'API, accédez à APIs & Services >> Credentials . Maintenant, cliquez sur +Create Credentials puis sélectionnez API Key .

Cela génère une nouvelle clé API pour vous. Mais avant de copier la clé API, vous devez lui ajouter certaines restrictions. Pour cela, cliquez sur Modifier la clé .

Tout d'abord, vous devez définir une restriction d'application . Cela vous permet de limiter les sites Web, les adresses IP ou les applications qui peuvent utiliser la clé API. Dans notre cas, choisissons Sites Web .

Ensuite, ajoutez le site Web où la clé API sera valide et appuyez sur Terminé . Vous pouvez ajouter plusieurs sites Web si vous en avez besoin.

Après cela, vous devez définir les restrictions de l'API en choisissant le bouton radio Restreindre la clé . Cela permet à votre clé de savoir quelles API activées elle peut appeler.

Puisque nous n'avons besoin que de l'API Places, choisissons-la dans la liste déroulante. Vous pouvez activer et ajouter d'autres API comme l'API Maps JavaScript selon les besoins.

Enfin, appuyez sur le bouton Enregistrer .

Tout ce que vous avez à faire maintenant est de copier la clé pour une utilisation ultérieure. Gardez-le précieusement car vous en aurez besoin pour la prochaine étape.

Étape 4 : Ajouter une clé API aux paramètres de géolocalisation

De retour dans votre tableau de bord WordPress, allez dans Everest Forms >> Paramètres >> Géolocalisation .

Collez la clé API que vous avez copiée dans le champ Clé API Google Places . Ensuite, appuyez sur le bouton Enregistrer les modifications .

Ceci complète la connexion entre l'API Google Places et Everest Forms.

Il existe une autre option, Emplacement actuel , dans les paramètres de géolocalisation . Lorsque vous activez cette option, vos formulaires détectent et remplissent automatiquement l'emplacement actuel de l'utilisateur dans le champ Adresse .

C'est complètement facultatif, donc que vous l'activiez ou non dépend de vos besoins.

Étape 5 : créer un nouveau formulaire avec un champ d'adresse

Vous avez connecté avec succès Everest Forms à l'API Google Places. Cependant, vous avez toujours besoin du formulaire où la fonction d'adresse de saisie semi-automatique est applicable.

Pour cela, vous devez créer un nouveau formulaire WordPress avec le champ Adresse .

La question est : quel type de formulaire faites-vous ? Eh bien, c'est entièrement à vous!

La meilleure chose à propos d'Everest Forms est qu'il vous permet de créer tout type de formulaire dont vous avez besoin. Formulaires de contact, formulaires d'enquête, formulaires de demande d'emploi, formulaires de réservation, etc.

Par conséquent, allez dans Everest Forms >> Add New .

Everest Forms propose plusieurs modèles prédéfinis pour divers formulaires. Ainsi, vous pouvez personnaliser l'un d'entre eux si vous manquez de temps.

Mais concevoir un formulaire à partir de zéro est tout aussi simple ! Faites simplement glisser et déposez les champs requis et personnalisez-les.

Nous allons créer un formulaire de contact simple avec un champ d'adresse à partir de zéro pour ce guide.

Alors, cliquez sur Démarrer à partir de zéro . Ensuite, entrez le titre du formulaire et appuyez sur Continuer .

Cela vous amène au générateur de formulaires. Comme vous pouvez le voir, tous les champs du formulaire sont regroupés à gauche. Vous pouvez les faire glisser et les déposer dans les lignes du formulaire à droite.

Ainsi, ajoutez tous les champs dont vous avez besoin dans le formulaire, tels que Name , Email , Subject , Message , et surtout, Address .

Lorsque le formulaire WordPress d'auto-complétion d'adresse est terminé, appuyez sur le bouton Enregistrer en haut pour enregistrer votre nouveau formulaire.

Étape 6 : Activer la saisie semi-automatique de l'adresse pour le champ d'adresse

Avec chaque champ, vous obtenez de nombreuses options de personnalisation. De même, vous obtenez plusieurs options pour le champ Adresse , l'une d'entre elles étant la fonction de saisie semi-automatique de l'adresse.

Bien que nous nous concentrions ici sur le champ Adresse , assurez-vous de personnaliser également les autres champs.

Cliquez sur le champ que vous souhaitez modifier ; ses options de personnalisation s'ouvriront sur la gauche.

À partir de là, vous pouvez modifier le champ Label , Description , Field Visibility , etc. Vous pouvez également activer Required , Enable Tooltip , Hide Label et add CSS Classes .

De plus, vous pourrez également définir une logique conditionnelle pour les champs individuels.

Mais revenons à notre champ de surbrillance ici. Lorsque vous cliquez sur le champ Adresse , les options de champ affichent des options similaires à celles décrites ci-dessus.

Cependant, les options avancées incluent certaines fonctionnalités organisées pour le champ Adresse .

Par exemple, vous pouvez modifier l' espace réservé et la valeur par défaut pour la ligne d'adresse 1 , la ligne d'adresse 2 , le pays , etc. De plus, vous pouvez choisir les pays que vous souhaitez mettre à la disposition des utilisateurs dans la liste des pays par défaut .

Plus important encore, vous pouvez activer la fonction de saisie semi-automatique de l'adresse en cochant simplement la case.

Appuyez sur le bouton Enregistrer et votre champ Adresse suggérera automatiquement des lieux aux utilisateurs remplissant le formulaire.

Étape 7 : Affichez le formulaire WordPress de saisie semi-automatique d'adresse sur votre site

Toutes nos félicitations! Vous êtes à la dernière étape de ce tutoriel !

Puisque le formulaire WordPress d'auto-complétion d'adresse est prêt, vous devez l'ajouter au front-end de votre site Web.

Everest Forms vous permet de le faire en quelques étapes simples.

Commencez par ouvrir la page ou la publication où vous souhaitez ajouter le formulaire WordPress.

Une fois que vous êtes dans l'éditeur Gutenberg, sélectionnez le bouton d'insertion de bloc ( + ).

Recherchez le bloc Everest Forms et ajoutez-le à la page/publication en cliquant dessus.

Ensuite, choisissez le formulaire avec le champ d'adresse de saisie semi-automatique dans la liste déroulante. Cela ajoute automatiquement le formulaire à la page/publication.

Enfin, appuyez sur le bouton Mettre à jour en haut.

Vous pouvez également ajouter le formulaire à une toute nouvelle page/publication. Suivez simplement les mêmes étapes et appuyez sur le bouton Publier à la fin. Et tu as fini!

Le formulaire WordPress d'auto-complétion d'adresse est désormais accessible depuis le front-end à vos utilisateurs.

Emballer

Comme vous pouvez le constater, la création d'un formulaire de saisie semi-automatique d'adresse Google WordPress est extrêmement simple. Surtout lorsque vous avez le plugin Everest Forms à portée de main.

Ce plugin incroyable vous permet de connecter rapidement vos formulaires à la console Google. Ainsi, vos utilisateurs peuvent facilement remplir le champ Adresse à l'aide de la fonction de saisie semi-automatique.

Mais saviez-vous? Everest Forms a bien plus à offrir.

Vous pouvez l'utiliser pour personnaliser les modèles d'e-mails, planifier les soumissions de formulaires, remplir automatiquement les champs de formulaire, etc.

Lisez tout sur ce plugin sur notre blog. Consultez notre chaîne YouTube pour des didacticiels vidéo faciles si vous êtes un apprenant visuel.

Suivez également Twitter et Facebook pour des mises à jour sur les publications hebdomadaires.